[IMP] im_livechat,mail: mention in backend chat windows

The BasicComposer widget is now used in chat windows, which enables the mention
feature. This is only for the backend, as for the livechat windows in the
frontend, the composer is still a simple input.

Classname 'o_chat_input' has been renamed into 'o_chat_composer' (the root
classname of the basic composer) for uniformity in the JS and LESS code of
chat windows.

8 files changed, 73 insertions, 40 deletions

diff --git a/addons/mail/static/src/js/chat_window.js b/addons/mail/static/src/js/chat_window.js
index 9ffa0ed8c28..da8900b8230 100644
--- a/addons/mail/static/src/js/chat_window.js
+++ b/addons/mail/static/src/js/chat_window.js
@@ -16,9 +16,9 @@ var HEIGHT_FOLDED = '28px';
 return Widget.extend({
     template: "mail.ChatWindow",
     events: {
-        "click .o_chat_input": "focus_input", // focus even if jquery's blockUI is enabled
-        "keydown .o_chat_input": "on_keydown",
-        "keypress .o_chat_input": "on_keypress",
+        "click .o_chat_composer": "focus_input", // focus even if jquery's blockUI is enabled
+        "keydown .o_chat_composer": "on_keydown",
+        "keypress .o_chat_composer": "on_keypress",
         "click .o_chat_window_close": "on_click_close",
         "click .o_chat_title": "on_click_fold",
     },
@@ -40,7 +40,7 @@ return Widget.extend({
         this.is_hidden = false;
     },
     start: function () {
-        this.$input = this.$('.o_chat_input input');
+        this.$input = this.$('.o_composer_text_field');
         this.$header = this.$('.o_chat_header');
 
         this.thread = new ChatThread(this, {
diff --git a/addons/mail/static/src/js/composer.js b/addons/mail/static/src/js/composer.js
index dc90c2891e4..4da4bdf6774 100644
--- a/addons/mail/static/src/js/composer.js
+++ b/addons/mail/static/src/js/composer.js
@@ -494,7 +494,9 @@ var BasicComposer = Widget.extend({
             case $.ui.keyCode.ENTER:
             case $.ui.keyCode.UP:
             case $.ui.keyCode.DOWN:
-                this.mention_manager.proposition_navigation(event.which);
+                if (this.mention_manager.is_open()) {
+                    this.mention_manager.proposition_navigation(event.which);
+                }
                 break;
             // Otherwise, check if a mention is typed
             default:
diff --git a/addons/mail/static/src/js/extended_chat_window.js b/addons/mail/static/src/js/extended_chat_window.js
index 652a6236591..3a298b95a96 100644
--- a/addons/mail/static/src/js/extended_chat_window.js
+++ b/addons/mail/static/src/js/extended_chat_window.js
@@ -3,27 +3,44 @@ odoo.define('mail.ExtendedChatWindow', function (require) {
 
 var chat_manager = require('mail.chat_manager');
 var ChatWindow = require('mail.ChatWindow');
+var composer = require('mail.composer');
 
 return ChatWindow.extend({
     template: "mail.ExtendedChatWindow",
 
     start: function () {
         var self = this;
-        return this._super().then(function () {
-            if (self.options.thread_less) {
-                self.$el.addClass('o_thread_less');
-                self.$('.o_chat_search_input input')
-                    .autocomplete({
-                        source: function(request, response) {
-                            chat_manager.search_partner(request.term, 10).done(response);
-                        },
-                        select: function(event, ui) {
-                            self.trigger('open_dm_session', ui.item.id);
-                        },
-                    })
-                    .focus();
-            }
-        });
+        var def;
+        if (self.options.thread_less) {
+            this.$el.addClass('o_thread_less');
+            this.$('.o_chat_search_input input')
+                .autocomplete({
+                    source: function(request, response) {
+                        chat_manager.search_partner(request.term, 10).done(response);
+                    },
+                    select: function(event, ui) {
+                        self.trigger('open_dm_session', ui.item.id);
+                    },
+                })
+                .focus();
+        } else if (!self.options.input_less) {
+            var basic_composer = new composer.BasicComposer(self, {mention_partners_restricted: true});
+            basic_composer.on('post_message', self, function (message) {
+                this.trigger('post_message', message, this.channel_id);
+            });
+            basic_composer.once('input_focused', self, function () {
+                var channel = chat_manager.get_channel(this.channel_id);
+                var suggestions = chat_manager.get_mention_partner_suggestions(channel);
+                basic_composer.mention_set_prefetched_partners(suggestions);
+            });
+            def = basic_composer.replace(self.$('.o_chat_composer'));
+        }
+        return $.when(this._super(), def);
+    },
+    // Override on_keydown to only prevent jquery's blockUI to cancel event, but without sending
+    // the message on ENTER keydown as this is handled by the BasicComposer
+    on_keydown: function (event) {
+        event.stopPropagation();
     },
 });
 
diff --git a/addons/mail/static/src/js/window_manager.js b/addons/mail/static/src/js/window_manager.js
index eccafd08b0c..556e2f7b549 100644
--- a/addons/mail/static/src/js/window_manager.js
+++ b/addons/mail/static/src/js/window_manager.js
@@ -69,7 +69,6 @@ function open_chat (session, options) {
         });
 
         chat_session.window.on("post_message", null, function (message, channel_id) {
-            message.content = _.escape(message.content);
             chat_manager
                 .post_message(message, {channel_id: channel_id})
                 .then(function () {
@@ -117,7 +116,7 @@ function open_chat (session, options) {
                 }, 0); // setTimeout to prevent to execute handler on first scroll_to, which is asynchronous
                 if (options.passively) {
                     // mark first unread messages as seen when focusing the window, then on scroll to bottom as usual
-                    chat_session.window.$('.o_mail_thread, .o_chat_input').one('click', function () {
+                    chat_session.window.$('.o_mail_thread, .o_chat_composer').one('click', function () {
                         chat_manager.mark_channel_as_seen(session);
                     });
                 } else if (!display_state.chat_windows_hidden && !session.is_folded) {
diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index 12d7ae3e682..3109a267913 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -77,7 +77,7 @@
         }
     }
 
-    .o_chat_input {
+    .o_chat_composer {
         .o-flex(0, 0, auto);
         > input {
             padding: 5px;
diff --git a/addons/mail/static/src/less/extended_chat_window.less b/addons/mail/static/src/less/extended_chat_window.less
index 68e58ffab12..99a308241eb 100644
--- a/addons/mail/static/src/less/extended_chat_window.less
+++ b/addons/mail/static/src/less/extended_chat_window.less
@@ -1,19 +1,34 @@
-.o_chat_window.o_thread_less {
-    .o_chat_search_input {
-        .o-flex-display();
-        padding: 5px;
-        > span {
-            .o-flex(0, 0, auto);
+.o_chat_window {
+    &.o_thread_less {
+        .o_chat_search_input {
+            .o-flex-display();
+            padding: 5px;
+            > span {
+                .o-flex(0, 0, auto);
+            }
+            > input {
+                margin-left: 5px;
+                .o-flex(1, 1, 100%);
+            }
         }
-        > input {
-            margin-left: 5px;
-            .o-flex(1, 1, 100%);
+        .o_mail_thread {
+            background-color: lightgray;
+        }
+        .o_chat_composer {
+            display: none;
         }
     }
-    .o_mail_thread {
-        background-color: lightgray;
-    }
-    .o_chat_input {
-        display: none;
+
+    .o_chat_composer {
+        .o_composer {
+            border-top: 1px solid lightgray;
+            .o_composer_input textarea {
+                display: block;
+                padding: 5px;
+            }
+        }
+        .o_composer_attachments_list, .o_composer_buttons {
+            display: none;
+        }
     }
 }
diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index ef2d478b467..17a0a0166cc 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -12,8 +12,8 @@
             </div>
             <div class="o_chat_content">
             </div>
-            <div t-if='!widget.options.input_less' class="o_chat_input">
-                <input t-att-placeholder="widget.options.placeholder"/>
+            <div t-if='!widget.options.input_less' class="o_chat_composer">
+                <input class="o_composer_text_field" t-att-placeholder="widget.options.placeholder"/>
             </div>
         </div>
     </t>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 1c1f36499bb..a75708401ce 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -15,7 +15,7 @@
          </t>
          <div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
              <div class="o_composer_input">
-                 <textarea tabindex="2" placeholder="Write something..."/>
+                 <textarea class="o_composer_text_field" tabindex="2" placeholder="Write something..."/>
              </div>
              <t t-if="!widget.extended">
                  <div class="btn-group o_composer_buttons">