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

feature: try to get chat to actually work

Browse source
This commit is contained in:
Andy Burke 2025-07-11 18:33:32 -07:00
parent 51acbef35f
commit 013e30264f
13 changed files with 1203 additions and 631 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -78,7 +78,9 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
'Cache-Control': 'no-cache, must-revalidate'
};
const results = (await events.all(options)).map((entry) => entry.load());
const results = (await events.all(options))
.map((entry) => entry.load())
.sort((lhs_item, rhs_item) => rhs_item.timestamps.created.localeCompare(lhs_item.timestamps.created));
// long-polling support
if (results.length === 0 && meta.query.wait) {
@ -104,6 +106,7 @@ export async function GET(request: Request, meta: Record<string, any>): Promise<
events.on('create', on_create);
request.signal.addEventListener('abort', () => {
events.off('create', on_create);
reject(new Error('request aborted'));
});
Deno.addSignalListener('SIGINT', () => {
events.off('create', on_create);

90
public/base.css
View file

@ -125,6 +125,60 @@ body {
border-right: 4px solid #444;
}
form div {
position: relative;
display: flex;
margin-bottom: 1em;
}
form label {
position: absolute;
top: 10px;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: var(--bg);
-webkit-transition:
top 0.2s ease-in-out,
font-size 0.2s ease-in-out;
transition:
top 0.2s ease-in-out,
font-size 0.2s ease-in-out;
}
form input:focus ~ label,
form input:valid ~ label {
top: -25px;
font-size: 20px;
}
form input {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
}
form input:focus {
outline: none;
}
form button {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
margin-top: 1rem;
}
form button.primary {
background-color: var(--accent);
}
button {
background: inherit;
color: inherit;
@ -141,12 +195,14 @@ button.primary {
[data-requires-permission] {
visibility: hidden;
opacity: 0;
height: 0;
}
body[data-perms*="users.write"] [data-requires-permission="users.write"],
body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
visibility: visible;
opacity: 1;
height: unset;
}
/* ICONS */
@ -162,8 +218,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
margin: 0 auto;
}
/* ICON - ADD (with box) */
.icon.add {
box-sizing: border-box;
position: relative;
display: block;
width: 22px;
height: 22px;
border: 2px solid;
transform: scale(var(--icon-scale, 1));
border-radius: 4px;
}
.icon.add::after,
.icon.add::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 10px;
height: 2px;
background: currentColor;
border-radius: 5px;
top: 8px;
left: 4px;
}
.icon.add::after {
width: 2px;
height: 10px;
top: 4px;
left: 8px;
}
/* ICON - ATTACHMENT */
.icon.attachment {
box-sizing: border-box;

2
public/js/datetimeutils.js
View file

@ -15,5 +15,7 @@ function datetime_to_local(input) {
timeStyle: "short",
hour12: true,
}),
value: local_datetime.valueOf(),
};
}

443
public/js/external/punycode.js vendored Normal file
View file

@ -0,0 +1,443 @@
// https://github.com/mathiasbynens/punycode.js
"use strict";
function get_punycode() {
/** Highest positive signed 32-bit float value */
const maxInt = 2147483647; // aka. 0x7FFFFFFF or 2^31-1
/** Bootstring parameters */
const base = 36;
const tMin = 1;
const tMax = 26;
const skew = 38;
const damp = 700;
const initialBias = 72;
const initialN = 128; // 0x80
const delimiter = "-"; // '\x2D'
/** Regular expressions */
const regexPunycode = /^xn--/;
const regexNonASCII = /[^\0-\x7F]/; // Note: U+007F DEL is excluded too.
const regexSeparators = /[\x2E\u3002\uFF0E\uFF61]/g; // RFC 3490 separators
/** Error messages */
const errors = {
overflow: "Overflow: input needs wider integers to process",
"not-basic": "Illegal input >= 0x80 (not a basic code point)",
"invalid-input": "Invalid input",
};
/** Convenience shortcuts */
const baseMinusTMin = base - tMin;
const floor = Math.floor;
const stringFromCharCode = String.fromCharCode;
/*--------------------------------------------------------------------------*/
/**
* A generic error utility function.
* @private
* @param {String} type The error type.
* @returns {Error} Throws a `RangeError` with the applicable error message.
*/
function error(type) {
throw new RangeError(errors[type]);
}
/**
* A generic `Array#map` utility function.
* @private
* @param {Array} array The array to iterate over.
* @param {Function} callback The function that gets called for every array
* item.
* @returns {Array} A new array of values returned by the callback function.
*/
function map(array, callback) {
const result = [];
let length = array.length;
while (length--) {
result[length] = callback(array[length]);
}
return result;
}
/**
* A simple `Array#map`-like wrapper to work with domain name strings or email
* addresses.
* @private
* @param {String} domain The domain name or email address.
* @param {Function} callback The function that gets called for every
* character.
* @returns {String} A new string of characters returned by the callback
* function.
*/
function mapDomain(domain, callback) {
const parts = domain.split("@");
let result = "";
if (parts.length > 1) {
// In email addresses, only the domain name should be punycoded. Leave
// the local part (i.e. everything up to `@`) intact.
result = parts[0] + "@";
domain = parts[1];
}
// Avoid `split(regex)` for IE8 compatibility. See #17.
domain = domain.replace(regexSeparators, "\x2E");
const labels = domain.split(".");
const encoded = map(labels, callback).join(".");
return result + encoded;
}
/**
* Creates an array containing the numeric code points of each Unicode
* character in the string. While JavaScript uses UCS-2 internally,
* this function will convert a pair of surrogate halves (each of which
* UCS-2 exposes as separate characters) into a single code point,
* matching UTF-16.
* @see `punycode.ucs2.encode`
* @see <https://mathiasbynens.be/notes/javascript-encoding>
* @memberOf punycode.ucs2
* @name decode
* @param {String} string The Unicode input string (UCS-2).
* @returns {Array} The new array of code points.
*/
function ucs2decode(string) {
const output = [];
let counter = 0;
const length = string.length;
while (counter < length) {
const value = string.charCodeAt(counter++);
if (value >= 0xd800 && value <= 0xdbff && counter < length) {
// It's a high surrogate, and there is a next character.
const extra = string.charCodeAt(counter++);
if ((extra & 0xfc00) == 0xdc00) {
// Low surrogate.
output.push(((value & 0x3ff) << 10) + (extra & 0x3ff) + 0x10000);
} else {
// It's an unmatched surrogate; only append this code unit, in case the
// next code unit is the high surrogate of a surrogate pair.
output.push(value);
counter--;
}
} else {
output.push(value);
}
}
return output;
}
/**
* Creates a string based on an array of numeric code points.
* @see `punycode.ucs2.decode`
* @memberOf punycode.ucs2
* @name encode
* @param {Array} codePoints The array of numeric code points.
* @returns {String} The new Unicode string (UCS-2).
*/
const ucs2encode = (codePoints) => String.fromCodePoint(...codePoints);
/**
* Converts a basic code point into a digit/integer.
* @see `digitToBasic()`
* @private
* @param {Number} codePoint The basic numeric code point value.
* @returns {Number} The numeric value of a basic code point (for use in
* representing integers) in the range `0` to `base - 1`, or `base` if
* the code point does not represent a value.
*/
const basicToDigit = function (codePoint) {
if (codePoint >= 0x30 && codePoint < 0x3a) {
return 26 + (codePoint - 0x30);
}
if (codePoint >= 0x41 && codePoint < 0x5b) {
return codePoint - 0x41;
}
if (codePoint >= 0x61 && codePoint < 0x7b) {
return codePoint - 0x61;
}
return base;
};
/**
* Converts a digit/integer into a basic code point.
* @see `basicToDigit()`
* @private
* @param {Number} digit The numeric value of a basic code point.
* @returns {Number} The basic code point whose value (when used for
* representing integers) is `digit`, which needs to be in the range
* `0` to `base - 1`. If `flag` is non-zero, the uppercase form is
* used; else, the lowercase form is used. The behavior is undefined
* if `flag` is non-zero and `digit` has no uppercase form.
*/
const digitToBasic = function (digit, flag) {
// 0..25 map to ASCII a..z or A..Z
// 26..35 map to ASCII 0..9
return digit + 22 + 75 * (digit < 26) - ((flag != 0) << 5);
};
/**
* Bias adaptation function as per section 3.4 of RFC 3492.
* https://tools.ietf.org/html/rfc3492#section-3.4
* @private
*/
const adapt = function (delta, numPoints, firstTime) {
let k = 0;
delta = firstTime ? floor(delta / damp) : delta >> 1;
delta += floor(delta / numPoints);
for (; /* no initialization */ delta > (baseMinusTMin * tMax) >> 1; k += base) {
delta = floor(delta / baseMinusTMin);
}
return floor(k + ((baseMinusTMin + 1) * delta) / (delta + skew));
};
/**
* Converts a Punycode string of ASCII-only symbols to a string of Unicode
* symbols.
* @memberOf punycode
* @param {String} input The Punycode string of ASCII-only symbols.
* @returns {String} The resulting string of Unicode symbols.
*/
const decode = function (input) {
// Don't use UCS-2.
const output = [];
const inputLength = input.length;
let i = 0;
let n = initialN;
let bias = initialBias;
// Handle the basic code points: let `basic` be the number of input code
// points before the last delimiter, or `0` if there is none, then copy
// the first basic code points to the output.
let basic = input.lastIndexOf(delimiter);
if (basic < 0) {
basic = 0;
}
for (let j = 0; j < basic; ++j) {
// if it's not a basic code point
if (input.charCodeAt(j) >= 0x80) {
error("not-basic");
}
output.push(input.charCodeAt(j));
}
// Main decoding loop: start just after the last delimiter if any basic code
// points were copied; start at the beginning otherwise.
for (
let index = basic > 0 ? basic + 1 : 0;
index < inputLength /* no final expression */;
) {
// `index` is the index of the next character to be consumed.
// Decode a generalized variable-length integer into `delta`,
// which gets added to `i`. The overflow checking is easier
// if we increase `i` as we go, then subtract off its starting
// value at the end to obtain `delta`.
const oldi = i;
for (let w = 1, k = base /* no condition */; ; k += base) {
if (index >= inputLength) {
error("invalid-input");
}
const digit = basicToDigit(input.charCodeAt(index++));
if (digit >= base) {
error("invalid-input");
}
if (digit > floor((maxInt - i) / w)) {
error("overflow");
}
i += digit * w;
const t = k <= bias ? tMin : k >= bias + tMax ? tMax : k - bias;
if (digit < t) {
break;
}
const baseMinusT = base - t;
if (w > floor(maxInt / baseMinusT)) {
error("overflow");
}
w *= baseMinusT;
}
const out = output.length + 1;
bias = adapt(i - oldi, out, oldi == 0);
// `i` was supposed to wrap around from `out` to `0`,
// incrementing `n` each time, so we'll fix that now:
if (floor(i / out) > maxInt - n) {
error("overflow");
}
n += floor(i / out);
i %= out;
// Insert `n` at position `i` of the output.
output.splice(i++, 0, n);
}
return String.fromCodePoint(...output);
};
/**
* Converts a string of Unicode symbols (e.g. a domain name label) to a
* Punycode string of ASCII-only symbols.
* @memberOf punycode
* @param {String} input The string of Unicode symbols.
* @returns {String} The resulting Punycode string of ASCII-only symbols.
*/
const encode = function (input) {
const output = [];
// Convert the input in UCS-2 to an array of Unicode code points.
input = ucs2decode(input);
// Cache the length.
const inputLength = input.length;
// Initialize the state.
let n = initialN;
let delta = 0;
let bias = initialBias;
// Handle the basic code points.
for (const currentValue of input) {
if (currentValue < 0x80) {
output.push(stringFromCharCode(currentValue));
}
}
const basicLength = output.length;
let handledCPCount = basicLength;
// `handledCPCount` is the number of code points that have been handled;
// `basicLength` is the number of basic code points.
// Finish the basic string with a delimiter unless it's empty.
if (basicLength) {
output.push(delimiter);
}
// Main encoding loop:
while (handledCPCount < inputLength) {
// All non-basic code points < n have been handled already. Find the next
// larger one:
let m = maxInt;
for (const currentValue of input) {
if (currentValue >= n && currentValue < m) {
m = currentValue;
}
}
// Increase `delta` enough to advance the decoder's <n,i> state to <m,0>,
// but guard against overflow.
const handledCPCountPlusOne = handledCPCount + 1;
if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) {
error("overflow");
}
delta += (m - n) * handledCPCountPlusOne;
n = m;
for (const currentValue of input) {
if (currentValue < n && ++delta > maxInt) {
error("overflow");
}
if (currentValue === n) {
// Represent delta as a generalized variable-length integer.
let q = delta;
for (let k = base /* no condition */; ; k += base) {
const t = k <= bias ? tMin : k >= bias + tMax ? tMax : k - bias;
if (q < t) {
break;
}
const qMinusT = q - t;
const baseMinusT = base - t;
output.push(
stringFromCharCode(digitToBasic(t + (qMinusT % baseMinusT), 0)),
);
q = floor(qMinusT / baseMinusT);
}
output.push(stringFromCharCode(digitToBasic(q, 0)));
bias = adapt(delta, handledCPCountPlusOne, handledCPCount === basicLength);
delta = 0;
++handledCPCount;
}
}
++delta;
++n;
}
return output.join("");
};
/**
* Converts a Punycode string representing a domain name or an email address
* to Unicode. Only the Punycoded parts of the input will be converted, i.e.
* it doesn't matter if you call it on a string that has already been
* converted to Unicode.
* @memberOf punycode
* @param {String} input The Punycoded domain name or email address to
* convert to Unicode.
* @returns {String} The Unicode representation of the given Punycode
* string.
*/
const toUnicode = function (input) {
return mapDomain(input, function (string) {
return regexPunycode.test(string) ? decode(string.slice(4).toLowerCase()) : string;
});
};
/**
* Converts a Unicode string representing a domain name or an email address to
* Punycode. Only the non-ASCII parts of the domain name will be converted,
* i.e. it doesn't matter if you call it with a domain that's already in
* ASCII.
* @memberOf punycode
* @param {String} input The domain name or email address to convert, as a
* Unicode string.
* @returns {String} The Punycode representation of the given domain name or
* email address.
*/
const toASCII = function (input) {
return mapDomain(input, function (string) {
return regexNonASCII.test(string) ? "xn--" + encode(string) : string;
});
};
/*--------------------------------------------------------------------------*/
/** Define the public API */
const punycode = {
/**
* A string representing the current Punycode.js version number.
* @memberOf punycode
* @type String
*/
version: "2.3.1",
/**
* An object of methods to convert from JavaScript's internal character
* representation (UCS-2) to Unicode code points, and back.
* @see <https://mathiasbynens.be/notes/javascript-encoding>
* @memberOf punycode
* @type Object
*/
ucs2: {
decode: ucs2decode,
encode: ucs2encode,
},
decode: decode,
encode: encode,
toASCII: toASCII,
toUnicode: toUnicode,
};
//module.exports = punycode;
return punycode;
}

42
public/js/smartforms.js
View file

@ -2,10 +2,17 @@ document.addEventListener("DOMContentLoaded", () => {
/* make all forms semi-smart */
const forms = document.querySelectorAll("form[data-smart]");
for (const form of forms) {
const script = form.querySelector("script");
form.onsubmit = async (event) => {
async function on_submit(event) {
event.preventDefault();
form.disabled = true;
if (form.on_submit) {
const result = await form.on_submit(event);
if (result === false) {
form.disabled = false;
return;
}
}
const url = form.action;
const method = form.dataset.method ?? "POST";
@ -24,13 +31,11 @@ document.addEventListener("DOMContentLoaded", () => {
current[elements.slice(elements.length - 1).shift()] = value;
}
console.dir({
method,
form,
json,
});
if (form.on_parsed) {
await form.on_parsed(json);
}
try {
// TODO: send session header
const options = {
method,
headers: {
@ -56,21 +61,30 @@ document.addEventListener("DOMContentLoaded", () => {
return;
}
const response_body = await response.json();
if (form.on_response) {
return form.on_response(response_body);
await form.on_response(response);
}
const response_body = await response.json();
if (form.on_reply) {
return form.on_reply(response_body);
}
} catch (error) {
console.dir({
error,
});
if (form.onerror) {
return form.onerror(error);
if (form.on_error) {
return form.on_error(error);
}
alert(error);
} finally {
form.disabled = false;
}
};
}
form.addEventListener("submit", on_submit);
//form.onsubmit = on_submit;
}
});

66
public/signup_login_wall.html
View file

@ -31,59 +31,7 @@
#signup-login-wall form {
width: 100%;
}
form div {
position: relative;
display: flex;
margin-bottom: 1em;
}
form label {
position: absolute;
top: 10px;
font-size: 30px;
margin: 10px;
padding: 0 10px;
background-color: var(--bg);
-webkit-transition:
top 0.2s ease-in-out,
font-size 0.2s ease-in-out;
transition:
top 0.2s ease-in-out,
font-size 0.2s ease-in-out;
}
form input:focus ~ label,
form input:valid ~ label {
top: -25px;
font-size: 20px;
}
form input {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
}
form input:focus {
outline: none;
}
form button {
width: 100%;
padding: 20px;
border: 1px solid var(--text);
font-size: 20px;
background-color: var(--bg);
color: var(--text);
}
form button.primary {
background-color: var(--accent);
padding: 1rem;
}
</style>
@ -101,17 +49,11 @@
<div class="label">Log In</div>
</label>
<div class="tab-content">
<form
data-smart="true"
data-method="POST"
id="login-form"
action="/api/auth"
onreply="(user)=>{ document.body.dataset.user = JSON.stringify( user ); }"
>
<form data-smart="true" data-method="POST" id="login-form" action="/api/auth">
<script>
{
const form = document.currentScript.closest("form");
form.on_response = (response) => {
form.on_reply = (response) => {
// TODO: we should hold the session secret only in memory, not the cookie?
document.body.dataset.user = JSON.stringify(response.user);
document.body.dataset.perms =
@ -148,7 +90,7 @@
<script>
{
const form = document.currentScript.closest("form");
form.on_response = (response) => {
form.on_reply = (response) => {
document.body.dataset.user = JSON.stringify(response.user);
document.body.dataset.perms =
response.user.permissions.join(":");

2
public/tabs/profile.html
View file

@ -65,7 +65,7 @@
<script>
{
const form = document.currentScript.closest("form");
form.on_response = (response) => {
form.on_reply = (response) => {
if (!response.deleted) {
alert("error logging out? please reload.");
return;

3
public/tabs/tabs.html
View file

@ -82,7 +82,6 @@
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1rem 0 1rem;
opacity: 0;
transition: all 0.35s;
border-top: 1px solid var(--border-subtle);
@ -128,7 +127,7 @@
<div class="tabs">
<!-- #include file="./home.html" -->
<!-- #include file="./talk.html" -->
<!-- #include file="./talk/talk.html" -->
<!-- #include file="./exchange.html" -->
<!-- #include file="./work.html" -->
<!-- #include file="./resources.html" -->

547
public/tabs/talk.html
View file

@ -1,547 +0,0 @@
<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;
}
.room-list {
margin: 1rem 0;
list-style-type: none;
}
.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: 0.5rem;
right: 0.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;
margin: 0 1rem;
}
#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>
<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>
<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"><a href="" contenteditable="true">new room</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_room_element = document.getElementById("new-room");
return new_room_element;
}
const users = {};
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
let last_message_id = undefined;
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
last_message_id =
last_message_id === undefined
? event.id
: event.id > last_message_id
? event.id
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== room_chat_content.dataset.last_message_id) {
room_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
users[event.creator_id] ??
(await (await api.fetch(`/api/users/${event.creator_id}`)).json());
console.dir({
users,
events,
});
room_chat_content.insertAdjacentHTML(
"beforeend",
render_text_event(event, users[event.creator_id]),
);
}
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change rooms, this is the most basic
// first pass outline
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;
if (!room_id) {
return;
}
const message_polling_url = `/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
room_polling_request_abort_controller =
room_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: room_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = await new_events_response.json();
console.dir({
room_id,
new_events_response,
new_events,
});
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) {
const room_chat_content = document.getElementById("room-chat-content");
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
delete room_chat_content.dataset.last_message_id;
}
const room_response = await api.fetch(`/api/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();
room_chat_content.dataset.room_id = room.id;
room_chat_content.innerHTML = "";
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
if (room_selector.id === `room-selector-${room_id}`) {
room_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = (await events_response.json()).reverse();
append_room_events(events);
poll_for_new_events(room_id);
}
let last_room_update = undefined;
async function update_chat_rooms() {
const now = new Date();
const time_since_last_update = now - (last_room_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
const rooms_response = await api.fetch("/api/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-selector-${room.id}" class="room"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
);
}
last_room_update = now;
}
}
window.addEventListener("locationchange", update_chat_rooms);
function check_for_room_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
}
const hash = window.location.hash;
const talk_in_url = hash.indexOf("#/talk") === 0;
if (!talk_in_url) {
return;
}
const first_room_id = document.querySelector("li.room")?.id.substring(14);
// #/talk/room/{room_id}
// ^ 12
const room_id = hash.substring(12) || first_room_id;
if (!room_id) {
setTimeout(check_for_room_in_url, 100);
return;
}
const room_chat_container = document.getElementById("room-chat-container");
if (room_chat_container.dataset.room_id !== room_id) {
window.location.hash = `/talk/room/${room_id}`;
room_chat_container.dataset.room_id = room_id;
load_room(room_id);
}
}
window.addEventListener("locationchange", check_for_room_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_rooms();
check_for_room_in_url();
});
// TODO: this should be moved to be handled by a smartform
document.addEventListener("DOMContentLoaded", async () => {
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 = {
id: `TEMP-${now}`,
type: "chat",
data: {
message,
},
timestamps: {
created: now,
updated: now,
},
};
const user = JSON.parse(document.body.dataset.user);
room_chat_content.insertAdjacentHTML(
"beforeend",
render_text_event(message_event, user),
);
const event_response = await api.fetch(`/api/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(message_event.id);
temp_message.remove();
// 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;
append_room_events([authoritative_message_event]);
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();
const editable = new_room_element.querySelector("[contenteditable]");
editable.focus();
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(editable);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(editable);
selection.removeAllRanges();
selection.addRange(range);
}
editable.addEventListener("keypress", (event) => {
if (event.keyCode !== 13) {
return;
}
event.preventDefault();
editable.blur();
});
editable.addEventListener("focusout", async () => {
const name = editable.textContent ?? editable.innerText;
const new_room_response = await api.fetch("/api/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-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
);
window.location.hash = `/talk/room/${new_room.id}`;
});
});
check_for_room_in_url();
});
</script>
</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 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>

181
public/tabs/talk/talk.css Normal file
View file

@ -0,0 +1,181 @@
#talk .tab-content {
display: grid;
grid-template-columns: auto 1fr;
}
.room-list {
margin: 1rem 0;
list-style-type: none;
}
.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;
width: min-content;
min-width: 10rem;
max-width: 32rem;
overflow-x: scroll;
padding: 0.5rem;
}
#talk .sidebar .title {
text-transform: uppercase;
font-size: small;
font-weight: bold;
line-height: 2rem;
}
#talk #room-chat-container {
position: relative;
}
#talk #room-chat-content {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
right: 0;
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;
margin: 0 1rem;
}
#talk #room-chat-entry-container form textarea {
flex-grow: 1;
background: inherit;
color: inherit;
}
#talk .message-container {
transition: all 0.33s;
background: rgba(255, 255, 255, 0.03);
margin-top: 0.75rem;
padding: 2px;
border-radius: 4px;
}
#talk .message-container.user-tick.time-tick + .message-container.user-tick.time-tick,
#talk .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
#talk .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
#talk .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
margin-top: 0;
padding: 0 2px;
}
#talk
.message-container.user-tick.time-tick
+ .message-container.user-tick.time-tick
.info-container,
#talk
.message-container.user-tick.time-tock
+ .message-container.user-tick.time-tock
.info-container,
#talk
.message-container.user-tock.time-tick
+ .message-container.user-tock.time-tick
.info-container,
#talk
.message-container.user-tock.time-tock
+ .message-container.user-tock.time-tock
.info-container {
opacity: 0;
visibility: hidden;
height: 0;
margin: 0;
}
#talk .message-container.sending {
opacity: 0.75;
}
#talk .message-container .info-container {
display: flex;
margin-bottom: -1.5rem;
height: 3.75rem;
}
#talk .message-container .info-container .avatar-container {
display: inline-block;
margin: 0 4px;
width: 3rem;
height: 3rem;
border-radius: 16%;
overflow: hidden;
}
#talk .message-container .info-container .avatar-container img {
width: 100%;
}
#talk .message-container .info-container .username-container {
margin: 0 4px;
font-weight: bold;
}
#talk .message-container .info-container .datetime-container {
margin: 0 4px;
}
#talk .message-container .info-container .datetime-container .long {
font-size: x-small;
text-transform: uppercase;
}
#talk .message-container .info-container .datetime-container .short {
font-size: xx-small;
visibility: hidden;
display: none;
}
#talk .message-container .message-content-container {
padding-left: 8rem;
}

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

@ -0,0 +1,175 @@
<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>
<!-- #include file="./talk.css" -->
</style>
<script src="./js/external/punycode.js" type="text/javascript"></script>
<script>
<!-- #include file="./talk.js" -->
</script>
<div class="sidebar resizable">
<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 = `/talk/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">
<button aria-label="Attach file">
<i class="icon attachment"></i>
</button>
<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 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 = (event) => {
const message = chat_input.value.trim();
if (message.length === 0) {
return false;
}
const room_id = room_chat_container.dataset.room_id;
if (!room_id) {
alert("Failed to get room_id!");
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,
};
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>

266
public/tabs/talk/talk.js Normal file
View file

@ -0,0 +1,266 @@
const URL_MATCHING_REGEX =
/(?:(?<protocol>[a-zA-Z]+):\/\/)?(?:(?<auth>(?<username>\S.+)\:(?<password>.+))\@)?(?<host>(?:(?<hostname>[-a-zA-Z0-9\.]+)\.)?(?<domain>[-a-zA-Z0-9]+?\.(?<tld>[-a-zA-Z0-9]{2,64}))(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?/gm;
const URL_MATCH_HANDLERS = [
(match) => {
// console.dir(match);
return;
},
// url
(match) => {
// TODO: punycoding if something has unicode?
// const punycode = get_punycode();
// const punycoded_url = punycode.encode(match[0]);
const groups = match.groups ?? {};
return `<a href="${groups.protocol ?? "http"}://${groups.host ?? ""}${groups.path ? `/${groups.path}` : ""}${groups.query ? `?${groups.query}` : ""}${groups.hash ? `#${groups.hash}` : ""}">${match[0]}</a>`;
},
];
function message_text_to_html(input) {
let html_message = input;
let match;
while ((match = URL_MATCHING_REGEX.exec(input)) !== null) {
for (const handler of URL_MATCH_HANDLERS) {
const result = handler(match);
if (typeof result === "string") {
html_message = html_message.replace(match[0], result);
}
}
}
return html_message;
}
const time_tick_tock_timeout = 60 * 1000; // 1 minute
let last_event_datetime_value = 0;
let time_tick_tock_class = "time-tock";
let last_creator_id = null;
let user_tick_tock_class = "user-tock";
function render_text_event(room_chat_content, event, creator, existing_element) {
const event_datetime = datetime_to_local(event.timestamps.created);
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
}
last_event_datetime_value = event_datetime.value;
if (last_creator_id !== creator.id) {
user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
last_creator_id = creator.id;
}
const html_content = `<div id="chat-${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${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">${message_text_to_html(event.data.message)}</div>
</div>`;
if (existing_element) {
const template = document.createElement("template");
template.innerHTML = html_content;
existing_element.replaceWith(template.content.firstChild);
} else {
room_chat_content.insertAdjacentHTML("beforeend", html_content);
}
}
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"><a href="" contenteditable="true">new room</a></li>`,
);
await new Promise((resolve) => setTimeout(resolve, 1));
const new_room_element = document.getElementById("new-room");
return new_room_element;
}
const users = {};
async function append_room_events(events) {
const room_chat_content = document.getElementById("room-chat-content");
let last_message_id = room_chat_content.dataset.last_message_id ?? "";
for (const event of events) {
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
// it becomes the latest message
last_message_id =
event.id > last_message_id && event.id.indexOf("TEMP") !== 0
? event.id
: last_message_id;
// if the last message has been updated, update the content's dataset to reflect that
if (last_message_id !== room_chat_content.dataset.last_message_id) {
room_chat_content.dataset.last_message_id = last_message_id;
}
users[event.creator_id] =
users[event.creator_id] ??
(await (await api.fetch(`/api/users/${event.creator_id}`)).json());
const existing_element =
document.getElementById(`chat-${event.id}`) ??
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);
render_text_event(room_chat_content, event, users[event.creator_id], existing_element);
}
room_chat_content.scrollTop = room_chat_content.scrollHeight;
}
// TODO: we need some abortcontroller handling here or something
// similar for when we change rooms, this is the most basic
// first pass outline
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;
if (!room_id) {
return;
}
const message_polling_url = `/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
room_polling_request_abort_controller =
room_polling_request_abort_controller || new AbortController();
api.fetch(message_polling_url, {
signal: room_polling_request_abort_controller.signal,
})
.then(async (new_events_response) => {
const new_events = (await new_events_response.json()).reverse();
await append_room_events(new_events.toReversed());
poll_for_new_events(room_id);
})
.catch((error) => {
// TODO: poll again? back off?
console.error(error);
});
}
async function load_room(room_id) {
const room_chat_content = document.getElementById("room-chat-content");
if (room_polling_request_abort_controller) {
room_polling_request_abort_controller.abort();
room_polling_request_abort_controller = null;
delete room_chat_content.dataset.last_message_id;
}
const room_response = await api.fetch(`/api/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();
room_chat_content.dataset.room_id = room.id;
room_chat_content.innerHTML = "";
const room_selectors = document.querySelectorAll("li.room");
for (const room_selector of room_selectors) {
room_selector.classList.remove("active");
if (room_selector.id === `room-selector-${room_id}`) {
room_selector.classList.add("active");
}
}
const events_response = await api.fetch(
`/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
);
if (!events_response.ok) {
const error = await events_response.json();
alert(error.message ?? JSON.stringify(error));
return;
}
const events = (await events_response.json()).reverse();
await append_room_events(events);
poll_for_new_events(room_id);
}
let last_room_update = undefined;
async function update_chat_rooms() {
const now = new Date();
const time_since_last_update = now - (last_room_update ?? 0);
if (time_since_last_update < 5_000) {
return;
}
const rooms_response = await api.fetch("/api/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-selector-${room.id}" class="room"><a href="#/talk/room/${room.id}">${room.name}</a></li>`,
);
}
last_room_update = now;
}
}
window.addEventListener("locationchange", update_chat_rooms);
function check_for_room_in_url() {
const user_json = document.body.dataset.user;
if (!user_json) {
return;
}
const hash = window.location.hash;
const talk_in_url = hash.indexOf("#/talk") === 0;
if (!talk_in_url) {
return;
}
const first_room_id = document.querySelector("li.room")?.id.substring(14);
// #/talk/room/{room_id}
// ^ 12
const room_id = hash.substring(12) || first_room_id;
if (!room_id) {
setTimeout(check_for_room_in_url, 100);
return;
}
const room_chat_container = document.getElementById("room-chat-container");
if (room_chat_container.dataset.room_id !== room_id) {
window.location.hash = `/talk/room/${room_id}`;
room_chat_container.dataset.room_id = room_id;
load_room(room_id);
}
}
window.addEventListener("locationchange", check_for_room_in_url);
document.addEventListener("DOMContentLoaded", async () => {
await update_chat_rooms();
check_for_room_in_url();
});