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-view="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 id="topic-chat-container">
			<div id="topic-chat-content"></div>
			<div id="topic-chat-entry-container">
				<form id="topic-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"
						multiple
					/>
					<label for="file-upload-and-share-input">
						<div class="icon attachment"></div>
					</label>
					<textarea
						id="topic-chat-input"
						class="topic-chat-input"
						rows="1"
						name="data.content"
					></textarea>
					<button id="topic-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 = form.querySelector('input[type="file"]');
							const chat_input = form.querySelector('textarea[name="data.content"]');
							const parent_id_input = form.querySelector('input[name="parent_id"]');

							const topic_chat_container =
								document.getElementById("topic-chat-container");
							const topic_chat_content =
								document.getElementById("topic-chat-content");

							let messages_in_flight = {};

							document.addEventListener(
								"topic_changed",
								({ detail: { topic_id } }) => {
									form.action = topic_id ? `/api/topics/${topic_id}/events` : "";
								},
							);

							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 topic_id = document.body.dataset.topic;
								if (!topic_id) {
									alert("Failed to get topic_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.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.content =
										(typeof json.data.content === "string" &&
										json.data.content.trim().length
											? json.data.content.trim() + "\n"
											: "") + form.uploaded_urls.join("\n");
								}

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