From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <kiizuha@gnuweeb.org>
X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on gnuweeb.org
X-Spam-Level: 
X-Spam-Status: No, score=-1.2 required=5.0 tests=ALL_TRUSTED,DKIM_SIGNED,
	DKIM_VALID,DKIM_VALID_AU,DKIM_VALID_EF,URIBL_DBL_BLOCKED_OPENDNS
	autolearn=ham autolearn_force=no version=3.4.6
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/simple; d=gnuweeb.org;
	s=default; t=1695460561;
	bh=4GN/WkUzvNwC5Y6TlIVhe23qXMMQL1DAMUzzrhcL6Sw=;
	h=From:To:Cc:Subject:Date:In-Reply-To:References;
	b=Sf00JHBSmXQKuStFhDzi7Ohoeq72C8TMIFpFLaQ9NeJP8Pw5wRc/fWr3+usS/Mss7
	 JFg3FEsgLLI3B62d/MjNbV+LlUDVHy/irarCqf0Iv8+2aD9ssLIr0ANpj0+ZugBWG0
	 CzPyHm9+S8mBINd1ioP8ljPldF0kM4fRG/AlHY9fZ0Bx/0v8Hq2EOqppnA4OCr9GOC
	 7T3ppLL82aZHBk7UzCAc0G8yKK+Ck5ZdzPALQrAtOzBI7uefHFmuouz/b062R2kLzX
	 m4tU281aDxspL+X8myW16Wqwxv5+7A4SFItnRa27m2msPZArtSvmZ/TmkoIU93FWe+
	 mLJTVdikg8FoQ==
Received: from localhost.localdomain (unknown [175.158.50.129])
	by gnuweeb.org (Postfix) with ESMTPSA id C80AD24B6E2;
	Sat, 23 Sep 2023 16:15:59 +0700 (WIB)
From: Muhammad Rizki <kiizuha@gnuweeb.org>
To: Ammar Faizi <ammarfaizi2@gnuweeb.org>
Cc: Muhammad Rizki <kiizuha@gnuweeb.org>,
	Alviro Iskandar Setiawan <alviro.iskandar@gnuweeb.org>,
	Arthur Lapz <rlapz@gnuweeb.org>,
	Memet Zx <zxce3@gnuweeb.org>,
	GNU/Weeb Mailing List <gwml@vger.gnuweeb.org>
Subject: [PATCH v2 11/11] feat(page): implement chat bubble message rendering
Date: Sat, 23 Sep 2023 16:15:14 +0700
Message-Id: <20230923091514.1835-12-kiizuha@gnuweeb.org>
X-Mailer: git-send-email 2.34.1.windows.1
In-Reply-To: <20230923091514.1835-1-kiizuha@gnuweeb.org>
References: <20230923091514.1835-1-kiizuha@gnuweeb.org>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
List-Id: <gwml.vger.gnuweeb.org>

This commit introduces several key functions for rendering chat
bubble messages:

- `hashCode()`:
  Code reference: https://github.com/boringdesigners/boring-avatars/blob/40a8be0d08f1a0d3aa318ef981fedbb2262d91fb/src/lib/utilities.js#L1
  Generates fixed numerical values based on alphabet characters

- `getFixedRandomColor()`
  Code reference: https://github.com/boringdesigners/boring-avatars/blob/40a8be0d08f1a0d3aa318ef981fedbb2262d91fb/src/lib/utilities.js#L35-L37
  this function is responsible for determining both the text color and
  border color. Unfortunately, Tailwind CSS requires class names to be
  static, which is why we can't use dynamic class names like
  `text-${color}-${level}`.
  Refer: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

- `cleanMessageText()`
  A simple utility function that removes newline characters ('\n') from
  a given string. This function is used to prepare message text for
  rendering.

- `setupUserName()`
  This function handles for trimming user `first_name` and `last_name`.

- `getRecentMessages()`
  This function handles the retrieval of recent Telegram group messages
  through an API. It also restructures the data to make it more
  accessible and readable for rendering.

- `renderRecentMessages()`
  The primary function responsible for rendering the chat bubble
  messages on the page.

Please note that the code may appear somewhat repetitive due to
constraints related to Tailwind CSS. Despite my limited experience with
vanilla JS for web development, I've made the best effort to maintain
clarity. Any suggestions or feedback for improving code organization or
readability are greatly appreciated. Your expertise in this area is
invaluable!

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 index.html | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)

diff --git a/index.html b/index.html
index e47a36f..369b9fe 100644
--- a/index.html
+++ b/index.html
@@ -305,6 +305,8 @@
     </footer>
 
     <script lang="text/javascript">
+      const API_URL = "https://telegram-bot.teainside.org";
+
       function copyText() {
         var copyText = document.getElementById("copy-button");
         var text = document.getElementById("copy-text").innerText;
@@ -358,8 +360,275 @@
         });
       }
 
+      async function getRecentMessages() {
+        const response = await fetch(API_URL + "/zxc.php?action=get_messages&chat_id=-1001483770714&limit=50");
+        const { data } = (await response.json()).result;
+
+        const transformedData = data.map(item => {
+          return {
+            user_id: item[0],
+            username: item[1],
+            first_name: item[2],
+            last_name: item[3],
+            user_photo: item[4],
+            message_id: item[5],
+            reply_to_message_id: item[6],
+            message_type: item[7],
+            text: item[8],
+            text_entities: item[9] ? JSON.parse(item[9]) : null,
+            file: item[10],
+            date: item[11]
+          };
+        });
+
+        return transformedData.reverse();
+      }
+
+      function hashCode(name) {
+        var hash = 0;
+        for (var i = 0; i < name.length; i++) {
+            var character = name.charCodeAt(i);
+            hash = ((hash<<5)-hash)+character;
+            hash = hash & hash;
+        }
+        return Math.abs(hash);
+      }
+
+      function getFixedRandomColor(name) {
+        const textColors = [
+          "text-red-400",      "text-yellow-400",
+          "text-blue-400",     "text-sky-400",
+          "text-purple-400",   "text-orange-400",
+          "text-amber-400",    "text-lime-400",
+          "text-green-400",    "text-emerald-400",
+          "text-teal-400",     "text-cyan-400",
+          "text-indigo-400",   "text-violet-400",
+          "text-fuchsia-400",  "text-pink-400",
+          "text-rose-400"
+        ];
+        const borderColors = [
+          "border-red-400",      "border-yellow-400",
+          "border-blue-400",     "border-sky-400",
+          "border-purple-400",   "border-orange-400",
+          "border-amber-400",    "border-lime-400",
+          "border-green-400",    "border-emerald-400",
+          "border-teal-400",     "border-cyan-400",
+          "border-indigo-400",   "border-violet-400",
+          "border-fuchsia-400",  "border-pink-400",
+          "border-rose-400"
+        ];
+
+        const indexColor = hashCode(name) % textColors.length;
+        return [ textColors[indexColor], borderColors[indexColor] ];
+      }
+
+      function cleanMessageText(text) {
+        return text.replaceAll(/\n/g, " ");
+      }
+
+      function setupUserName(first, last) {
+        const firstName = first.trimEnd();
+          let lastName = "";
+          if(last !== null) {
+            lastName = " " + last.trimEnd();
+          };
+        return [ firstName, lastName ]
+      }
+
+      async function renderRecentMessages() {
+        const messageData = await getRecentMessages();
+        const recentMessages = document.getElementById("recent-messages");
+
+        messageData.forEach(message => {
+          const getColor = m => getFixedRandomColor(`${m.first_name}`);
+
+          const chatContainer = document.createElement("div");
+          chatContainer.id = message.message_id;
+          chatContainer.classList.add("chat", "chat-start", "max-w-[300px]");
+
+          const chatAvatar = document.createElement("div");
+          chatAvatar.classList.add("chat-image", "avatar");
+
+          const avatarRounded = document.createElement("div");
+          avatarRounded.classList.add("w-10", "rounded-full");
+
+          const avatarImg = document.createElement("img");
+          avatarImg.setAttribute("draggable", "false");
+          avatarImg.setAttribute("src", API_URL + "/storage/files/" + message.user_photo)
+
+          avatarRounded.appendChild(avatarImg);
+          chatAvatar.appendChild(avatarRounded);
+
+          const chatBubble = document.createElement("div");
+          chatBubble.id = `${message.message_id}-highlight`;
+          chatBubble.classList.add(
+            "chat-bubble", "transition", "before:transition",
+            "duration-700", "before:duration-700", "ease-in-out",
+            "before:ease-in-out", "delay-200", "before:delay-200"
+          );
+
+          const chatHeader = document.createElement("div");
+          chatHeader.classList.add(
+            "chat-header", "font-semibold", "pb-1",
+            "line-clamp-1", getColor(message)[0],
+          );
+          const [ firstName, lastName ] = setupUserName(
+            message.first_name,
+            message.last_name
+          );
+          chatHeader.innerText = firstName + lastName;
+
+          const chatMsgContent = document.createElement("div");
+          if(message.message_type === "text") {
+            chatMsgContent.classList.add(
+              "text-neutral-300", "max-w-[150px]",
+              "max-h-min", "line-clamp-2"
+            );
+            chatMsgContent.innerText = cleanMessageText(message.text);
+          } else if(message.message_type === "photo") {
+            const imageFile = API_URL + "/storage/files/" + message.file;
+
+            const msgPhotoContainer = document.createElement("div");
+            msgPhotoContainer.classList.add("relative");
+
+            const messagePhoto = document.createElement("img");
+            messagePhoto.src = imageFile;
+            messagePhoto.classList.add("rounded-md", "mt-1", "relative");
+
+            const hoverSeeImg = document.createElement("a");
+            hoverSeeImg.href = imageFile;
+            hoverSeeImg.setAttribute("target", "_blank");
+            hoverSeeImg.setAttribute("draggable", "false");
+            hoverSeeImg.classList.add(
+              "absolute", "top-0", "w-full", "h-full", "flex", "rounded-md",
+              "items-center", "justify-center", "hover:bg-neutral-900", "uppercase",
+              "hover:bg-opacity-60", "transition", "duration-200", "ease-in-out",
+              "font-bold", "text-xl", "text-white", "opacity-0", "hover:opacity-100",
+              "select-none"
+            );
+            hoverSeeImg.innerText = "See";
+
+            msgPhotoContainer.appendChild(messagePhoto);
+            msgPhotoContainer.appendChild(hoverSeeImg);
+            chatMsgContent.appendChild(msgPhotoContainer);
+
+            if(message.text !== null) {
+              const photoCaption = document.createElement("div");
+              photoCaption.classList.add(
+                "text-neutral-300", "line-clamp-2",
+                "max-w-[150px]", "mt-2"
+              );
+              photoCaption.innerText = cleanMessageText(message.text);
+              chatMsgContent.appendChild(photoCaption);
+            }
+          }
+
+          const chatFooter = document.createElement("div");
+          chatFooter.classList.add(
+            "flex", "items-center", "pt-2",
+            "justify-between", "space-x-3"
+          );
+
+          const readMore = document.createElement("a");
+          readMore.setAttribute("href", "https://t.me/gnuweeb/" + message.message_id);
+          readMore.setAttribute("draggable", "false");
+          readMore.setAttribute("target", "_blank");
+          readMore.classList.add(
+            "text-xs", "text-sky-400", "opacity-70",
+            "font-semibold", "select-none"
+          );
+          readMore.innerText = "Read more";
+          chatFooter.appendChild(readMore);
+
+          const chatDate = document.createElement("div");
+          chatDate.classList.add(
+            "flex", "justify-end", "space-x-1",
+            "text-xs", "opacity-70",
+          );
+
+          const msgTime = document.createElement("time");
+          msgTime.innerText = message.date;
+
+          chatDate.appendChild(msgTime);
+
+          chatFooter.appendChild(chatDate);
+
+          chatBubble.appendChild(chatHeader);
+
+          const replyMessages = messageData.filter(msg => {
+            return msg.message_id === message.reply_to_message_id
+          });
+          if(message.reply_to_message_id !== null && replyMessages.length > 0) {
+            const replyMessage = replyMessages[0];
+
+            const chatMsgReply = document.createElement("button");
+            chatMsgReply.onclick = () => {
+              const targetReply = document.getElementById(message.reply_to_message_id.toString());
+              const highlightReply = document.getElementById(`${message.reply_to_message_id}-highlight`)
+
+              targetReply.scrollIntoView({
+                behavior: "smooth", block: "end", inline: "nearest"
+              });
+
+              highlightReply.classList.add(
+                "!bg-neutral-700", "!scale-105"
+              );
+
+              setTimeout(() => {
+                highlightReply.classList.remove(
+                  "!bg-neutral-700", "!scale-105"
+                );
+              }, 2000);
+            }
+            chatMsgReply.classList.add(
+              "w-full", "border-l-2", "!my-2", "text-sm", "text-start",
+              "pl-2", "py-1", getColor(replyMessage)[1], "flex", "flex-col",
+              "text-neutral-300", "text-opacity-80", "hover:bg-neutral-800",
+              "rounded-r-md", "rounded-l-sm"
+            );
+
+            const usernameMsgReply = document.createElement("span");
+            usernameMsgReply.classList.add(
+              "not-italic", "font-bold", "line-clamp-1",
+              "select-none", getColor(replyMessage)[0]
+            );
+            const [ firstName, lastName ] = setupUserName(
+              replyMessage.first_name,
+              replyMessage.last_name
+            );
+            usernameMsgReply.innerText = firstName + lastName;
+
+            const textMsgReply = document.createElement("span");
+            textMsgReply.classList.add(
+              "line-clamp-1", "max-w-[150px]",
+              "max-h-min", "text-start"
+            );
+            textMsgReply.innerText = cleanMessageText(
+              replyMessage.text !== null ? replyMessage.text : "Photo"
+            );
+
+            chatMsgReply.appendChild(usernameMsgReply);
+            chatMsgReply.appendChild(textMsgReply);
+            chatBubble.appendChild(chatMsgReply);
+          };
+
+          chatBubble.appendChild(chatMsgContent);
+          chatBubble.appendChild(chatFooter);
+
+          chatContainer.appendChild(chatAvatar);
+          chatContainer.appendChild(chatBubble);
+
+          recentMessages.appendChild(chatContainer);
+        });
+
+        recentMessages.lastChild.scrollIntoView({
+          behavior: "instant", block: "end", inline: "nearest"
+        });
+      };
+
       document.addEventListener("DOMContentLoaded", function() {
         renderMemberList();
+        renderRecentMessages();
       });
     </script>
 
-- 
Muhammad Rizki