From 0143ff52d4d95584b98c9d01d659f7ce9056e7a0 Mon Sep 17 00:00:00 2001
From: Ammar Ansari <iammaransari@gmail.com>
Date: Fri, 16 Feb 2024 23:50:18 +0500
Subject: [PATCH] Conversation logs UI update

---
 public/full.js  | 27 ++++++++++++++++++++++++---
 views/index.ejs | 30 +++++++++++++++---------------
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/public/full.js b/public/full.js
index d2221e2..4cffeb6 100644
--- a/public/full.js
+++ b/public/full.js
@@ -37,7 +37,6 @@ const inCallElements = [
   unmuteVideoSelfBtn,
   deafSelfBtn,
   undeafSelfBtn,
-  controlConvo,
   controlSliders,
   controlLayout,
   hideVMutedBtn,
@@ -346,7 +345,6 @@ function restoreUI() {
   btnReject.classList.add('d-none')
   tabs.classList.remove('d-none')
   connectStatus.innerHTML = 'Not Connected'
-  liveMessageList.textContent = ''
 
   inCallElements.forEach((button) => {
     button.classList.add('d-none')
@@ -1124,6 +1122,29 @@ async function fetchHistories() {
   }
 }
 
+function createLiveMessageListItem(msg) {
+  const listItem = document.createElement('li')
+  listItem.classList.add('list-group-item')
+  listItem.id = msg.id
+  const formattedTimestamp = formatMessageDate(msg.ts * 1000)
+  listItem.innerHTML = `
+    <div class="d-flex flex-column">
+      <div class="d-flex justify-content-between align-items-center">
+        <div>
+          <h6 class="mb-0 text-capitalize">${msg.type ?? 'unknown'}</h6>
+          <p class="mb-1 fst-italic">${msg.conversation_name}</p>
+        <div>
+        <div class="d-flex align-items-center gap-1">
+          <span class="badge bg-info">${msg.subtype ?? 'unknown'}</span>
+          <span class="badge bg-success">${msg.kind ?? 'unknown'}</span>
+        </div>
+      </div>
+      <p class="text-muted small mb-0">${formattedTimestamp}</p>
+    </div>
+  `
+  return listItem
+}
+
 let isConvoSubscribed = false
 function subscribeToNewMessages() {
   if (!isConvoSubscribed) {
@@ -1151,7 +1172,7 @@ function subscribeToNewMessages() {
       // Update in call live messages
       // FIXME: Make sure the message is for the current call based on newMsg.conversation_id
       const liveMessageList = document.querySelector('#liveMessageList')
-      const newListItem = createMessageListItem(newMsg)
+      const newListItem = createLiveMessageListItem(newMsg)
       if (liveMessageList.firstChild) {
         liveMessageList.insertBefore(newListItem, liveMessageList.firstChild)
       } else {
diff --git a/views/index.ejs b/views/index.ejs
index b5da4fd..9d706d8 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -161,6 +161,21 @@
           </div>
         </div>
         <!-- Room controls end -->
+      
+        <!-- Conversation logs -->
+        <div id="controlConvo" class="row py-2 px-2">
+          <div class="card p-0">
+            <div class="card-header">
+              Conversation logs
+            </div>
+            <div class="card-body px-0 py-1">
+              <div class="overflow-auto" style="max-height: 200px; min-height: 100px;">
+                <ul id="liveMessageList" class="list-group list-group-flush mt-0"></ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Conversation logs end -->
       </div>
       <!-- Connect options end -->
 
@@ -242,21 +257,6 @@
         </div>
         <!-- Root element (for SDK video) end -->
 
-        <!-- Conversation logs -->
-        <div id="controlConvo" class="row py-2 px-2 d-none">
-          <div class="card p-0">
-            <div class="card-header">
-              Conversation logs
-            </div>
-            <div class="card-body px-0 py-1">
-              <div class="overflow-auto" style="max-height: 200px;">
-                <ul id="liveMessageList" class="list-group list-group-flush mt-0"></ul>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Conversation logs end -->
-
         <!-- Mic/Speaker volume controls -->
         <div id="controlSliders" class="row py-2 d-none">
           <div class="col-4">