sib-chat.js

-import 'https://cdn.happy-dev.fr/conversejs/dist/converse.min.js';
-import 'https://cdn.happy-dev.fr/conversejs/dist/emojis.js';
+import 'https://unpkg.com/converse.js@6.0/dist/converse.min.js';
+import 'https://unpkg.com/converse.js@6.0/dist/emojis.js';
 import { Helpers, store } from 'https://unpkg.com/@startinblox/core@0.9';
 import { Sib } from "https://unpkg.com/@startinblox/core@0.9/dist/libs/Sib.js";
 import { StoreMixin } from 'https://unpkg.com/@startinblox/core@0.9/dist/mixins/storeMixin.js';
@@ -46,8 +46,8 @@ export const SibChat = {
         mode: "open"
       });
       this.element.shadowRoot.append(...Helpers.importCSS(
-        'https://cdn.happy-dev.fr/conversejs/dist/converse.min.css',
-        'https://unpkg.com/@startinblox/component-chat@0.4/themes/converse-hd.css'
+        'https://unpkg.com/converse.js@6.0/dist/converse.min.css',
+        'https://unpkg.com/@startinblox/component-chat@0.5/themes/converse-hd.css'
       ));
       if (window.converse_sib === undefined) {
         this.initializeConverse();
@@ -125,23 +125,9 @@ export const SibChat = {
         if (converse_el) {
           root.appendChild(converse_el);
         }
-        if(this._converse.auto_join_rooms[0]) {
-          if(this._converse.chatboxviews.get(this._converse.auto_join_rooms[0])) {
-            this._converse.chatboxviews.get(this._converse.auto_join_rooms[0]).close();
-          }
-        }
-        if(this._converse.auto_join_private_chats[0]) {
-          if(this._converse.chatboxviews.get(this._converse.auto_join_private_chats[0])) {
-            this._converse.chatboxviews.get(this._converse.auto_join_private_chats[0]).close();
-          }
-        }
         if (is_groupchat) {
-          this._converse.auto_join_private_chats = [];
-          this._converse.auto_join_rooms = [jid];
           this._converse.api.rooms.open(jid);
         } else {
-          this._converse.auto_join_rooms = [];
-          this._converse.auto_join_private_chats = [jid];
           this._converse.api.chats.open(jid);
         }
       }
@@ -204,9 +190,6 @@ export const SibChat = {
       'auto_join_on_invite': true,
       'auto_reconnect': true,
       'auto_register_muc_nickname': true,
-      // Quick fix : auto join yourself & target of current route
-      'auto_join_private_chats': [],
-      'auto_join_rooms': [],
       'bosh_service_url': this.element.dataset.boshServiceUrl,
       "clear_messages_on_reconnection": true,
       'i18n': 'en',
@@ -226,7 +209,7 @@ export const SibChat = {
       // 'show_send_button': true,
       'singleton': true,
       'sounds_path': 'https://cdn.happy-dev.fr/conversejs/sounds/',
-      'view_mode': 'embedded',
+      'view_mode': 'fullscreen',
       'visible_toolbar_buttons': {
         call: false,
         spoiler: false,

themes/converse-hd.css

@@ -86,8 +86,58 @@
   --chatroom-separator-border-bottom: 1px solid var(--chatroom-head-color);
   --avatar-border-radius: 50%;
   --avatar-background-color: lightgrey;
-  --fullpage-chat-height: calc(var(--vh, 1vh) * 100);
   --chatroom-correcting-color: var(--hd-chat-correcting-color);
+  --fullpage-chat-height: 100%;
+}
+
+/* To hide the trash icon because you can't remove a message for now */
+#conversejs>.converse-chatboxes .chat-body .chat-msg__actions>button.chat-msg__action.fa-trash-alt {
+  display: none;
+}
+
+/* Chat window fits the SIB app size */
+#conversejs.converse-fullscreen.converse-singleton {
+  box-sizing: border-box;
+  bottom: auto;
+  height: 100%;
+  position: relative;
+  right: auto;
+  width: 100%;
+}
+
+#conversejs.converse-embedded .converse-chatboxes,
+#conversejs.converse-fullscreen .converse-chatboxes {
+  bottom: auto;
+  flex-wrap: nowrap;
+  height: 100%;
+  position: inherit;
+  width: 100%;
+}
+/* end */
+
+#conversejs .flyout .chat-head {
+  display: none;
+}
+
+/* Custom scrollbar of chat history */
+#conversejs .flyout .chat-body .chat-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--hd-subdued-color) white;
+}
+
+#conversejs .flyout .chat-body .chat-content::-webkit-scrollbar-track {
+  background: white;
+}
+
+#conversejs .flyout .chat-body .chat-content::-webkit-scrollbar-thumb {
+  background-color: var(--hd-subdued-color);
+  border-radius: 6px;
+  border: 3px solid white;
+}
+/* end */
+
+#conversejs .flyout .chat-body .chat-content::-webkit-scrollbar {
+  width: 11px;
 }
 
 #conversejs ::selection {
@@ -416,16 +466,6 @@
   overflow: hidden;
 }
 
-#conversejs.converse-embedded .converse-chatboxes {
-  z-index: 1031;
-  position: inherit;
-  flex-wrap: nowrap;
-  bottom: auto;
-  height: 100%;
-  width: 100%;
-  margin-left: -15px;
-}
-
 #conversejs.converse-embedded .chatbox .box-flyout {
   bottom: 0;
   height: 100%;
@@ -527,6 +567,10 @@
   border-top: none;
 }
 
+#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants {
+  display: none;
+}
+
 #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
   font-size: var(--font-size);
 }
@@ -626,7 +670,7 @@
 }
 
 #conversejs .message.chat-msg {
-  padding: 0.8rem 6.4rem 0.4rem 3rem;
+  padding: 0.8rem 4rem 0.4rem 3rem;
 }
 
 #conversejs .message.chat-msg.correcting.groupchat {