autonomous.contact/public/tabs/chat/chat.html

<div id="chat" class="tab">
	<input
		type="radio"
		name="top-level-tabs"
		id="chat-tab-input"
		class="tab-switch"
		data-hash="/chat"
	/>
	<label for="chat-tab-input" class="tab-label"
		><div class="icon chat"></div>
		<div class="label">Chat</div>
	</label>
	<div class="tab-content">
		<style>
			<!-- #include file="./chat.css" -->
		</style>
		<script src="/js/external/mimetypes.js" type="text/javascript"></script>
		<script src="/js/external/punycode.js" type="text/javascript"></script>
		<script src="/tabs/chat/chat.js" type="text/javascript"></script>
		<div class="sidebar resizable">
			<input type="checkbox" id="sidebar-toggle" />
			<label id="sidebar-toggle-icon" for="sidebar-toggle">
				<div class="icon right"></div>
			</label>
			<div id="zone-creation-container" data-requires-permission="zones.create">
				<button
					id="toggle-zone-creation-form-button"
					onclick="((event) => {
						event.preventDefault();
					 	const zone_create_form = document.getElementById( 'zone-create' );
						zone_create_form.style[ 'height' ] = zone_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
					})(event)"
				>
					<div class="icon plus"></div>
				</button>
				<form
					id="zone-create"
					data-smart="true"
					action="/api/zones"
					method="POST"
					style="
						margin-top: 1rem;
						width: 100%;
						overflow: hidden;
						height: 0;
						overflow: hidden;
						transition: all 0.5s;
					"
				>
					<input
						id="new-zone-name-input"
						type="text"
						name="name"
						value=""
						placeholder="new zone"
					/>
					<!-- <button class="primary" type="submit">
						<div class="icon plus"></div>
					</button> -->
					<input type="submit" hidden />
					<script>
						{
							const form = document.currentScript.closest("form");
							const zone_create_form = document.getElementById("zone-create");
							const new_zone_name_input =
								document.getElementById("new-zone-name-input");

							form.on_reply = (new_zone) => {
								const zone_list = document.getElementById("zone-list");
								zone_list.insertAdjacentHTML(
									"beforeend",
									`<li id="zone-selector-${new_zone.id}" class="zone"><a href="#/zone/${new_zone.id}">${new_zone.name}</a></li>`,
								);

								new_zone_name_input.value = "";
								window.location.hash = `/chat/zone/${new_zone.id}`;
								zone_create_form.style["height"] = "0";
							};
						}
					</script>
				</form>
			</div>
			<div>
				<span class="title">chat zones</span>
			</div>
			<ul id="zone-list" class="zone-list"></ul>
		</div>
		<div id="zone-chat-container">
			<div id="zone-chat-content"></div>
			<div id="zone-chat-entry-container">
				<form id="zone-chat-entry" action="" data-smart="true" data-method="POST">
					<input id="parent-id" type="hidden" name="parent_id" value="" />
					<input
						id="file-upload-and-share-input"
						aria-label="Upload and share file"
						type="file"
						name="file-upload-and-share"
						multiple
					/>
					<label for="file-upload-and-share-input">
						<div class="icon attachment"></div>
					</label>
					<textarea
						id="zone-chat-input"
						class="zone-chat-input"
						rows="1"
						name="data.message"
					></textarea>
					<button id="zone-chat-send" class="primary" aria-label="Send a message">
						<i class="icon send"></i>
					</button>
					<script>
						{
							const form = document.currentScript.closest("form");
							const file_input = document.querySelector(
								'input[name="file-upload-and-share"]',
							);
							const chat_input = document.getElementById("zone-chat-input");
							const parent_id_input = document.getElementById("parent-id");
							const zone_chat_container =
								document.getElementById("zone-chat-container");
							const zone_chat_content = document.getElementById("zone-chat-content");

							let messages_in_flight = {};

							chat_input.addEventListener("keypress", (event) => {
								if (event.key === "Enter" && !event.shiftKey) {
									form.requestSubmit();
								}
							});

							form.on_submit = async (event) => {
								const user = JSON.parse(document.body.dataset.user);
								const zone_id = zone_chat_container.dataset.zone_id;
								if (!zone_id) {
									alert("Failed to get zone_id!");
									return false;
								}

								form.uploaded_urls = [];
								form.errors = [];
								for await (const file of file_input.files) {
									const body = new FormData();
									body.append("file", file, encodeURIComponent(file.name));

									const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;

									const file_upload_response = await api.fetch(file_path, {
										method: "PUT",
										body,
									});

									if (!file_upload_response.ok) {
										const error = await file_upload_response.json();
										form.errors.push(error?.error?.message ?? "Unknown error.");
										continue;
									}

									const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
									form.uploaded_urls.push(file_url);
								}

								if (form.errors.length) {
									const errors = form.errors.join("\n\n");
									alert(errors);
									return false;
								}

								const message = chat_input.value.trim();
								if (form.uploaded_urls.length === 0 && message.length === 0) {
									return false;
								}

								form.action = `/api/zones/${zone_id}/events`;
							};

							form.on_parsed = (json) => {
								const now = new Date().toISOString();

								const temp_id = `TEMP-${now}`;
								json.id = temp_id;
								json.type = "chat";
								json.meta = {
									temp_id,
								};
								json.timestamps = {
									created: now,
									updated: now,
								};

								if (form.uploaded_urls.length) {
									json.data = json.data ?? {};
									json.data.message =
										(typeof json.data.message === "string" &&
										json.data.message.trim().length
											? json.data.message.trim() + "\n"
											: "") + form.uploaded_urls.join("\n");
								}

								const user = JSON.parse(document.body.dataset.user);
								render_text_event(zone_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_zone_events([sent_message]);
								parent_id_input.value = "";
								chat_input.value = "";
								chat_input.focus();
							};
						}
					</script>
				</form>
			</div>
		</div>
	</div>
</div>