From 43f3f9a28119a8040f0ca6b2dc92f54aa5a352b2 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Mon, 10 Jun 2024 14:45:52 +0300
Subject: [PATCH] new UI

---
 web/chat-client.html | 117 ++++++++++++++++++++++++++++++++-----------
 web/chat-server.js   |  14 +++++-
 2 files changed, 100 insertions(+), 31 deletions(-)

diff --git a/web/chat-client.html b/web/chat-client.html
index ec5b768..1527051 100644
--- a/web/chat-client.html
+++ b/web/chat-client.html
@@ -18,36 +18,43 @@
         </div>
 
         <!-- Active Users List -->
-        <div class="flex justify-center items-center mb-4">
+        <div id="active-users-container" class="hidden flex justify-center items-center mb-4">
             <div class="w-1/3">
                 <h2 class="text-xl font-bold mb-2">Active Users</h2>
-                <ul id="users-list" class="list-disc list-inside bg-white p-4 rounded shadow">
+                <select id="users-list" class="w-full bg-white p-4 rounded shadow" multiple size="10">
                     <!-- Dynamic list of users -->
-                </ul>
+                </select>
+                <button onclick="startChat()" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mt-4">Start Chat</button>
             </div>
-            <div class="w-2/3 ml-4">
-                <h2 class="text-xl font-bold mb-2">Chat Room</h2>
-                <div id="chat-room" class="bg-white p-4 rounded shadow">
-                    <!-- Chat room content -->
-                    <div class="mb-4">
-                        <label class="flex items-center space-x-2">
-                            <input type="checkbox" id="autosend" class="mr-2">
-                            <span>Continuous</span>
-                        </label>
-                    </div>
-                    <div class="mb-4">
-                        <button id="record-button" disabled
-                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">Push to Talk</button>
-                    </div>
-                    <div id="transcription" class="border rounded p-4 h-48 overflow-y-scroll mb-4">
-                        <!-- Transcription content -->
-                    </div>
-                    <canvas id="canvas" class="w-full mb-4"></canvas>
-                    <div class="flex justify-between items-center">
-                        <button id="copyButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="copyToClipboard('transcription')">Copy</button>
-                        <button id="clearButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="clearTranscription()">Clear</button>
-                    </div>
+        </div>
+
+        <!-- Chat Room -->
+        <div id="chat-room-container" class="hidden w-2/3 mx-auto">
+            <h2 class="text-xl font-bold mb-2">Chat Room</h2>
+            <div id="chat-room" class="bg-white p-4 rounded shadow mb-4">
+                <!-- Chat room content -->
+                <div class="mb-4">
+                    <label class="flex items-center space-x-2">
+                        <input type="checkbox" id="autosend" class="mr-2">
+                        <span>Continuous</span>
+                    </label>
                 </div>
+                <div class="mb-4">
+                    <button id="record-button" disabled
+                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4">Push to Talk</button>
+                </div>
+                <div id="transcription" class="border rounded p-4 h-48 overflow-y-scroll mb-4">
+                    <!-- Transcription content -->
+                </div>
+                <canvas id="canvas" class="w-full mb-4"></canvas>
+                <div class="flex justify-between items-center">
+                    <button id="copyButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="copyToClipboard('transcription')">Copy</button>
+                    <button id="clearButton" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-4 rounded focus:outline-none" onclick="clearTranscription()">Clear</button>
+                </div>
+            </div>
+            <h2 class="text-xl font-bold mb-2">Previous Chats</h2>
+            <div id="previous-chats" class="bg-white p-4 rounded shadow">
+                <!-- Previous chats content -->
             </div>
         </div>
 
@@ -63,6 +70,7 @@
 
     <script>
         let sessionId;
+        let username;
         let selectedDeviceId = "default";
         let socket;
         let audioRecorder;
@@ -75,6 +83,8 @@
         let audioContext;
         let serverTime;
         let users = [];
+        let selectedUsers = [];
+        let chats = [];
         let volumeChecker;
         let lastVolumes = new Array(5);
         let averageVolume;
@@ -225,6 +235,10 @@
                     users = json.users;
                     updateUserList();
                 }
+                if (json.hasOwnProperty("chats")) {
+                    chats = json.chats;
+                    updateChatList();
+                }
                 return;
             } catch (e) {
             }
@@ -320,7 +334,7 @@
 
         function sendAudioToServer(data) {
             if (connected) {
-                socket.send(data);
+                socket.send(JSON.stringify({ type: 'audio', audio: data }));
                 serverTime = Date.now();
                 if (!autosend.checked) {
                     transcription.innerHTML = "Processing audio...";
@@ -339,21 +353,64 @@
         }
 
         function joinChat() {
-            const username = document.getElementById('username').value;
+            username = document.getElementById('username').value;
             if (username.trim() === "") {
                 alert("Please enter a username");
                 return;
             }
             socket.send(JSON.stringify({ type: 'join', username }));
+            document.getElementById('active-users-container').classList.remove('hidden');
+            fetchPreviousChats(username);
+        }
+
+        function startChat() {
+            const selectedOptions = Array.from(document.querySelectorAll('#users-list option:checked'));
+            selectedUsers = selectedOptions.map(option => option.value);
+            if (selectedUsers.length === 0) {
+                alert("Please select at least one user to start a chat.");
+                return;
+            }
+            socket.send(JSON.stringify({ type: 'startChat', users: selectedUsers }));
+            document.getElementById('chat-room-container').classList.remove('hidden');
         }
 
         function updateUserList() {
             const usersList = document.getElementById('users-list');
             usersList.innerHTML = '';
             users.forEach(user => {
-                const li = document.createElement('li');
-                li.innerText = user.username;
-                usersList.appendChild(li);
+                const option = document.createElement('option');
+                option.value = user.sessionId;
+                option.innerText = user.username;
+                if (user.username === username) {
+                     option.innerText += " (me)";
+                //     option.disabled = true;
+                 }
+                usersList.appendChild(option);
+            });
+        }
+
+        function fetchPreviousChats(username) {
+            fetch(`/chats?username=${username}`)
+                .then(response => response.json())
+                .then(data => {
+                    chats = data.chats;
+                    updateChatList();
+                });
+        }
+
+        function updateChatList() {
+            const previousChats = document.getElementById('previous-chats');
+            previousChats.innerHTML = '';
+            chats.forEach(chat => {
+                const chatDiv = document.createElement('div');
+                chatDiv.classList.add('border', 'rounded', 'p-2', 'mb-2');
+                const participants = chat.participants.join(', ');
+                const status = chat.participants.map(participant => {
+                    const user = users.find(u => u.username === participant);
+                    return user ? `${participant} (online)` : `${participant} (offline)`;
+                }).join(', ');
+                chatDiv.innerHTML = `<strong>Participants:</strong> ${participants}<br><strong>Status:</strong> ${status}`;
+                previousChats.appendChild(chatDiv);
             });
         }
 
diff --git a/web/chat-server.js b/web/chat-server.js
index fb4b04c..e060dab 100644
--- a/web/chat-server.js
+++ b/web/chat-server.js
@@ -23,7 +23,8 @@ let storeRecordings = false;
 let queueCounter = 0;
 
 const sessions = new Map();
-const users = new Map();  // Store users with their usernames and session IDs
+const users = new Map();
+const chats = new Map(); // Store chat rooms
 
 storage.init().then(() => {
     storage.getItem('language').then((value) => {
@@ -52,6 +53,11 @@ wss.on('connection', (ws) => {
                 const { username } = data;
                 users.set(ws.sessionId, { username, sessionId: ws.sessionId });
                 broadcastUserList();
+            } else if (data.type === 'startChat') {
+                const { users: chatUsers } = data;
+                const chatId = Math.random().toString(36).substring(2);
+                chats.set(chatId, { participants: [ws.sessionId, ...chatUsers], messages: [] });
+                broadcastUserList();
             } else if (data.type === 'audio') {
                 handleAudioData(ws, data.audio);
             }
@@ -187,6 +193,12 @@ app.post('/upload', (req, res) => {
     });
 });
 
+app.get('/chats', (req, res) => {
+    const { username } = req.query;
+    const userChats = Array.from(chats.values()).filter(chat => chat.participants.includes(username));
+    res.status(200).send({ chats: userChats });
+});
+
 app.listen(PORT_HTTP, () => {
     console.log(`Server listening on port ${PORT_HTTP}`);
 });