From 9ac7566226f4929dbe98670a87e277387db7865b Mon Sep 17 00:00:00 2001
From: Aye Min Aung <ayemin@signalwire.com>
Date: Fri, 17 May 2024 19:58:15 +0700
Subject: [PATCH] basic chat UI done

---
 public/full.js  | 27 ++++++++++++++++++++++-----
 views/index.ejs |  4 ++++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/public/full.js b/public/full.js
index 5fb5e0b..58e19be 100644
--- a/public/full.js
+++ b/public/full.js
@@ -15,6 +15,8 @@ const {
 
 const searchInput = document.getElementById('searchInput')
 const searchType = document.getElementById('searchType')
+const conversationMessageInput = document.getElementById('new-conversation-message')
+const sendMessageBtn = document.getElementById('send-message')
 
 window.getMicrophoneDevices = getMicrophoneDevices
 window.getCameraDevices = getCameraDevices
@@ -376,6 +378,17 @@ async function getClient() {
   return client
 }
 
+sendMessageBtn.addEventListener('click', async () => {
+  if (!client) return
+  const address = window.__currentAddress
+  const text = conversationMessageInput.value
+  await client.conversation.sendMessage({
+    addressId: address.id,
+    text,
+  })
+  conversationMessageInput.value = ''
+})
+
 /**
  * Connect with Relay creating a client and attaching all the event handler.
  */
@@ -1112,16 +1125,16 @@ const createAddressListItem = (address) => {
   Object.entries(address.channels).forEach(([channelName, channelValue]) => {
     const button = document.createElement('button')
     button.className = 'btn btn-sm btn-success'
-
-    button.addEventListener('click', () => dialAddress(channelValue))
-
     const icon = document.createElement('i')
     if (channelName === 'messaging') {
       icon.className = 'bi bi-chat'
+      button.addEventListener('click', () => openMessageModal(address))
     } else if (channelName === 'video') {
       icon.className = 'bi bi-camera-video'
+      button.addEventListener('click', () => dialAddress(channelValue))
     } else if (channelName === 'audio') {
       icon.className = 'bi bi-phone'
+      button.addEventListener('click', () => dialAddress(channelValue))
     }
     button.appendChild(icon)
 
@@ -1542,9 +1555,10 @@ function createMessageListItem(msg) {
   listItem.innerHTML = `
     <div class="d-flex flex-column">
       <div class="d-flex justify-content-between align-items-center">
-        <h6 class="mb-0 text-capitalize">${msg.type ?? 'unknown'}</h6>
+        <h6 class="mb-0 text-capitalize">${msg.text ?? 'unknown'}</h6>
         <div class="d-flex align-items-center gap-1">
-          <span class="badge bg-info">${msg.subtype ?? 'unknown'}</span>
+          <span class="badge bg-info">${msg.type ?? 'unknown'}</span>
+          <span class="badge bg-warning">${msg.subtype ?? 'unknown'}</span>
           <span class="badge bg-success">${msg.kind ?? 'unknown'}</span>
         </div>
       </div>
@@ -1559,6 +1573,7 @@ const msgModalDiv = document.getElementById('messageModal')
 msgModalDiv.addEventListener('hidden.bs.modal', clearMessageModal)
 
 function clearMessageModal() {
+  window.__currentAddress = null
   window.__messageData = null
   const titleH2 = msgModalDiv.querySelector('.title')
   const typeBadgeSpan = msgModalDiv.querySelector('.type-badge')
@@ -1586,6 +1601,7 @@ function clearMessageModal() {
 }
 
 async function openMessageModal(data) {
+  window.__currentAddress = data
   const modal = new bootstrap.Modal(msgModalDiv)
   modal.show()
 
@@ -1663,6 +1679,7 @@ async function fetchMessages(id) {
       pageSize: 10,
     })
     window.__messageData = messages
+    subscribeToNewMessages()
   } catch (error) {
     console.error('Unable to fetch messages', error)
   } finally {
diff --git a/views/index.ejs b/views/index.ejs
index 53c5de2..b7e1f70 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -508,6 +508,10 @@
               </button>
             </div>
             <!-- Message Pagination end -->
+            <div class="input-group mt-4 container-fluid">
+              <input type="text" id="new-conversation-message" class="form-control" placeholder="Message..." aria-label="Chat Message" aria-describedby="button-addon2">
+              <button class="btn btn-primary" type="button" id="send-message"><i class="bi-send"></i></button>
+            </div>
           </div>
         </div>
       </div>