A big update for 11. Migrate to WWEBJS and SurrealDB with kysely, res…

…tart command,

graceful shutdown and restart, upgrade packages, added live-reloading when message
is created, custom @everyone body message, basic messaging, and pretty much most
of what is needed for basic Chatting apps. THIS IS PARTIAL WORK AND BUGS MAY BE
PRESENT.

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+# tmp files
+tmp/

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "ts-node",
+            "command": "pnpm ts-node index.ts",
+            "request": "launch",
+            "type": "node-terminal",
+            "cwd": "${fileDirname}",
+            "internalConsoleOptions": "openOnSessionStart"
+        }
+    ]
+}

11 WA-GawrBot-UI/astro.config.mjs

@@ -25,7 +25,7 @@ export default defineConfig({
 	experimental: {
 		assets: true,
 		inlineStylesheets: "always",
-		scopedStyleStrategy: "class",
+		// scopedStyleStrategy: "class",
 	},
 	image: {
 		service: sharpImageService(),

11 WA-GawrBot-UI/package.json

@@ -16,7 +16,7 @@
     "@astrojs/node": "5.1.3",
     "@astrojs/tailwind": "3.1.2",
     "@tauri-apps/api": "1.3.0",
-    "astro": "2.4.5",
+    "astro": "2.5.0",
     "astro-compress": "1.1.42",
     "astro-google-fonts-optimizer": "0.2.2",
     "astro-icon": "0.8.0",

11 WA-GawrBot-UI/src/assets/ts/logic/chatLogic.ts

@@ -1,9 +1,13 @@
-import { toggleMainComponentMobile } from "./mainLogic";
+import { useSocketio } from "../shared-clients";
 
-function attachChatLogic() {
+const socket = useSocketio();
+
+export function attachChatLogic() {
 	const divChat = document.querySelectorAll<HTMLDivElement>("#chat");
 	for (let i = 0; i < divChat.length; i++) {
-		divChat[i].addEventListener("click", toggleMainComponentMobile);
+		divChat[i].parentNode?.addEventListener("click", () => {
+			socket.emit("fetchMain", (divChat[i].parentNode as HTMLDivElement).id.substring(5))
+		});
 	}
 }
 attachChatLogic();
@@ -12,3 +16,8 @@ export function toggleChatsComponentMobile() {
 	const chatsComponentMobile = document.getElementById("chats");
 	chatsComponentMobile?.classList.toggle("hidden");
 }
+
+export function hideChatsComponentMobile() {
+	const chatsComponentMobile = document.getElementById("chats");
+	chatsComponentMobile?.classList.add("hidden");
+}

11 WA-GawrBot-UI/src/assets/ts/logic/chatsLogic.ts

@@ -0,0 +1,7 @@
+import { toggleSideBarComponentMobile } from "./sideBarLogic"
+
+export function attachChatsLogic() {
+	const listIcon = document.getElementById("listIcon");
+	listIcon?.addEventListener("click", toggleSideBarComponentMobile);
+}
+attachChatsLogic();

11 WA-GawrBot-UI/src/assets/ts/logic/headerLogic.ts

@@ -1,6 +1,6 @@
 import { toggleMainComponentMobile } from "./mainLogic";
 
-function attachHeaderLogic() {
+export function attachHeaderLogic() {
 	const buttonMainHeaderBack = document.getElementById("mainHeaderBack");
 	buttonMainHeaderBack?.addEventListener("click", toggleMainComponentMobile);
 }

11 WA-GawrBot-UI/src/assets/ts/logic/inputBarLogic.ts

@@ -0,0 +1,30 @@
+import { useSocketio } from "../shared-clients";
+
+const socket = useSocketio();
+
+export function attachInputBarLogic() {
+	const iconSendComponent = document.getElementById("icon-send");
+
+	iconSendComponent?.addEventListener("click", sendMessage);
+}
+attachInputBarLogic();
+
+export async function sendMessage() {
+	const textInput = document.getElementById("input-text") as HTMLInputElement;
+	const mainComponent = document.getElementById("main") as HTMLDivElement;
+	let chatPhone = mainComponent.dataset.chatPhone;
+	if (textInput?.value.indexOf("@everyone") > -1) {
+		try {
+			await socket.timeout(10000).emitWithAck("sendMessageMentionAll", chatPhone, textInput.value);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+    if (textInput?.value) {
+		try {
+			await socket.timeout(10000).emitWithAck("sendMessage", chatPhone, textInput.value);
+		} catch (e) {
+			console.error(e);
+		}
+	}
+}

11 WA-GawrBot-UI/src/assets/ts/logic/mainLogic.ts

@@ -1,13 +1,33 @@
-import { toggleChatsComponentMobile } from "./chatLogic";
-import { toggleMainHeaderBackButtonComponentMobile } from "./headerLogic"
-import { toggleSideBarComponentMobile } from "./sideBarLogic"
+import { toggleChatsComponentMobile, hideChatsComponentMobile } from "./chatLogic";
+import { toggleMainHeaderBackButtonComponentMobile } from "./headerLogic";
+import { hideSideBarComponentMobile } from "./sideBarLogic";
 
 export function toggleMainComponentMobile() {
 	const divMain = document.getElementById("main");
 	if (!divMain?.offsetParent || divMain?.classList.contains("forceFlex")) {
 		toggleChatsComponentMobile();
-        toggleMainHeaderBackButtonComponentMobile();
-		toggleSideBarComponentMobile();
+		toggleMainHeaderBackButtonComponentMobile();
+		hideSideBarComponentMobile();
 		divMain?.classList.toggle("forceFlex");
 	}
 }
+
+export function showMainComponentMobile() {
+	const divMain = document.getElementById("main");
+	if (!divMain?.offsetParent && !divMain?.classList.contains("forceFlex")) {
+		hideChatsComponentMobile();
+		toggleMainHeaderBackButtonComponentMobile();
+		hideSideBarComponentMobile();
+	}
+	divMain?.classList.add("forceFlex");
+}
+
+export function hideMainComponentMobile() {
+	const divMain = document.getElementById("main");
+	if (!divMain?.offsetParent && divMain?.classList.contains("forceFlex")) {
+		toggleChatsComponentMobile();
+		toggleMainHeaderBackButtonComponentMobile();
+		hideSideBarComponentMobile();
+	}
+	divMain?.classList.remove("forceFlex");
+}

11 WA-GawrBot-UI/src/assets/ts/logic/messageLogic.ts

@@ -0,0 +1,87 @@
+import { useSocketio } from "../shared-clients";
+
+const socket = useSocketio();
+
+export function attachMessageLogic() {
+	const messagesComponent = document.getElementById("messages");
+	const messagesChildren = messagesComponent?.children;
+	scrollToBottom();
+
+	let promises: Promise<void>[] = [];
+	Array.from(messagesChildren || []).forEach(async (messageElement) => {
+		promises.push(fetchMedia(messageElement, true));
+		// TODO: Would be nice to make this configurable, especially for lower hardware.
+		promises.push(new Promise(r => setTimeout(r, 100)))
+		messageElement.addEventListener("click", async () => {
+			await fetchMedia(messageElement);
+		});
+	});
+	Promise.all(promises).then(scrollToBottom);
+}
+attachMessageLogic();
+
+export function scrollToBottom() {
+	const messagesComponent = document.getElementById("messages");
+	if (messagesComponent) {
+		messagesComponent.scrollTop = messagesComponent.scrollHeight;
+	}
+}
+
+async function fetchMedia(messageElement: Element, firstLoad: boolean = false) {
+	if (messageElement.getAttribute("has-media") === "true" && messageElement.getAttribute("resolved") !== "true") {
+		const response = await socket.emitWithAck("fetchMedia", messageElement.id.substring(16));
+
+		const jsonData = JSON.parse(response);
+		const media: string | undefined = decodeURIComponent(jsonData.messageBody);
+		const mediaType: string | undefined = jsonData.messageType;
+		const mediaElement = messageElement.querySelector("#media");
+		if (!mediaElement) return console.error(`${mediaElement} is undefined.`);
+		if (!media) {
+			const errorElement = document.createElement("p");
+			errorElement.innerText = "[Failed to fetch: media is undefined]";
+			mediaElement.replaceChildren(errorElement);
+			return;
+		}
+
+		switch (mediaType) {
+			case "sticker":
+				const stickerElement = document.createElement("img");
+				stickerElement.src = media;
+				stickerElement.classList.add("max-h-[10rem]");
+				stickerElement.classList.add("py-2");
+				mediaElement.replaceChildren(stickerElement);
+				messageElement.setAttribute("resolved", "true");
+				break;
+			case "image":
+				const imageElement = document.createElement("img");
+				imageElement.src = media;
+				imageElement.classList.add("max-h-[20rem]");
+				imageElement.classList.add("py-2");
+				mediaElement.replaceChildren(imageElement);
+				messageElement.setAttribute("resolved", "true");
+				break;
+			case "ptt":
+				const audioElement = document.createElement("audio");
+				audioElement.src = media;
+				audioElement.classList.add("max-h-[20rem]");
+				audioElement.classList.add("py-2");
+				audioElement.setAttribute("controls", "");
+				mediaElement.replaceChildren(audioElement);
+				messageElement.setAttribute("resolved", "true");
+				break;
+			case "video":
+				if (firstLoad) break;
+				const videoElement = document.createElement("video");
+				videoElement.src = media;
+				videoElement.classList.add("max-h-[20rem]");
+				videoElement.classList.add("py-2");
+				videoElement.setAttribute("controls", "");
+				mediaElement.replaceChildren(videoElement);
+				messageElement.setAttribute("resolved", "true");
+				break;
+			default:
+				if (firstLoad) return;
+				mediaElement.innerHTML = media;
+		}
+	}
+}

11 WA-GawrBot-UI/src/assets/ts/logic/sideBarLogic.ts

@@ -1,8 +1,19 @@
+import { useSocketio } from "../shared-clients";
+
+const socket = useSocketio();
+
 function attachSideBarLogic() {
+	const sideBarComponentMobile = document.getElementById("sideBar");
+	if (sideBarComponentMobile?.offsetParent === null) {
+		sideBarComponentMobile?.classList.remove("max-sm:hidden");
+		sideBarComponentMobile?.classList.add("hidden");
+	}
 	const buttonFullscreen = document.querySelectorAll<HTMLButtonElement>("#buttonFullscreen");
 	for (let i = 0; i < buttonFullscreen.length; i++) {
 		buttonFullscreen[i].addEventListener("click", toggleFullscreen);
 	}
+	const buttonReload = document.getElementById("buttonReload");
+	buttonReload?.addEventListener("click", toggleReload);
 }
 attachSideBarLogic();
 
@@ -11,10 +22,19 @@ export function toggleSideBarComponentMobile() {
 	sideBarComponentMobile?.classList.toggle("hidden");
 }
 
+export function hideSideBarComponentMobile() {
+	const sideBarComponentMobile = document.getElementById("sideBar");
+	sideBarComponentMobile?.classList.add("hidden");
+}
+
 function toggleFullscreen() {
 	if (!document.fullscreenElement) {
 		document.body.requestFullscreen();
 	} else {
 		document.exitFullscreen();
 	}
 }
+
+function toggleReload() {
+	socket.emit("fetchInit")
+}

11 WA-GawrBot-UI/src/assets/ts/socket-handler.ts

@@ -0,0 +1,34 @@
+import { useSocketio } from "./shared-clients";
+import { attachChatLogic } from "./logic/chatLogic";
+import { attachChatsLogic } from "./logic/chatsLogic";
+import { attachHeaderLogic } from "./logic/headerLogic";
+import { attachMessageLogic } from "./logic/messageLogic";
+import { showMainComponentMobile, hideMainComponentMobile } from "./logic/mainLogic";
+import { attachInputBarLogic } from "./logic/inputBarLogic";
+
+function socketHandler() {
+	const socket = useSocketio();
+
+	socket.on("connect", () => {
+		console.log(socket.id);
+		socket.emit("fetchInit");
+	});
+
+	socket.on("reloadChat", (prerender) => {
+		let chatsComponent = document.getElementById("chats");
+		chatsComponent ? (chatsComponent.outerHTML = prerender) : void 0;
+		hideMainComponentMobile();
+		attachChatLogic();
+		attachChatsLogic();
+	});
+
+	socket.on("reloadMain", (prerender) => {
+		let mainComponent = document.getElementById("main");
+		mainComponent ? (mainComponent.outerHTML = prerender) : void 0;
+		showMainComponentMobile();
+		attachHeaderLogic();
+		attachMessageLogic();
+		attachInputBarLogic();
+	});
+}
+socketHandler();

11 WA-GawrBot-UI/src/assets/ts/type/chats.ts

@@ -0,0 +1,19 @@
+export type chatsData = chatData[]
+
+export type chatData = {
+    chatName: string
+    chatProfile: string | undefined | null
+    chatPhone: string
+    chatIsPinned: boolean
+    chatIsArchived: boolean
+    chatMessageLatest: messageLatest | undefined | null
+}
+
+export type messageLatest = {
+    messageTimestamp: 1683537000,
+    messageBody: string
+    messageName: string
+    messageAuthor: string
+    messageFromMe: boolean
+    messageHasMedia: boolean
+}

11 WA-GawrBot-UI/src/assets/ts/util/image.ts

@@ -13,7 +13,7 @@ export async function optimizeImage(src: string, format: keyof sharp.FormatEnum,
 	}
 
 	// Generate the Base64 image using sharp and store it in the cache
-	const buffer = await sharp(await (await fetch(src)).arrayBuffer())
+	const buffer = await sharp(await (await fetch(decodeURIComponent(src))).arrayBuffer())
 		.resize({
 			width,
 			height,