From 39cd7ac1901aedf8dad25bd342caeafeeb1a81da Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 14 Mar 2022 17:38:51 +0100
Subject: [PATCH] feat(ui) - assist chat wip

---
 tracker/tracker-assist/layout/index.html | 190 ++++++++++++++++++-----
 1 file changed, 150 insertions(+), 40 deletions(-)

diff --git a/tracker/tracker-assist/layout/index.html b/tracker/tracker-assist/layout/index.html
index 90ab1542c..e541fc1e3 100644
--- a/tracker/tracker-assist/layout/index.html
+++ b/tracker/tracker-assist/layout/index.html
@@ -9,6 +9,13 @@
     <!--CSS -->
     <!-- <link href="css/styles.css" rel="stylesheet"> -->
     <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+.text-uppercase {
+    text-transform: uppercase;
+}
 .connecting-message {
   /* margin-top: 50%; */
   font-size: 20px;
@@ -19,20 +26,20 @@
 }
 
 .status-connecting .connecting-message {
-  display: block;
+  /* display: block; */
 }
 .status-connecting .card {
   /* display: none; */
 }
 
 .card{
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  min-width: 324px;
-  width: 350px;
-  max-width: 800px;
+  font: 14px 'Roboto', sans-serif;
+  /* min-width: 324px; */
+  width: 300px;
+  /* max-width: 800px; */
   /* border: solid thin #ccc; */
   /* box-shadow: 0 0 10px #aaa; */
-  border: solid 4px rgba(0, 0, 0, 0.05);
+  border: solid 4px rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
 
@@ -62,8 +69,6 @@
   padding: 5px 8px;
   font-size: 14px;
   border-radius: 3px;
-  /* height: 30px; */
-  text-transform: uppercase;
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -71,9 +76,12 @@
   align-items: center;
 }
 
+.btn span {
+  margin-left: 10px;
+}
+
 .btn:hover {
-  background-color: #ddd;
-  border-color: #ddd;
+  filter: brightness(0.9);
 }
 
 .card .card-header{
@@ -89,7 +97,16 @@
 }
 
 #video-container {
-  background-color: #CCC;
+  background-color: rgb(90, 90, 90);
+  position: relative;
+  overflow: hidden;
+  /* width: 300px; */
+}
+
+#video-container video {
+  width: 100% !important;
+  height: auto;
+  object-fit: cover;
 }
 #local-stream, #remote-stream {
   /* display:none;  */ /* TODO uncomment this line  */
@@ -106,19 +123,28 @@
 
 #local-stream{
   width: 35%;
+  /* top: 50%; */
+  /* left: 70%; */
   position: absolute;
   z-index: 99;
   bottom: 5px;
   right: 5px;
   border: thin solid rgba(255,255,255, .3);
+  overflow: hidden;
 }
 
-
+#audio-btn {
+  margin-right: 10px;
+}
+#audio-btn .bi-mic {
+  fill: #CC0000;
+}
 #audio-btn .bi-mic-mute {
   display:none;
 }
 #audio-btn:after {
   /* text-transform: capitalize; */
+  color: #CC0000;
   content: 'Mute';
   padding-left: 5px;
 }
@@ -134,11 +160,15 @@
 }
 
 
+#video-btn .bi-camera-video {
+  fill: #CC0000;
+}
 #video-btn .bi-camera-video-off {
   display:none;
 }
 #video-btn:after {
   /* text-transform: capitalize; */
+  color: #CC0000;
   content: 'Stop Video';
   padding-left: 5px;
 }
@@ -158,8 +188,16 @@
   display: flex;
   flex-direction: column;
   font-size: 14px;
+  background-color: white;
 }
 
+#chat-card .chat-messages { display: none; }
+#chat-card .chat-input { display: none; }
+#chat-card .chat-header .arrow-state { transform: rotate(180deg); }
+#chat-card.active .chat-messages { display: flex; }
+#chat-card.active .chat-input {  display: flex; }
+#chat-card.active .chat-header .arrow-state { transform: rotate(0deg); }
+
 #chat-card .chat-header {
   border-bottom: solid thin #ccc;
   padding: 8px 16px;
@@ -177,12 +215,11 @@
   margin-left: 6px;
 }
 
-#chat-card .messages {
+#chat-card .chat-messages {
   padding: 8px 16px;
   overflow-y: auto;
-  /* height: calc(100vh - 120px); */
-  height: 400px;
-  display: flex;
+  height: 250px;
+  overflow-y: auto;
   flex-direction: column;
   justify-content: flex-end;
 }
@@ -194,11 +231,15 @@
   margin-bottom: 2px;
 }
 
+#chat-card .message .message-text {
+  /* max-width: 70%; */
+  width: fit-content;
+}
 #chat-card .message {
   margin-bottom: 15px;
 }
 
-#chat-card .messages .message.left .message-text {
+#chat-card .chat-messages .message.left .message-text {
   text-align: left;
   background: #D7E2E2;
   border-radius: 0px 30px 30px 30px;
@@ -215,19 +256,18 @@
   margin-left: 4px;
 }
 
-#chat-card .messages .message.right {
-  margin-left: 20%;
+#chat-card .chat-messages .message.right {
+  margin-left: auto;
   text-align: right;
 }
 
-#chat-card .messages .message.right .message-text {
+#chat-card .chat-messages .message.right .message-text {
   background: #E4E4E4;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   border-radius: 30px 30px 0px 30px;
 }
 
-#chat-card .input-container {
-  display: flex;
+#chat-card .chat-input {
   margin: 10px;
   border-radius: 3px;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
@@ -235,7 +275,7 @@
   position: relative;
 }
 
-#chat-card .input-container .input {
+#chat-card .chat-input .input {
   width: 100%;
   border: none;
   border-radius: 0px;
@@ -266,6 +306,48 @@
 .send-btn svg {
   fill: #DDDDDD;
 }
+
+.confirm-window .title {
+  margin-bottom: 10px;
+}
+.confirm-window {
+  font: 14px 'Roboto', sans-serif;
+  padding: 20px;
+  background-color: #F3F3F3;
+  border-radius: 3px;
+  /* position: absolute; */
+  width: fit-content;
+  color: #666666;
+  display: none;
+}
+.confirm-window .actions {
+  background-color: white;
+  padding: 10px;
+  display: flex;
+  box-shadow: 0px 0px 3.99778px 1.99889px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+
+.btn-lg {
+  font-size: 14px;
+  padding: 10px 14px;
+}
+
+.btn-success {
+  background: rgba(0, 167, 47, 1);
+  color: white;
+}
+
+/* .btn-error:hover,
+.btn-success:hover {
+  filter: brightness(0.9);
+} */
+
+.btn-error {
+  background: #FFE9E9;
+  /* border-color: #d43f3a; */
+  color: #CC0000;
+}
     </style>
 
     
@@ -273,6 +355,26 @@
   
   
   <body>
+    <div id="remote-control-confirm" class="confirm-window">
+      <div class="title">The agent is requesting remote control</div>
+      <div class="actions">
+        <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">Grant remote access</button>
+        <button class="text-uppercase btn btn-lg btn-error">Reject</button>
+      </div>
+    </div>
+
+    <div id="call-confirm" class="confirm-window">
+      <div class="title">Answer the call so the agent can assist.</div>
+      <div class="actions">
+        <button class="text-uppercase btn btn-lg btn-success" style="margin-right: 10px">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16">
+            <path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
+          </svg>
+          <span>Answer</span>
+        </button>
+        <button class="text-uppercase btn btn-lg btn-error">Reject</button>
+      </div>
+    </div>
     <section id="or-assist" class="status-connecting">
         <div class="connecting-message"> Connecting... </div>
         <div class="card shadow">
@@ -301,39 +403,47 @@
 
             <div class="card-footers">
                 <div class="assist-controls">
+                    <!-- Add class .muted to #audio-btn when user  mutes audio -->
                     <button
                       href="#"
                       id="audio-btn"
                       class="btn btn-light btn-sm text-uppercase me-2"
-                    ><i>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic" viewBox="0 0 16 16">
+                    >
+                      <i>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic" viewBox="0 0 16 16">
                           <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
                           <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
                         </svg>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic-mute" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-mic-mute" viewBox="0 0 16 16">
                           <path d="M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879l-1-1V3a2 2 0 0 0-3.997-.118l-.845-.845A3.001 3.001 0 0 1 11 3z"/>
                           <path d="m9.486 10.607-.748-.748A2 2 0 0 1 6 8v-.878l-1-1V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z"/>
                         </svg>
-                    </i></button>
-                    <!-- Add class .mute to #audio-btn when user  mutes audio -->
-                    <button href="#" id="video-btn" class="off btn btn-light btn-sm text-uppercase ms-2"><i >
+                      </i>
+                    </button>                    
+                    
+                    <!--Add class .off to #video-btn when user stops video -->
+                    <button
+                      href="#"
+                      id="video-btn"
+                      class="btn btn-light btn-sm text-uppercase ms-2"
+                    >
+                      <i>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556v4.35zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H2z"/>
                         </svg>
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-video-off" viewBox="0 0 16 16">
                           <path fill-rule="evenodd" d="M10.961 12.365a1.99 1.99 0 0 0 .522-1.103l3.11 1.382A1 1 0 0 0 16 11.731V4.269a1 1 0 0 0-1.406-.913l-3.111 1.382A2 2 0 0 0 9.5 3H4.272l.714 1H9.5a1 1 0 0 1 1 1v6a1 1 0 0 1-.144.518l.605.847zM1.428 4.18A.999.999 0 0 0 1 5v6a1 1 0 0 0 1 1h5.014l.714 1H2a2 2 0 0 1-2-2V5c0-.675.334-1.272.847-1.634l.58.814zM15 11.73l-3.5-1.555v-4.35L15 4.269v7.462zm-4.407 3.56-10-14 .814-.58 10 14-.814.58z"/>
                         </svg>
-
-                    </i></button>
-                    <!--Add class .off to #video-btn when user stops video -->
-                </div>
-                <div class="assist-end">
-                    <button id="end-call-btn" href="#" class="btn btn-danger btn-sm  text-uppercase" style="margin-right: 8px;">End</button>
+                      </i>
+                    </button>
+                    
                 </div>
+                
+                <button id="end-call-btn" href="#" class="btn btn-danger btn-sm text-uppercase" style="margin-right: 8px;">End</button>
             </div>
 
-            <!-- CHAT -->
-            <div id="chat-card">
+            <!-- CHAT - add .active class to show the messages and input -->
+            <div id="chat-card" class="active">
               <div class="chat-header">
                 <div class="chat-title">
                   <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-chat" viewBox="0 0 16 16">
@@ -342,12 +452,12 @@
                   <span>Chat</span>
                 </div>
                 <div>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="bi bi-chevron-up arrow-state" viewBox="0 0 16 16">
                     <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
                   </svg>
                 </div>
               </div>
-              <div class="messages">
+              <div class="chat-messages">
                 <div class="message left">
                   <div class="message-text"> Hey, did you get the key? </div>
                   <div>
@@ -365,7 +475,7 @@
                   </div>
                 </div>
               </div>
-              <div class="input-container">
+              <div class="chat-input">
                 <input type="text" class="input" placeholder="Type a message...">
                 <div class="send-btn">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi bi-arrow-right-short" viewBox="0 0 16 16">