Merge branch 'master' into bugfix/fix-chat-loading

.gitlab-ci.yml

 ---
-image: node
+image: node:12
 
 stages:
-  - test
   - release
 
-test:
-  stage: test
-  script:
-    - echo 'Make your tests here !'
-  except:
-    - master
-  tags:
-    - sib
-
 publish:
   stage: release
   before_script:
-    - npm install -g semantic-release @semantic-release/gitlab
+    - npm install -g semantic-release@v17 @semantic-release/gitlab
   script:
     - semantic-release
   only:
     - master
   tags:
-    - sib
+    - deploy

.gitlab/issue_templates/bug.md

+/label ~BUG
+
+### What's happening?
+
+*Describe in a few words what's happening*
+
+### Steps to reproduce
+
+*How one can reproduce the issue - this is very important*
+
+1. Step 1
+2. Step 2
+3. Step 3
+
+### Relevant logs and/or screenshots
+
+*If possible, please add a screenshot.*
+
+### Your Environment
+
+*Include relevant details about the environment you experienced the bug in*
+
+* Browser name and version:
+* Operating System and version (desktop or mobile):
\ No newline at end of file

package.json

@@ -5,7 +5,7 @@
   "main": "sib-chat.js",
   "repository": {
     "type": "git",
-    "url": "git@git.happy-dev.fr:startinblox/components/sib-chat.git"
+    "url": "git@git.startinblox.com:components/sib-chat.git"
   },
   "author": "Alexandre Bourlier",
   "license": "MIT",
@@ -26,7 +26,7 @@
               "release": "minor"
             },
             {
-              "type": "/.*/",
+              "type": "*",
               "release": "patch"
             }
           ]

plugins/converse-rai.js

+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(["converse"], factory);
+    } else {
+        factory(converse);
+    }
+}(this, function (converse) {
+    var raiDialog = null,
+        _converse = null;
+
+    converse.plugins.add("rai", {
+        'dependencies': [],
+
+        'initialize': function () {
+            _converse = this._converse;
+
+            _converse.api.settings.update({
+                rai_notification: true,
+                rai_notification_label: "Room Activity Indicator"
+            });
+
+            _converse.api.listen.on('connected', function () {
+                setupRoomActivityIndicators(function (supported) {
+                    if (supported) listenForRoomActivityIndicators();
+                });
+            });
+
+        }
+    });
+
+    function setupRoomActivityIndicators(callback) {
+        try {
+            const id = Math.random().toString(36).substr(2, 9);
+            const to = "conference." + _converse.domain;
+            _converse.connection.send(converse.env.$pres({
+                to: to,
+                id: id
+            }).c('rai', {
+                'xmlns': "xmpp:prosody.im/protocol/rai"
+            }));
+
+            if (callback) callback(true);
+        } catch (e) {
+            if (callback) callback(false);
+        }
+    }
+
+    function listenForRoomActivityIndicators() {
+
+        _converse.connection.addHandler(function (message) {
+
+            message.querySelectorAll('activity').forEach(function (activity) {
+                if (activity && activity.getAttribute("xmlns") == "xmpp:prosody.im/protocol/rai") {
+                    const jid = activity.innerHTML;
+                    _converse.api.trigger('chatRoomActivityIndicators', jid);
+
+                    if (_converse.api.settings.get("rai_notification")) {
+                        notifyText(_converse.api.settings.get("rai_notification_label"), jid, null, function (notificationId, buttonIndex) {
+                            _converse.api.rooms.open(jid);
+                        });
+                    }
+                }
+            });
+
+            const subject = message.querySelector('subject');
+            const body = message.querySelector('body');
+            if (subject && !body) sendMarker(message.getAttribute('from'), message.getAttribute('id'), 'received');
+
+            return true;
+
+        }, null, 'message', 'groupchat');
+    }
+
+    function sendMarker(to_jid, id, type)
+    {
+
+        const stanza = converse.env.$msg({
+          'from': _converse.connection.jid,
+          'id': Math.random().toString(36).substr(2,9),
+          'to': to_jid,
+          'type': 'chat'
+        }).c(type, {
+          'xmlns': converse.env.Strophe.NS.MARKERS,
+          'id': id
+        });
+
+        _converse.api.send(stanza);
+    }
+
+    function notifyText(message, title, notifyId, callback) {
+
+        if (!notifyId) notifyId = Math.random().toString(36).substr(2, 9);
+
+        var prompt = new Notification(title, {
+            body: message,
+            requireInteraction: true
+        });
+
+        prompt.onclick = function (event) {
+            event.preventDefault();
+            if (callback) callback(notifyId, 0);
+        }
+
+        prompt.onclose = function (event) {
+            event.preventDefault();
+            if (callback) callback(notifyId, 1);
+        }
+    }
+}));
\ No newline at end of file

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://cdn.startinblox.com/converse/dist/converse.min.js';
+import 'https://cdn.startinblox.com/converse/dist/emojis.js';
+import 'https://unpkg.com/@startinblox/component-chat/plugins/converse-rai.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';
@@ -29,9 +30,9 @@ export const SibChat = {
       type: Boolean,
       default: true,
     },
-    localesUrl: {
+    i18n: {
       type: String,
-      default: 'en',
+      default: 'fr',
     },
     boshServiceUrl: {
       type: String
@@ -49,8 +50,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.5/themes/converse-hd.css'
+        'https://cdn.startinblox.com/converse/dist/converse.min.css',
+        'https://unpkg.com/@startinblox/component-chat/themes/converse-hd.css'
       ));
       if (window.converse_sib === undefined) {
         this.initializeConverse();
@@ -144,6 +145,19 @@ export const SibChat = {
       }
     });
 
+    // Initialize rai plugin
+    converse.plugins.add('conversejs-rai', {
+      initialize() {
+        this._converse.api.listen.on('chatRoomActivityIndicators', function (jid) {
+          window.dispatchEvent(new CustomEvent('newMessage', {
+            detail: {
+              jid: jid
+            }
+          }));
+        });
+      }
+    });
+
     // Initialize deferred resolution plugin
     converse.plugins.add('conversejs-sib-focused', {
       initialize() {
@@ -179,13 +193,14 @@ export const SibChat = {
     const idToken = await document.querySelector('sib-auth').getUserIdToken();
 
     converse.initialize({
+      'assets_path': 'https://cdn.startinblox.com/converse/dist/',
       'authentication': this.element.dataset.authentication,
       'password': idToken,
       'allow_chat_pending_contacts': true,
       'allow_non_roster_messaging': true,
       'allow_dragresize': false,
       'allow_logout': false,
-      'archived_messages_page_size': 200,
+      'archived_messages_page_size': 30,
       'auto_list_rooms': true,
       'auto_login': this.element.dataset.autoLogin === 'true',
       'auto_join_on_invite': true,
@@ -193,9 +208,9 @@ export const SibChat = {
       'auto_register_muc_nickname': true,
       'bosh_service_url': this.element.dataset.boshServiceUrl,
       "clear_messages_on_reconnection": false,
-      'i18n': 'en',
       'jid': jabberID.toLowerCase(),
-      'locales_url': this.element.dataset.localesUrl,
+      'i18n': this.element.dataset.i18n,
+      'loglevel': 'fatal',
       'message_archiving': 'always',
       'message_archiving_timeout': 60000,
       'muc_disable_slash_commands': true,
@@ -209,7 +224,7 @@ export const SibChat = {
       'show_desktop_notifications': false,
       // 'use_system_emojis': false,
       // 'show_send_button': true,
-      'sounds_path': 'https://cdn.happy-dev.fr/conversejs/sounds/',
+      'sounds_path': 'https://cdn.startinblox.com/converse/sounds/',
       'view_mode': 'fullscreen',
       'visible_toolbar_buttons': {
         call: false,
@@ -218,7 +233,7 @@ export const SibChat = {
         fileupload: false,
         toggle_occupants: false
       },
-      'whitelisted_plugins': ['conversejs-sib-connected', 'conversejs-sib-focused', 'conversejs-changechat'],
+      'whitelisted_plugins': ['rai', 'conversejs-sib-connected', 'conversejs-sib-focused', 'conversejs-changechat', 'conversejs-rai'],
     });
 
     converse_sib.loaded_deferred.resolve();

themes/converse-hd.css

@@ -57,36 +57,81 @@
 #conversejs,
 #conversejs-bg,
 .converse-fullscreen {
-  --subdued-color-lighten-25-percent: transparent;
-  --yellow: #F9C118;
-  --hd-violet: #6259F5;
-  --hd-subdued-color: #9BA0A7;
-  --hd-chat-mention: #FFD759;
-  --hd-chat-correcting-color: #FFF2C7;
-  --hd-hightlight-color: #FEE287;
-  --badge-group-color: #9BA0A7;
-  --link-color-hd: var(--hd-violet);
-  --text-color: #4a4a4a;
-  --text-color-lighten-15-percent: #898F95;
-  --message-text-color: #7A7F85;
-  --chat-textarea-color: #7A7F85;
-  --chat-head-color: #e3e7eb;
-  --chatroom-head-color: var(--chat-head-color);
-  --message-input-color: var(--chatroom-head-color);
-  --chat-correcting-color: var(--hd-chat-correcting-color);
-  --chat-info-color: #ABAABA;
-  --progress-bar-color: #3C3F57;
+  --color-chat-white: #FFFFFF;
+  --color-chat-primary: #FFB700;
+  --color-chat-complementary: #6259E5;
+  --color-chat-secondary: #3C3F57;
+  --color-chat-complementary-darken: #36383B;
+  --color-chat-grey-1: #7A7F85;
+  --color-chat-grey-2: #9BA0A7;
+  --color-chat-grey-3: #e3e7eb;
+  --color-chat-subdued-color-lighten-25-percent: transparent;
+  --color-chat-subdued-color: #9BA0A7;
+  --color-chat-mention: #FFD759;
+  --color-chat-correcting-color: #FFF2C7;
+  --color-chat-hightlight-color: #FEE287;
+  --color-chat-badge-group: #9BA0A7;
+  --color-chat-text: #4A4A4A;
+  --color-chat-text-lighten-15-percent: #898F95;
+  --color-chat-head: var(--color-chat-grey-3);
+  --color-chat-info: #ABAABA;
+  --color-chat-avatar-background: lightgrey;
+
+  --color-chat-mention-text: var(--color-chat-white);
+  --color-chat-mention: var(--color-chat-primary);
+  --color-chat-mention-self-text: var(--color-chat-white);
+  --color-chat-mention-self: var(--color-chat-complementary);
+  --color-chat-message-author: var(--color-chat-secondary);
+  --color-chat-progress-bar: var(--color-color-chat-secondary);
+  --color-chat-link: var(--color-chat-complementary);
+  --color-chat-message-text: var(--color-chat-grey-1);
+  --color-chat-textarea: var(--color-chat-grey-1);
+  --color-chat-subdued-color: var(--color-chat-grey-2);
+  --color-chat-head: var(--color-chat-grey-3);
+  --color-chat-chatroom-head: var(--color-chat-grey-3);
+
+  --color-chat-message-input: var(--color-chat-chatroom-head);
+  --color-chat-correcting: var(--color-chat-correcting-color);
+  --color-chat-chatroom-correcting: var(--color-chat-correcting-color);
+  --color-chat-chatroom-badge-group-border: 1px solid var(--color-chat-primary);
+  --color-chat-chat-separator-border-bottom: 1px solid var(--color-chat-head);
+  --color-chat-chatroom-separator-border-bottom: 1px solid var(--color-chat-chatroom-head);
+  --color-chat-chatroom-correcting: var(--color-chat-correcting-color);
+  
+  --subdued-color-lighten-25-percent: var(--color-chat-subdued-color-lighten-25-percent);
+  --yellow: var(--color-chat-primary);
+  --hd-violet: var(--color-chat-complementary);
+  --hd-subdued-color: var(--color-chat-subdued-color);
+  --hd-chat-mention: var(--color-chat-mention);
+  --hd-chat-mention-text: var(--color-chat-mention-text);
+  --hd-chat-mention-self: var(--color-chat-mention-self);
+  --hd-chat-mention-self-text: var(--color-chat-mention-self-text);
+  --color-chat-msg-author: var(--color-chat-message-author);
+  --hd-chat-correcting-color: var(--color-chat-correcting-color);
+  --hd-hightlight-color: var(--color-chat-hightlight-color);
+  --badge-group-color: var(--color-chat-badge-group);
+  --link-color-hd: var(--color-chat-link);
+  --text-color: var(--color-chat-text);
+  --text-color-lighten-15-percent: var(--color-chat-text-lighten-15-percent);
+  --message-text-color: var(--color-chat-message-text);
+  --chat-textarea-color: var(--color-chat-textarea);
+  --chat-head-color: var(--color-chat-head);
+  --chatroom-head-color: var(--color-chat-chatroom-head);
+  --message-input-color: var(--color-chat-message-input);
+  --chat-correcting-color: var(--color-chat-correcting);
+  --chat-info-color: var(--color-chat-info);
+  --progress-bar-color: var(--color-chat-progress-bar);
   --normal-font: "Open Sans", sans-serif;
   --heading-font: "Open Sans", sans-serif;
   --branding-font: "Open Sans", sans-serif;
-  --chatroom-correcting-color: var(--hd-chat-correcting-color);
-  --chatroom-badge-group-border: 1px solid var(--yellow);
+  --chatroom-correcting-color: var(--color-chat-chatroom-correcting);
+  --chatroom-badge-group-border: var(--color-chat-chatroom-badge-group-border);
   --font-size: 15px;
-  --chat-separator-border-bottom: 1px solid var(--chat-head-color);
-  --chatroom-separator-border-bottom: 1px solid var(--chatroom-head-color);
+  --chat-separator-border-bottom: var(--color-chat-chat-separator-border-bottom);
+  --chatroom-separator-border-bottom: var(--color-chat-chatroom-separator-border-bottom);
   --avatar-border-radius: 50%;
-  --avatar-background-color: lightgrey;
-  --chatroom-correcting-color: var(--hd-chat-correcting-color);
+  --avatar-background-color: var(--color-chat-avatar-background);
+  --chatroom-correcting-color: var(--color-chat-chatroom-correcting);
   --fullpage-chat-height: 100%;
 }
 
@@ -641,15 +686,15 @@
 #conversejs .message .mention {
   background: var(--hd-chat-mention);
   border-radius: 14px;
-  color: var(--message-text-color);
+  color: var(--hd-chat-mention-text);
   font-size: var(--font-size);
   font-weight: normal;
   padding: 1px 12px;
 }
 
 #conversejs .message .mention--self {
-  background: var(--hd-violet);
-  color: white;
+  background: var(--hd-chat-mention-self);
+  color: var(--hd-chat-mention-self-text);
   padding: 4px 12px;
 }
 
@@ -718,6 +763,7 @@
 }
 
 #conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
+  color: var(--color-chat-msg-author);
   font-size: 107.2%;
   font-weight: 600;
 }