Merge pull request #265 from matrx-software/dev

Dev
matrx-software · Feb 8, 2021 · 5eed98c · 5eed98c
2 parents 957ca9e + 4ba1ada
commit 5eed98c
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 16 deletions.
diff --git a/matrx/__version__.py b/matrx/__version__.py
@@ -12,7 +12,7 @@
 __url__ = 'https://matrx-software.com'
 __doc_url__ = 'http://docs.matrx-software.com/en/latest/'
 __source_url__ = 'https://github.com/matrx-software/matrx'
-__version__ = '2.0.5'
+__version__ = '2.0.6'
 __author__ = 'MATRX Team at TNO.nl'
 __author_email__ = 'info@matrx.com'
 __license__ = 'MIT License'

diff --git a/matrx_visualizer/static/css/GUI.css b/matrx_visualizer/static/css/GUI.css
@@ -123,17 +123,20 @@ html {
   border: 1px solid transparent;
   padding: 0.375rem 0.75rem;
   border-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: color 0.05s ease-in-out, background-color 0.05s ease-in-out, border-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
   margin-bottom: 0.5em;
+  word-break: break-word;
 }
 
 .contact:hover {
   cursor: pointer;
-  background-color: #e2e6ea;
+  background-color: #424649;
+  color: white;
 }
 
 .contact_active {
-  background-color: #e2e6ea;
+  background-color: #424649;
+  color: white;
 }
 
 #messages {
@@ -151,6 +154,7 @@ html {
     width: fit-content;
     margin-left: auto;
     margin-right: 10px;
+    max-width: 90%;
 }
 
 .message_you:after {
@@ -170,12 +174,14 @@ html {
 
 .message_other {
 	position: relative;
-	background: #e2e6ea;
+	background: white;
 	border-radius: .4em;
     padding: 0.375rem 0.75rem;
     margin-bottom: 0.5em;
     width: fit-content;
     margin-left: 10px;
+    color:black;
+    max-width: 90%;
 }
 
 .message_other:after {
@@ -186,7 +192,7 @@ html {
 	width: 0;
 	height: 0;
 	border: 8px solid transparent;
-	border-right-color: #e2e6ea;
+	border-right-color: white;
 	border-left: 0;
 	border-top: 0;
 	margin-top: -4px;
@@ -203,11 +209,21 @@ h5 {
 }
 
 #chat {
-  background-color: white;
+  background-color: rgb(229 221 213 / 95%);
   padding-bottom: 1em;
   padding-left: 0.5em;
-  padding-right: 1em;
+  padding-right: 0;
   z-index: 100000000000;
+  position: absolute;
+  top: 46px;
+  right: 0;
+  width: 100%;
+  max-width: 800px;
+  height: calc(100% - 46px);
+}
+
+#chatrooms_list {
+     max-height: 90vh;
 }
 
 .object:hover {
@@ -244,6 +260,19 @@ h5 {
     font-size: 1rem;
 }
 
+#chat_form_submit {
+    border: none;
+    background-color: #0795bb;
+
+}
+
+#chat_form_submit:hover {
+    background-color: #056681;
+    -webkit-transition: background-color 100ms linear;
+    -ms-transition: background-color 100ms linear;
+    transition: background-color 100ms linear;
+}
+
 /* subtile + context menu bug fix. Subtile objects only block when exactly on top of eachother. */
 .object {
     pointer-events: none;

diff --git a/matrx_visualizer/static/js/toolbar.js b/matrx_visualizer/static/js/toolbar.js
@@ -381,7 +381,7 @@ function open_chatroom(chatroom_display_name, chatroom_ID, chatroom_type) {
         chatroom_type = "global";
     }
 
-    if (chat_blocked) {
+    if (chat_blocked && lv_agent_type == "human-agent") {
         document.getElementById("chat_form_input").placeholder = "Type a message..";
         document.getElementById("chat_form_submit").disabled = false;
         chat_blocked = false;
@@ -418,6 +418,10 @@ function open_chatroom(chatroom_display_name, chatroom_ID, chatroom_type) {
             add_message(chatroom_ID, message);
         });
     }
+
+    // scroll message container to bottom
+    scrollToBottom(document.getElementById("messages"));
+
 }
 
 /*
@@ -457,9 +461,11 @@ function add_message(chatroom_ID, mssg) {
     mssgs_container.appendChild(div);
 
     // scroll to the new message
-    scrollSmoothToBottom(mssgs_container)
+//    scrollSmoothToBottom(mssgs_container)
+    scrollToBottom(mssgs_container);
 }
 
+
 /**
  * Scroll smoothly to the end of a div
  */
@@ -469,6 +475,13 @@ function scrollSmoothToBottom (div) {
    }, 500);
 }
 
+/**
+ * Scroll directly to the end of a div
+ */
+function scrollToBottom (div) {
+   div.scrollTo(0, div.scrollHeight);
+}
+
 /*
  * Send the message to MATRX
  */

diff --git a/matrx_visualizer/templates/agent.html b/matrx_visualizer/templates/agent.html
@@ -55,11 +55,11 @@
             <div class="container-fluid">
                 <h5>Chats</h5>
                 <div class="row">
-                    <div class="col-md-auto" id="chatrooms_list">
+                    <div class="col-md-3" id="chatrooms_list">
                         <div class="contact" id="new_chat_button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+</div>
                         <div id="new_chat_dropdown" class="dropdown-menu"></div>
                     </div>
-                    <div class="col-md-auto">
+                    <div class="col-md-9">
                         <div id="messages">
                         </div>
                         <!-- For agents that can be controlled by humans, please use human-agents -->

diff --git a/matrx_visualizer/templates/god.html b/matrx_visualizer/templates/god.html
@@ -55,11 +55,11 @@
             <div class="container-fluid">
                 <h5>Chats</h5>
                 <div class="row">
-                    <div class="col-md-auto" id="chatrooms_list">
+                    <div class="col-md-3" id="chatrooms_list">
                         <div class="contact" id="new_chat_button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+</div>
                         <div id="new_chat_dropdown" class="dropdown-menu"></div>
                     </div>
-                    <div class="col-md-auto">
+                    <div class="col-md-9">
                         <div id="messages">
                         </div>
                         <!-- "God" is not an agent, only a view, and as such cannot send messages -->

diff --git a/matrx_visualizer/templates/human_agent.html b/matrx_visualizer/templates/human_agent.html
@@ -55,11 +55,11 @@
             <div class="container-fluid">
                 <h5>Chats</h5>
                 <div class="row">
-                    <div class="col-md-auto" id="chatrooms_list">
+                    <div class="col-md-3" id="chatrooms_list">
                         <div class="contact" id="new_chat_button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+</div>
                         <div id="new_chat_dropdown" class="dropdown-menu"></div>
                     </div>
-                    <div class="col-md-auto">
+                    <div class="col-md-9">
                         <div id="messages">
                         </div>
                         <input class="form-control" id="chat_form_input" placeholder="Open a chatroom first..">