diff --git a/.gitignore b/.gitignore index 2d8cfee2..d576af4e 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,6 @@ pnpm-debug.log* # macOS-specific files .DS_Store + +# tmp files +tmp/ \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..fff3a150 --- /dev/null +++ b/.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" + } + ] +} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/astro.config.mjs b/11 WA-GawrBot-UI/astro.config.mjs index 52aaa261..efc30268 100644 --- a/11 WA-GawrBot-UI/astro.config.mjs +++ b/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(), diff --git a/11 WA-GawrBot-UI/package.json b/11 WA-GawrBot-UI/package.json index e15c84f5..7f718b50 100644 --- a/11 WA-GawrBot-UI/package.json +++ b/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", diff --git a/11 WA-GawrBot-UI/src/assets/ts/chat-handler.ts b/11 WA-GawrBot-UI/src/assets/ts/chat-handler.ts deleted file mode 100644 index e6c1b623..00000000 --- a/11 WA-GawrBot-UI/src/assets/ts/chat-handler.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { useSocketio } from "./shared-clients"; - -export function ChatHandler() { - const socket = useSocketio(); - socket.on("connect", () => { - console.log(socket.id); - }); - console.log("In chat!"); - return "In chat client!"; -} diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/chatLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/chatLogic.ts index f2928c1f..2d4cc3a2 100644 --- a/11 WA-GawrBot-UI/src/assets/ts/logic/chatLogic.ts +++ b/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("#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"); +} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/chatsLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/chatsLogic.ts new file mode 100644 index 00000000..91454d3b --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/headerLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/headerLogic.ts index 4c480dda..c3088a85 100644 --- a/11 WA-GawrBot-UI/src/assets/ts/logic/headerLogic.ts +++ b/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); } diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/inputBarLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/inputBarLogic.ts new file mode 100644 index 00000000..dde35235 --- /dev/null +++ b/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); + } + } +} diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/mainLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/mainLogic.ts index e3912197..7ff1d29a 100644 --- a/11 WA-GawrBot-UI/src/assets/ts/logic/mainLogic.ts +++ b/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"); +} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/messageLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/messageLogic.ts new file mode 100644 index 00000000..e0ec8480 --- /dev/null +++ b/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[] = []; + 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; + } + } +} diff --git a/11 WA-GawrBot-UI/src/assets/ts/logic/sideBarLogic.ts b/11 WA-GawrBot-UI/src/assets/ts/logic/sideBarLogic.ts index 5009d454..9d024458 100644 --- a/11 WA-GawrBot-UI/src/assets/ts/logic/sideBarLogic.ts +++ b/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("#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,6 +22,11 @@ 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(); @@ -18,3 +34,7 @@ function toggleFullscreen() { document.exitFullscreen(); } } + +function toggleReload() { + socket.emit("fetchInit") +} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/misc-handler.ts b/11 WA-GawrBot-UI/src/assets/ts/misc-handler.ts deleted file mode 100644 index c7ee2a26..00000000 --- a/11 WA-GawrBot-UI/src/assets/ts/misc-handler.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useSocketio } from "./shared-clients"; - -export function MiscHandler() { - const socket = useSocketio(); - socket.on("pong", () => { - console.log("Pong received!"); - }); -} diff --git a/11 WA-GawrBot-UI/src/assets/ts/socket-emit.ts b/11 WA-GawrBot-UI/src/assets/ts/socket-emit.ts deleted file mode 100644 index e6b97c84..00000000 --- a/11 WA-GawrBot-UI/src/assets/ts/socket-emit.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { useSocketio } from "./shared-clients"; - -export function emitEvent(name: string, args?: any): void { - const socket = useSocketio(); - - switch(name) { - case "ping": - socket.emit(name); - console.log("Ping emitted!"); - break; - default: - break; - } -} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/socket-handler.ts b/11 WA-GawrBot-UI/src/assets/ts/socket-handler.ts new file mode 100644 index 00000000..d6ac28b3 --- /dev/null +++ b/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(); diff --git a/11 WA-GawrBot-UI/src/assets/ts/type/chats.ts b/11 WA-GawrBot-UI/src/assets/ts/type/chats.ts new file mode 100644 index 00000000..ad726ab6 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/11 WA-GawrBot-UI/src/assets/ts/util/image.ts b/11 WA-GawrBot-UI/src/assets/ts/util/image.ts index 21d9f737..925a8f29 100644 --- a/11 WA-GawrBot-UI/src/assets/ts/util/image.ts +++ b/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, diff --git a/11 WA-GawrBot-UI/src/components/Chat.astro b/11 WA-GawrBot-UI/src/components/Chat.astro index 1cde91d4..96dafad6 100644 --- a/11 WA-GawrBot-UI/src/components/Chat.astro +++ b/11 WA-GawrBot-UI/src/components/Chat.astro @@ -5,49 +5,129 @@ import { getImage } from "astro:assets"; import profilePictureDefault from "../assets/.original/export.png"; // Edge browsers doesn't support avif format yet. -const imageFormat = Astro.request.headers.get("user-agent")?.includes("Edg") ? "webp" : "avif"; +const imageFormat = Astro.request.headers.get("user-agent")?.includes("Edg") + ? "webp" + : "avif"; export interface Props { - latestMessageTimestamp: number; - latestMessage: string; - username: string; - profilePicture?: string; - isPinned: boolean; - isArchived: boolean; + latestMessageTimestamp?: number; + latestMessageBody?: string; + latestMessageHasmedia?: boolean; + latestMessageAuthor?: string; + chatName: string; + chatPhone: string; + chatProfile?: string | null; + chatIsPinned: boolean; + chatIsArchived: boolean; } -const { latestMessageTimestamp, latestMessage, profilePicture, username, isPinned, isArchived } = Astro.props; +const { + latestMessageTimestamp = 0, + latestMessageBody, + latestMessageHasmedia, + latestMessageAuthor = "", + chatProfile, + chatName, + chatPhone, + chatIsPinned, + chatIsArchived, +} = Astro.props; -const profilePictureOptimized = profilePicture - ? await optimizeImage(profilePicture, imageFormat, 80, 80) - : (await getImage({ src: profilePictureDefault, format: imageFormat, width: 80, height: 80 })).src; +const profilePictureOptimized = chatProfile + ? await optimizeImage(chatProfile, imageFormat, 80, 80).catch( + async (_) => + ( + await getImage({ + src: profilePictureDefault, + format: imageFormat, + width: 80, + height: 80, + }) + ).src + ) + : ( + await getImage({ + src: profilePictureDefault, + format: imageFormat, + width: 80, + height: 80, + }) + ).src; --- -
+
- {username} + {chatName}
- {username} + {chatName} { - new Date(latestMessageTimestamp * 1000).toLocaleDateString("en-US", { - day: "2-digit", - month: "2-digit", - year: "numeric", - }) + new Date().setHours(0, 0, 0, 0) == new Date(latestMessageTimestamp * 1000).setHours(0, 0, 0, 0) ? + new Date(latestMessageTimestamp * 1000).toLocaleTimeString("id-ID", { hour12: false, hour: "2-digit", minute: "2-digit" }) : + new Date(latestMessageTimestamp * 1000).toLocaleDateString("id-ID", { day: "2-digit", month: "2-digit", year: "numeric" }) }
- {latestMessage} + + {latestMessageBody ? `${latestMessageAuthor.length > 10 ? latestMessageAuthor.substring(0, latestMessageAuthor.indexOf(' ')) : latestMessageAuthor}: ` : ""} + { + latestMessageHasmedia ? ( + + ) : ( + "" + ) + } + { + latestMessageBody ? ( + `${ + latestMessageBody.length > 24 + ? `${latestMessageBody + .trim() + .substring(0, 24)}...` + : latestMessageBody + }` + ) : ( +   + ) + }
- {isPinned ? : ""} - {isArchived ? : ""} + { + chatIsPinned ? ( + + ) : ( + "" + ) + } + { + chatIsArchived ? ( + + ) : ( + "" + ) + }
diff --git a/11 WA-GawrBot-UI/src/components/Header.astro b/11 WA-GawrBot-UI/src/components/Header.astro index fcbe7eeb..95a635a1 100644 --- a/11 WA-GawrBot-UI/src/components/Header.astro +++ b/11 WA-GawrBot-UI/src/components/Header.astro @@ -8,14 +8,14 @@ import profilePictureDefault from "../assets/.original/export.png"; const imageFormat = Astro.request.headers.get("user-agent")?.includes("Edg") ? "webp" : "avif"; export interface Props { - username: string; - profilePicture?: string; + chatName: string; + chatProfile?: string; participants?: string; } -const { profilePicture, username, participants } = Astro.props; +const { chatProfile, chatName, participants } = Astro.props; -const profilePictureOptimized = profilePicture - ? await optimizeImage(profilePicture, imageFormat, 80, 80) +const profilePictureOptimized = chatProfile + ? await optimizeImage(chatProfile, imageFormat, 80, 80).catch(async (_) => (await getImage({ src: profilePictureDefault, format: imageFormat, width: 80, height: 80 })).src) : (await getImage({ src: profilePictureDefault, format: imageFormat, width: 80, height: 80 })).src; --- @@ -26,16 +26,16 @@ const profilePictureOptimized = profilePicture
{ - profilePicture ? ( - {username} + chatProfile ? ( + {chatName} ) : ( - {username} + {chatName} ) }
-
{username}
+
{chatName}
{participants ? participants : "Click to view more info."}
diff --git a/11 WA-GawrBot-UI/src/components/InputBar.astro b/11 WA-GawrBot-UI/src/components/InputBar.astro index 77d6e0b6..33796091 100644 --- a/11 WA-GawrBot-UI/src/components/InputBar.astro +++ b/11 WA-GawrBot-UI/src/components/InputBar.astro @@ -2,7 +2,7 @@ import { Icon } from "astro-icon"; --- -
+
@@ -12,9 +12,10 @@ import { Icon } from "astro-icon"; type="text" placeholder="Type here..." class="input input-bordered flex flex-1 self-center text-xs max-h-9 transition-colors border hover:border-primary-focus focus:border-secondary-focus hover:bg-base-300 focus:bg-base-300 focus:outline-none" + id="input-text" />
- +
diff --git a/11 WA-GawrBot-UI/src/components/Message.astro b/11 WA-GawrBot-UI/src/components/Message.astro index 96e9ddc0..f3499f6e 100644 --- a/11 WA-GawrBot-UI/src/components/Message.astro +++ b/11 WA-GawrBot-UI/src/components/Message.astro @@ -7,25 +7,19 @@ import profilePictureDefault from "../assets/.original/export.png"; const imageFormat = Astro.request.headers.get("user-agent")?.includes("Edg") ? "webp" : "avif"; export interface Props { - fromMe: boolean; - remoteJid: string; id: string; - message: { - conversation?: string; - extendedTextMessage?: { - text?: string; - }; - }; - timestamp: number; - pushName: string | null; - profilePicture: string | null; - userReceipt: string | null; + messageCaption: string; + messageFromMe: boolean; + messageHasMedia: boolean; + messageName: string; + messageTimestamp: number; + profilePicture?: string | null; ack?: number | null; } -const { fromMe, remoteJid, id, message, timestamp, pushName, profilePicture, userReceipt, ack } = Astro.props; +const { id, messageCaption, messageFromMe, messageHasMedia, messageName, messageTimestamp, profilePicture, ack } = Astro.props; const profilePictureOptimized = profilePicture - ? await optimizeImage(profilePicture, imageFormat, 80, 80) + ? await optimizeImage(profilePicture, imageFormat, 80, 80).catch(async (_) => (await getImage({ src: profilePictureDefault, format: imageFormat, width: 80, height: 80 })).src) : (await getImage({ src: profilePictureDefault, format: imageFormat, width: 80, height: 80 })).src; let bubbleColor = "chat-bubble-secondary"; @@ -47,18 +41,18 @@ switch (ack) { } --- -
-
+
+
-
- {pushName || remoteJid.match(/^[0-9]*/)} +
+ {messageName}
- {message.conversation || message.extendedTextMessage?.text} - {fromMe ?
{messageAck}
: ""} +
{messageHasMedia ? "[MEDIA]" : ""}
+ {messageCaption} + {messageFromMe ?
{messageAck}
: ""}
diff --git a/11 WA-GawrBot-UI/src/components/SideBar.astro b/11 WA-GawrBot-UI/src/components/SideBar.astro index 33224e72..680d07a5 100644 --- a/11 WA-GawrBot-UI/src/components/SideBar.astro +++ b/11 WA-GawrBot-UI/src/components/SideBar.astro @@ -2,7 +2,7 @@ import Button from "./utils/Button.astro"; --- -