tenkuma/pandora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change layout to look more like WhatsApp for Windows Phone and less like AI slop.

Browse source
This commit is contained in:
天クマ 2026-07-13 11:24:19 -03:00
commit 9d77ea5a97
9 changed files with 132 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/app.js → docs/app.js
View file

@ -115,7 +115,7 @@ function handleIncomingMessage(msg) {
async function fetchChats() { async function fetchChats() {
const userInfo = await waha.getMyInfo(); const userInfo = await waha.getMyInfo();
elements.loggedUserName.textContent = userInfo.pushName; elements.loggedUserName.textContent = userInfo.pushName;
elements.userIcon.innerText = userInfo.pushName[0]; // elements.userIcon.innerText = userInfo.pushName[0];
elements.chatsLoader.classList.remove('hidden'); elements.chatsLoader.classList.remove('hidden');
try { try {
chatsState = await waha.getChats(); chatsState = await waha.getChats();
@ -143,7 +143,7 @@ async function selectChat(chat) {
ui.renderChatList(chatsState, activeChatState, selectChat); ui.renderChatList(chatsState, activeChatState, selectChat);
ui.toggleChatState(true); ui.toggleChatState(true);
elements.activeChatName.textContent = chat.name; elements.activeChatName.textContent = chat.name.toUpperCase();
elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?'; elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
elements.messagesContainer.innerHTML = '<div class="loading-chats"><div class="spinner"></div><span>Loading messages...</span></div>'; elements.messagesContainer.innerHTML = '<div class="loading-chats"><div class="spinner"></div><span>Loading messages...</span></div>';

0
public/config.js → docs/config.js
View file

27
public/index.html → docs/index.html
View file

@ -8,39 +8,34 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/lucide@latest"></script> <script src="https://unpkg.com/lucide@latest" defer></script>
</head> </head>
<body> <body>
<div class="app-container"> <div class="app-container">
<!-- Sidebar --> <!-- Sidebar -->
<aside class="sidebar"> <aside class="sidebar">
<header class="sidebar-header"> <header class="sidebar-header">
<p class="app-name">PANDORA</p>
<div class="user-profile"> <div class="user-profile">
<div id="pandora-user-icon" class="avatar user-avatar">P</div> <!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
<div class="user-info"> <div class="user-info">
<h3 id="pandora-username">Pandora User</h3> <h3 id="pandora-username">Pandora User</h3>
<span class="status-indicator online">Online</span>
</div> </div>
</div> </div>
<div class="header-actions"> <div class="header-actions">
<button class="icon-btn" title="New Chat"><i data-lucide="message-square-plus"></i></button> <button class="text-btn" title="New Chat">new chat</button>
<button class="icon-btn" id="refresh-chats-btn" title="Refresh Chats"><i data-lucide="refresh-cw"></i></button> <button class="text-btn" id="refresh-chats-btn" title="Refresh Chats">refresh</button>
<button class="icon-btn" title="Settings"><i data-lucide="settings"></i></button> <button class="text-btn" title="Settings">settings</button>
</div> </div>
</header> </header>
<div class="search-container"> <div class="search-container">
<div class="search-wrapper"> <div class="search-wrapper">
<i data-lucide="search" class="search-icon"></i>
<input type="text" id="chat-search" placeholder="Search or start new chat..."> <input type="text" id="chat-search" placeholder="Search or start new chat...">
</div> </div>
</div> </div>
<div class="chat-list-container"> <div class="chat-list-container">
<div class="chat-list-header">
<span>Recent Chats</span>
<span class="badge" id="chat-count">0</span>
</div>
<div class="loading-chats" id="chats-loader"> <div class="loading-chats" id="chats-loader">
<div class="spinner"></div> <div class="spinner"></div>
<span>Loading chats...</span> <span>Loading chats...</span>
@ -75,7 +70,7 @@
<div class="active-chat-container hidden" id="active-chat-container"> <div class="active-chat-container hidden" id="active-chat-container">
<header class="chat-header"> <header class="chat-header">
<div class="active-contact-info"> <div class="active-contact-info">
<button class="icon-btn back-btn" id="back-to-sidebar"><i data-lucide="arrow-left"></i></button> <!-- <button class="icon-btn back-btn" id="back-to-sidebar"><i data-lucide="arrow-left"></i></button> -->
<div class="avatar active-avatar" id="active-chat-avatar">C</div> <div class="avatar active-avatar" id="active-chat-avatar">C</div>
<div> <div>
<h3 id="active-chat-name">Contact Name</h3> <h3 id="active-chat-name">Contact Name</h3>
@ -83,10 +78,10 @@
</div> </div>
</div> </div>
<div class="chat-actions"> <div class="chat-actions">
<button class="icon-btn" title="Search in conversation"><i data-lucide="search"></i></button> <!-- <button class="icon-btn" title="Search in conversation"><i data-lucide="search"></i></button>
<button class="icon-btn" title="Call"><i data-lucide="phone"></i></button> <button class="icon-btn" title="Call"><i data-lucide="phone"></i></button>
<button class="icon-btn" title="Video Call"><i data-lucide="video"></i></button> <button class="icon-btn" title="Video Call"><i data-lucide="video"></i></button>
<button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> <button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> -->
</div> </div>
</header> </header>
@ -99,7 +94,7 @@
<footer class="chat-input-panel"> <footer class="chat-input-panel">
<div class="input-actions-left"> <div class="input-actions-left">
<button class="icon-btn" title="Attach file"><i data-lucide="paperclip"></i></button> <button class="icon-btn" title="Attach file"><i data-lucide="paperclip"></i></button>
<button class="icon-btn" title="Add emoji"><i data-lucide="smile"></i></button> <!-- <button class="icon-btn" title="Add emoji"><i data-lucide="smile"></i></button> -->
</div> </div>
<form class="input-form" id="message-form"> <form class="input-form" id="message-form">
<input type="text" id="message-input" placeholder="Type a message..." autocomplete="off"> <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
@ -116,7 +111,7 @@
<div class="modal-overlay hidden" id="settings-modal"> <div class="modal-overlay hidden" id="settings-modal">
<div class="modal-content"> <div class="modal-content">
<header class="modal-header"> <header class="modal-header">
<h2>WAHA Connection Settings</h2> <h2>SETTINGS</h2>
<button class="icon-btn close-modal-btn" id="close-settings"><i data-lucide="x"></i></button> <button class="icon-btn close-modal-btn" id="close-settings"><i data-lucide="x"></i></button>
</header> </header>
<div class="modal-body"> <div class="modal-body">

184
public/style.css → docs/style.css
View file

@ -1,19 +1,20 @@
:root { :root {
--bg-main: #090d16; --bg-main: black;
--sidebar-bg: rgba(17, 24, 39, 0.75); --bg-secondary: #242424;
--chat-bg: rgba(15, 23, 42, 0.6); --sidebar-bg: black;
--chat-bg: black;
--border-color: rgba(255, 255, 255, 0.08); --border-color: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.15); --border-hover: rgba(255, 255, 255, 0.15);
--text-primary: #f8fafc; --text-primary: #f8fafc;
--text-secondary: #94a3b8; --text-secondary: #94a3b8;
--text-muted: #64748b; --text-muted: #64748b;
--accent: #6366f1; --accent: white;
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); --accent-gradient: black;
--accent-hover: #4f46e5; --accent-hover: #4f46e5;
--online-color: #10b981; --online-color: rgba(255, 255, 255, 0.6);
--bubble-incoming: rgba(30, 41, 59, 0.85); --bubble-incoming: #01abaa;
--bubble-outgoing: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --bubble-outgoing: #016f6e;
--input-bg: rgba(15, 23, 42, 0.8); --input-bg: black;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
@ -24,7 +25,7 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
} }
body { body {
@ -37,6 +38,31 @@ body {
radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%); radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
} }
button {
background-color: var(--bg-main);
border: none;
color: var(--text-primary);
transition: .4s;
}
button:hover {
color: var(--text-secondary);
}
input {
background: var(--bg-main);
color: var(--accent);
border: none;
padding: 1em;
transition: .2s;
}
input:focus {
background-color: var(--text-primary);
color: var(--bg-main);
outline: none;
}
.app-container { .app-container {
display: flex; display: flex;
width: 100vw; width: 100vw;
@ -45,6 +71,10 @@ body {
backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
} }
.app-name {
font-weight: bolder;
}
/* Sidebar Styling */ /* Sidebar Styling */
.sidebar { .sidebar {
width: 380px; width: 380px;
@ -57,11 +87,14 @@ body {
} }
.sidebar-header { .sidebar-header {
padding: 20px; padding: 20px 20px 0px 20px;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; align-items: self-start;
border-bottom: 1px solid var(--border-color); }
#pandora-username {
font-size: xx-large;
} }
.user-profile { .user-profile {
@ -73,7 +106,6 @@ body {
.avatar { .avatar {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -86,6 +118,10 @@ body {
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
} }
.avatar img {
max-width: 100%;
}
.user-avatar { .user-avatar {
background: linear-gradient(135deg, #10b981 0%, #059669 100%); background: linear-gradient(135deg, #10b981 0%, #059669 100%);
} }
@ -121,9 +157,8 @@ body {
.icon-btn { .icon-btn {
width: 38px; width: 38px;
height: 38px; height: 38px;
border-radius: 10px; border: none;
border: 1px solid var(--border-color); background: var(--bg-main);
background: rgba(255, 255, 255, 0.03);
color: var(--text-secondary); color: var(--text-secondary);
display: flex; display: flex;
align-items: center; align-items: center;
@ -143,6 +178,10 @@ body {
transform: translateY(0); transform: translateY(0);
} }
.text-btn {
font-size: larger;
}
/* Search Bar */ /* Search Bar */
.search-container { .search-container {
padding: 16px 20px; padding: 16px 20px;
@ -165,11 +204,8 @@ body {
#chat-search { #chat-search {
width: 100%; width: 100%;
padding: 12px 14px 12px 42px; padding: 12px;
border-radius: 10px; border: none;
border: 1px solid var(--border-color);
background: rgba(15, 23, 42, 0.6);
color: var(--text-primary);
font-size: 0.9rem; font-size: 0.9rem;
transition: all 0.25s ease; transition: all 0.25s ease;
} }
@ -177,7 +213,8 @@ body {
#chat-search:focus { #chat-search:focus {
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
background: rgba(15, 23, 42, 0.9); background: white;
color: var(--bg-main);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
} }
@ -223,7 +260,6 @@ body {
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
border: 1px solid transparent; border: 1px solid transparent;
@ -233,11 +269,6 @@ body {
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
} }
.chat-item.active {
background: rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.25);
}
.chat-item-info { .chat-item-info {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -274,7 +305,7 @@ body {
.chat-item-msg { .chat-item-msg {
font-size: 0.82rem; font-size: 0.82rem;
color: var(--text-secondary); color: var(--accent);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -283,7 +314,7 @@ body {
.chat-item .unread-badge { .chat-item .unread-badge {
background: var(--accent); background: var(--accent);
color: white; color: var(--bg-main);
font-size: 0.7rem; font-size: 0.7rem;
min-width: 18px; min-width: 18px;
height: 18px; height: 18px;
@ -322,8 +353,7 @@ body {
/* Sidebar Footer */ /* Sidebar Footer */
.sidebar-footer { .sidebar-footer {
padding: 14px 20px; padding: 14px 20px;
border-top: 1px solid var(--border-color); background: var(--bg-secondary);
background: rgba(10, 15, 26, 0.4);
} }
.api-status-badge { .api-status-badge {
@ -418,11 +448,10 @@ body {
.chat-header { .chat-header {
padding: 16px 24px; padding: 16px 24px;
border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: rgba(15, 23, 42, 0.3); background: var(--bg-main);
} }
.active-contact-info { .active-contact-info {
@ -435,12 +464,12 @@ body {
width: 42px; width: 42px;
height: 42px; height: 42px;
border-radius: 12px; border-radius: 12px;
display: none;
} }
.active-contact-info h3 { .active-contact-info h3 {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: bolder;
margin-bottom: 2px;
} }
.contact-status { .contact-status {
@ -474,7 +503,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 65%; max-width: 65%;
gap: 4px;
} }
.message-group.incoming { .message-group.incoming {
@ -488,14 +516,20 @@ body {
.message-sender { .message-sender {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: var(--text-muted); color: var(--text-primary);
margin-left: 12px;
margin-bottom: 2px; margin-bottom: 2px;
width: 100%;
display: flex;
}
.message-indicator {
width: 0;
height: 0;
margin: 0px 10px;
} }
.message-bubble { .message-bubble {
padding: 12px 16px; padding: 12px 16px;
border-radius: 18px;
font-size: 0.92rem; font-size: 0.92rem;
line-height: 1.5; line-height: 1.5;
position: relative; position: relative;
@ -506,14 +540,23 @@ body {
.message-group.incoming .message-bubble { .message-group.incoming .message-bubble {
background-color: var(--bubble-incoming); background-color: var(--bubble-incoming);
color: var(--text-primary); color: var(--text-primary);
border-top-left-radius: 4px;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
} }
.message-group.outgoing .message-bubble { .message-group.outgoing .message-bubble {
background: var(--bubble-outgoing); background: var(--bubble-outgoing);
color: white; color: white;
border-top-right-radius: 4px; }
.message-group.outgoing .message-indicator {
border-left: 10px solid transparent;
border-bottom: 10px solid var(--bubble-outgoing);
margin-left: auto;
}
.message-group.incoming .message-indicator {
border-right: 10px solid transparent;
border-bottom: 10px solid var(--bubble-incoming);
} }
.message-meta { .message-meta {
@ -522,24 +565,21 @@ body {
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
font-size: 0.7rem; font-size: 0.7rem;
color: rgba(255, 255, 255, 0.65);
margin-top: 4px; margin-top: 4px;
} }
.message-group.incoming .message-meta {
color: var(--text-muted);
}
/* Chat Input Panel */ /* Chat Input Panel */
.chat-input-panel { .chat-input-panel {
padding: 20px 24px; padding: 20px 24px;
background: var(--input-bg);
border-top: 1px solid var(--border-color);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
} }
.chat-input-panel button {
background-color: transparent;
}
.input-actions-left { .input-actions-left {
display: flex; display: flex;
gap: 8px; gap: 8px;
@ -555,15 +595,15 @@ body {
#message-input { #message-input {
flex: 1; flex: 1;
padding: 12px 18px; padding: 12px 18px;
background: rgba(255, 255, 255, 0.04); background-color: white;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
border-radius: 12px; color: var(--bg-main);
color: var(--text-primary);
font-size: 0.95rem; font-size: 0.95rem;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
#message-input:focus { #message-input:focus {
color: var(--text-primary);
outline: none; outline: none;
border-color: var(--accent); border-color: var(--accent);
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
@ -573,7 +613,6 @@ body {
.send-btn { .send-btn {
width: 44px; width: 44px;
height: 44px; height: 44px;
border-radius: 12px;
background: var(--accent-gradient); background: var(--accent-gradient);
border: none; border: none;
color: white; color: white;
@ -611,7 +650,7 @@ body {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border-radius: 10px; border-radius: 0px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@ -663,18 +702,12 @@ body {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
display: flex; display: flex;
align-items: center;
justify-content: center;
z-index: 100; z-index: 100;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.modal-content { .modal-content {
background: rgba(30, 41, 59, 0.85); background: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: 16px;
width: 90%;
max-width: 480px;
padding: 24px; padding: 24px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
@ -688,7 +721,7 @@ body {
} }
.modal-header h2 { .modal-header h2 {
font-size: 1.2rem; font-size: xx-large;
font-weight: 600; font-weight: 600;
} }
@ -710,20 +743,6 @@ body {
font-weight: 500; font-weight: 500;
} }
.form-group input {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
background: rgba(15, 23, 42, 0.5);
color: var(--text-primary);
font-size: 0.9rem;
}
.form-group input:focus {
outline: none;
border-color: var(--accent);
}
.settings-warning { .settings-warning {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--text-muted); color: var(--text-muted);
@ -734,12 +753,11 @@ body {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 12px; gap: 12px;
margin-top: 24px; margin-top: auto;
} }
.btn { .btn {
padding: 10px 18px; padding: 10px 18px;
border-radius: 8px;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
@ -758,12 +776,12 @@ body {
} }
.secondary-btn { .secondary-btn {
background: rgba(255, 255, 255, 0.05); background: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--border-color);
} }
.secondary-btn:hover { .secondary-btn:hover {
background: rgba(255, 255, 255, 0.1); background: var(--text-primary);
color: var(--bg-main);
} }

20
public/ui.js → docs/ui.js
View file

@ -1,10 +1,10 @@
import { formatTime } from "./utils.js"; import { formatTime } from "./utils.js";
import { waha } from "./waha.js";
// DOM Selector Cache // DOM Selector Cache
export const elements = { export const elements = {
chatList: document.getElementById('chat-list'), chatList: document.getElementById('chat-list'),
chatsLoader: document.getElementById('chats-loader'), chatsLoader: document.getElementById('chats-loader'),
chatCountBadge: document.getElementById('chat-count'),
chatSearch: document.getElementById('chat-search'), chatSearch: document.getElementById('chat-search'),
refreshChatsBtn: document.getElementById('refresh-chats-btn'), refreshChatsBtn: document.getElementById('refresh-chats-btn'),
backendStatusText: document.getElementById('backend-status-text'), backendStatusText: document.getElementById('backend-status-text'),
@ -16,7 +16,8 @@ export const elements = {
messagesContainer: document.getElementById('messages-container'), messagesContainer: document.getElementById('messages-container'),
messageForm: document.getElementById('message-form'), messageForm: document.getElementById('message-form'),
messageInput: document.getElementById('message-input'), messageInput: document.getElementById('message-input'),
backToSidebarBtn: document.getElementById('back-to-sidebar'), // backToSidebarBtn: document.getElementById('back-to-sidebar'),
backToSidebarBtn: document.getElementById('active-chat-container'),
sidebar: document.querySelector('.sidebar'), sidebar: document.querySelector('.sidebar'),
settingsModal: document.getElementById('settings-modal'), settingsModal: document.getElementById('settings-modal'),
settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'), settingsIconBtn: document.querySelector('.header-actions button[title="Settings"]'),
@ -27,7 +28,7 @@ export const elements = {
inputSession: document.getElementById('settings-session'), inputSession: document.getElementById('settings-session'),
inputApiKey: document.getElementById('settings-api-key'), inputApiKey: document.getElementById('settings-api-key'),
loggedUserName: document.getElementById('pandora-username'), loggedUserName: document.getElementById('pandora-username'),
userIcon: document.getElementById('pandora-user-icon') // userIcon: document.getElementById('pandora-user-icon')
}; };
export const ui = { export const ui = {
@ -81,24 +82,24 @@ export const ui = {
*/ */
renderChatList(chats, activeChat, onChatSelect) { renderChatList(chats, activeChat, onChatSelect) {
elements.chatList.innerHTML = ''; elements.chatList.innerHTML = '';
elements.chatCountBadge.textContent = chats.length;
if (chats.length === 0) { if (chats.length === 0) {
elements.chatList.innerHTML = `<li class="loading-chats">No chats found</li>`; elements.chatList.innerHTML = `<li class="loading-chats">No chats found</li>`;
return; return;
} }
chats.forEach(chat => { chats.forEach(async (chat) => {
const li = document.createElement('li'); const li = document.createElement('li');
li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`; li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
li.dataset.id = chat.id; li.dataset.id = chat.id;
const picture = await waha.getChatPicture(chat.id);
const initials = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?'; const initials = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
const hasUnread = chat.unreadCount && chat.unreadCount > 0; const hasUnread = chat.unreadCount && chat.unreadCount > 0;
const timeStr = formatTime(chat.timestamp || new Date()); const timeStr = formatTime(chat.timestamp || new Date());
li.innerHTML = ` li.innerHTML = `
<div class="avatar">${initials}</div> <div class="avatar"><img src="${picture.url}"></div>
<div class="chat-item-info"> <div class="chat-item-info">
<div class="chat-item-meta"> <div class="chat-item-meta">
<span class="chat-item-name">${chat.name}</span> <span class="chat-item-name">${chat.name}</span>
@ -133,7 +134,7 @@ export const ui = {
groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`; groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
groupDiv.id = msg.id; groupDiv.id = msg.id;
const senderName = isOutgoing ? 'Me' : (msg.senderName || activeChatName); const senderName = isOutgoing ? 'Me' : (msg.from || activeChatName);
const timeStr = formatTime(msg.timestamp || new Date()); const timeStr = formatTime(msg.timestamp || new Date());
let statusCheck = ''; let statusCheck = '';
@ -148,9 +149,10 @@ export const ui = {
} }
groupDiv.innerHTML = ` groupDiv.innerHTML = `
${!isOutgoing ? `<span class="message-sender">${senderName}</span>` : ''} <div class="message-indicator"></div>
<div class="message-bubble"> <div class="message-bubble">
${msg.body || msg.text} ${!isOutgoing ? `<span class="message-sender">${senderName}</span>` : ''}
${msg.body || msg.text || "<i>Empty message, maybe something shows up on your phone...</i>"}
<div class="message-meta"> <div class="message-meta">
<span>${timeStr}</span> <span>${timeStr}</span>
${statusCheck} ${statusCheck}

0
public/utils.js → docs/utils.js
View file

4
public/waha.js → docs/waha.js
View file

@ -54,6 +54,10 @@ export const waha = {
return request(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40`); return request(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40`);
}, },
async getChatPicture(chatId) {
return request(`/api/${config.session}/chats/${chatId}/picture`);
},
async readChat(chatId) { async readChat(chatId) {
return request('/api/sendSeen', { return request('/api/sendSeen', {
method: 'POST', method: 'POST',

0
public/websocket.js → docs/websocket.js
View file

4
index.js
View file

@ -3,14 +3,14 @@ import path from "path";
import { fileURLToPath } from "url"; import { fileURLToPath } from "url";
const app = express(); const app = express();
const PORT = process.env.PORT || 3100; const PORT = process.env.PORT || 3200;
// Resolve __dirname in ES modules // Resolve __dirname in ES modules
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename); const __dirname = path.dirname(__filename);
// Serve static assets from the public folder // Serve static assets from the public folder
app.use(express.static(path.join(__dirname, "public"))); app.use(express.static(path.join(__dirname, "docs")));
// Start static file server // Start static file server
app.listen(PORT, () => { app.listen(PORT, () => {