Hugging Face's logo

Spaces:
ReikerXx
/
My
Paused

App Files Community
Reaperxxxx commited on
Commit
419dee7
·
verified ·
1 Parent(s): 28cac3e

Create public/index.html

Browse files
Files changed (1) hide show
  1. public/index.html +139 -0
public/index.html ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Reiker Wa-Web</title>
7
+ <link rel="stylesheet" href="styles.css">
8
+ </head>
9
+ <body>
10
+ <header>
11
+ <h1>Reiker Wa-Web</h1>
12
+ </header>
13
+ <main>
14
+ <!-- Loading spinner -->
15
+ <div id="loading">
16
+ <div class="spinner"></div>
17
+ <p>Loading messages...</p>
18
+ </div>
19
+ <!-- Chats will be dynamically loaded here -->
20
+ <div id="chat-list"></div>
21
+ </main>
22
+ <script src="/socket.io/socket.io.js"></script>
23
+ <script>
24
+ const chatList = document.getElementById('chat-list');
25
+ const loadingSpinner = document.getElementById('loading');
26
+ const socket = io(); // Connect to WebSocket
27
+
28
+ // Function to show/hide loading spinner
29
+ function toggleLoading(show) {
30
+ loadingSpinner.style.display = show ? 'block' : 'none';
31
+ chatList.style.display = show ? 'none' : 'block';
32
+ }
33
+
34
+ // Function to truncate content to 3 words or fewer
35
+ function truncateContent(content) {
36
+ const words = content.split(' ');
37
+ if (words.length > 3) {
38
+ return words.slice(0, 3).join(' ') + '...';
39
+ }
40
+ return content;
41
+ }
42
+
43
+ // Function to clean up private DM numbers (remove @s.whatsapp.net)
44
+ function formatChatName(chatName) {
45
+ return chatName.includes('@s.whatsapp.net')
46
+ ? chatName.replace('@s.whatsapp.net', '')
47
+ : chatName;
48
+ }
49
+
50
+ // Group messages by chat name and keep only the latest message
51
+ function groupMessagesByChat(messages) {
52
+ const grouped = {};
53
+ messages.forEach(message => {
54
+ message.chatName = formatChatName(message.chatName); // Clean chat name
55
+ grouped[message.chatName] = message; // Overwrite to keep the latest message
56
+ });
57
+ return grouped;
58
+ }
59
+
60
+ // Function to render grouped chats
61
+ function renderGroupedChats(chats) {
62
+ chatList.innerHTML = ''; // Clear the current list
63
+ const groupedChats = groupMessagesByChat(chats);
64
+
65
+ Object.entries(groupedChats).forEach(([chatName, latestMessage]) => {
66
+ const chatDiv = document.createElement('div');
67
+ chatDiv.className = 'chat';
68
+ chatDiv.setAttribute('data-jid', latestMessage.jid); // Add jid for navigation
69
+
70
+ // Chat info
71
+ const chatInfo = document.createElement('div');
72
+ chatInfo.className = 'chat-info';
73
+ chatInfo.innerHTML = `
74
+ <h2>${chatName}</h2>
75
+ <p>${truncateContent(latestMessage.content)}</p>
76
+ `;
77
+ chatDiv.appendChild(chatInfo);
78
+
79
+ // Make chat clickable
80
+ chatDiv.addEventListener('click', () => {
81
+ window.location.href = `/chat/${latestMessage.jid}`;
82
+ });
83
+
84
+ chatList.appendChild(chatDiv);
85
+ });
86
+ }
87
+
88
+ // Function to merge/update chats and render them
89
+ function updateChatList(chats, newMessage) {
90
+ const groupedChats = groupMessagesByChat(chats);
91
+
92
+ // Update or add the new message
93
+ const chatName = formatChatName(newMessage.chatName);
94
+ groupedChats[chatName] = newMessage;
95
+
96
+ // Sort by timestamp (latest first)
97
+ const sortedChats = Object.values(groupedChats).sort(
98
+ (a, b) => b.timestamp - a.timestamp
99
+ );
100
+
101
+ renderGroupedChats(sortedChats); // Render sorted chats
102
+ }
103
+
104
+ // Function to fetch and render chat list
105
+ async function loadChatList() {
106
+ toggleLoading(true); // Show loading spinner
107
+ try {
108
+ const res = await fetch('/messages.json');
109
+ if (!res.ok) {
110
+ throw new Error(`HTTP error! status: ${res.status}`);
111
+ }
112
+ const chats = await res.json();
113
+ renderGroupedChats(chats); // Render the chats
114
+ } catch (err) {
115
+ console.error('Failed to load chat list:', err);
116
+ chatList.innerHTML = '<p>Failed to load chats. Try again later.</p>';
117
+ } finally {
118
+ toggleLoading(false); // Hide loading spinner
119
+ }
120
+ }
121
+
122
+ // Initial fetch of chat list
123
+ loadChatList();
124
+
125
+ // Listen for new messages via WebSocket
126
+ socket.on('new_message', (newMessage) => {
127
+ // Fetch the current chat list and update/merge the new message
128
+ const currentChats = Array.from(chatList.children).map(chat => ({
129
+ jid: chat.getAttribute('data-jid'),
130
+ chatName: chat.querySelector('h2').innerText,
131
+ content: chat.querySelector('p').innerText,
132
+ }));
133
+
134
+ // Merge the new message and render
135
+ updateChatList(currentChats, newMessage);
136
+ });
137
+ </script>
138
+ </body>
139
+ </html>