[REF] mail : include real time, and replace Timeline features

This commit add instant messaging features in mail module to make it a real team collaboration tool. Lots of these new features will replace Timeleine view (which is not removed in this commit). Many files have been moved, split or created for a better structure.

- My Channels : A user can be member of channel (mail.channel). These are discussion group, but also an aggregate of notification. Setting a channel as document follower, it will receive all the message (of the chatter) in real time, as information stream.

- A new Inbox : this aims to replace the timeline view. The user will see its channels grouped by 'slot', and receive the message in real time. Jump to the form view, invite people, create private discussion group, talk directly to another employee, ... are the main features. Your message can still be starred. The 'Inbox' will only contain your needaction.

- Needaction concept : a needaction is a message calling you to do something. If you follow a document as a person, the posted message will be 'needaction' for you. It can also be a message where you are mention with a '@my_name' (this feature is not added in this commit).

- The chatter doesn't change so much. It still allow you to see the discussion about the document, to star some message, and treat your needaction.

- Chat : the only way to have a minified conversation is from the Inbox Client Action. It allow you to keep an eye on a channel when working on document.

- Compose Message : it is now common to the Inbox, and the chatter. It offers shortcode substitution, attachments management, and optional subtype.

- UI : the chat window has been clean, they have a new look now.

To do so,
- Chatter code have been completely rewrite, independently of timeline view
- Add 'bus' as mail dependency, to insure real time
- A mail.message is broadcasted on the bus channel (db, mail.channel, channel_id), and a channel header on (db, res.partner, partner_id)
- Extracting mail_thread mixin used for Chatter and ChatMailThread (Inbox client action). This uniformize the programming structure with the server side
- Clean CSS style and use LESS instead of CSS
- Define a new messafe format (message_format method in mail_message.py), compatible with fetching and broadcasting
- Apply guideline coding conventions

This commit also break the module im_livechat, since im_chat models don't exists anymore and will be fixed in the next commit.

Thanks to Thibault Delavallee (tde) for the long debates and precious advices, Richard Mathot (rim) for the support, Simon Lejeune (sle) for the client action layout, and the Usability Team (apr, lle, bst yti) for the long testing.

Conflicts:
	addons/mail/models/mail_thread.py

5 files changed, 594 insertions, 141 deletions

diff --git a/addons/mail/static/src/xml/mail_chat_backend.xml b/addons/mail/static/src/xml/mail_chat_backend.xml
new file mode 100644
index 00000000000..9dc42749767
--- /dev/null
+++ b/addons/mail/static/src/xml/mail_chat_backend.xml
@@ -0,0 +1,155 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <!-- Notification Counter of the Systray Menu -->
+    <t t-name="mail.chat.NotificationTopButton">
+        <li t-att-title='_t("Notifications")'>
+            <a href="#">
+                <i class="fa fa-comment"><t t-esc="widget.get('counter') || ''"/></i>
+            </a>
+        </li>
+    </t>
+
+    <!-- Add More / Search Box -->
+    <t t-name="mail.chat.AbstractAddMoreSearch">
+        <div class="o_mail_chat_add_more_search">
+            <a href="#" class="o_mail_chat_add_more_text"><t t-esc="widget.label"/></a>
+            <div class="o_mail_chat_add_more_search_bar" style="display: none;">
+                <input type="text" class="o_mail_chat_search_input"/>
+            </div>
+        </div>
+    </t>
+
+    <!-- PartnerInviteDialog : content of the dialog -->
+    <t t-name="mail.chat.PartnerInviteDialog">
+        <div class="o_mail_chat_partner_invite">
+            <input type="text" class="o_mail_chat_partner_invite_input" id="mail_search_partners"/>
+        </div>
+    </t>
+
+
+    <!--
+        ChatMailThread
+        Layout of the client action
+        param: widget : the widget (ChatMailThread)
+    -->
+    <t t-name="mail.chat.ChatMailThread">
+        <div class="o_mail_chat o_mail_thread">
+            <!-- Sidebar -->
+            <div class="o_mail_chat_sidebar">
+                <!-- Static channel list -->
+                <ul class="nav nav-pills nav-stacked">
+                    <li class="o_mail_chat_channel_item" data-channel-id="channel_inbox">
+                        <a href="#">@ Inbox
+                            <span class="badge pull-right o_mail_chat_needaction" data-channel-id="channel_inbox" t-att-style="((widget.get('needaction_inbox_counter') &gt; 0) ? 'display:block;' : 'display:none;')">
+                                <t t-esc="widget.get('needaction_inbox_counter')"/>
+                            </span>
+                        </a>
+                    </li>
+                    <li class="o_mail_chat_channel_item" data-channel-id="channel_starred">
+                        <a href="#"><i class="fa fa-star-o"> Starred</i></a>
+                    </li>
+                </ul>
+                <!-- Channel list -->
+                <h4 class="o_mail_chat_sidebar_title"><t t-esc="_t('Channels')"/></h4>
+                <t t-call="mail.chat.ChatMailThread.channels">
+                    <t t-set="channel_slot" t-value="'channel_channel'"/>
+                </t>
+                <!-- Direct Message list (res.users)-->
+                <h4 class="o_mail_chat_sidebar_title"><t t-esc="_t('Direct Message')"/></h4>
+                <t t-call="mail.chat.ChatMailThread.partners"/>
+                <!-- Private Group list -->
+                <h4 class="o_mail_chat_sidebar_title"><t t-esc="_t('Private Group')"/></h4>
+                <t t-call="mail.chat.ChatMailThread.channels">
+                    <t t-set="channel_slot" t-value="'channel_private_group'"/>
+                </t>
+            </div>
+            <!-- Content -->
+            <div class="o_mail_chat_content">
+                <div class="o_mail_chat_messages">
+                    <div class="container-fluid o_mail_chat_messages_content">
+                        <t t-call="mail.chat.ChatMailThread.content"/>
+                    </div>
+                </div>
+                <div class="o_mail_chat_composer_wrapper">
+
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <!--
+        List of channel in the sidebar
+        param: channel_slot : the name of the channel slot
+        param: widget : the widget (ChatMailThread)
+    -->
+    <t t-name="mail.chat.ChatMailThread.channels">
+        <ul t-att-class="'nav nav-pills nav-stacked o_mail_chat_channel_slot_' + channel_slot" data-toggle="pill">
+            <t t-foreach="widget.get(channel_slot)" t-as="channel">
+                <li t-att-class="'o_mail_chat_channel_item ' + (channel.message_needaction_counter &gt; 0 ? 'o_mail_chat_channel_unread' : ' ')" t-att-data-channel-id="channel.id" role="presentation">
+                    <a t-att-href="_.str.sprintf('#active_id=%s&amp;action=%s', channel.id, widget.action.id)">
+                        <t t-esc="channel.name"/>
+                        <span class="badge pull-right o_mail_chat_needaction" t-att-data-channel-id="channel.id" t-att-style="((channel.message_needaction_counter &gt; 0) ? 'display:block;' : 'display:none;')">
+                            <t t-esc="channel.message_needaction_counter"/>
+                        </span>
+                    </a>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <!--
+        List of Partners of Direct Message channel
+        param: widget : the widget (ChatMailThread)
+    -->
+    <t t-name="mail.chat.ChatMailThread.partners">
+        <ul class="nav nav-pills nav-stacked o_mail_chat_channel_slot_partners">
+            <t t-foreach="widget.get('partners')" t-as="partner">
+                <li class="o_mail_chat_partner_item" t-att-data-partner-id="partner.id" role="presentation">
+                    <a href="#">
+                        <i t-att-class="'fa ' + (partner.im_status == 'online' ? 'fa-circle' : 'fa-circle-o')"/>
+                        <t t-esc="partner.name"/>
+                        <span class="fa fa-times pull-right o_mail_chat_partner_unpin" t-att-title="_t('Untoggle')" t-att-data-partner-id="partner.id"/>
+                    </a>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <!--
+        Channel content (messages) or 'Help Message' of the client action
+        param: widget : the widget (ChatMailThread)
+    -->
+    <t t-name="mail.chat.ChatMailThread.content">
+        <t t-if="widget.get('messages').length">
+            <t t-call="mail.Thread.messages"/>
+        </t>
+        <t t-if="!widget.get('messages').length">
+            <div class="o_mail_chat_help_message">
+                <t t-raw="widget.help_message"/>
+            </div>
+        </t>
+    </t>
+
+    <!--
+        Buttons of the Control Panel
+    -->
+    <t t-name="mail.chat.ControlButtons">
+        <div class="o_mail_chat_cp_buttons">
+            <button type="button" class="btn btn-primary btn-sm o_mail_chat_button_invite" t-att-title='_t("Invite people")'>Invite</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_minimize" t-att-title='_t("Minimize the conversation")'>Minimize</button>
+            <div class="btn-group">
+                <button type="button" class="btn btn-default btn-sm dropdown-toggle o_mail_chat_button_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    More <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li class="o_mail_chat_button_unsubscribe"><a href="#">Unsubscribe</a></li>
+                    <li class="o_mail_chat_button_settings"><a href="#">Settings</a></li>
+                </ul>
+            </div>
+
+        </div>
+    </t>
+
+
+</templates>
diff --git a/addons/mail/static/src/xml/mail_chat_common.xml b/addons/mail/static/src/xml/mail_chat_common.xml
index eb479863b3e..745893c11e1 100644
--- a/addons/mail/static/src/xml/mail_chat_common.xml
+++ b/addons/mail/static/src/xml/mail_chat_common.xml
@@ -1,103 +1,92 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-<t t-name="im_chat.Conversation">
-    <div class="oe_im_chatview_header">
-        <span class="header_name"></span>
-        <span class="nbr_messages"/>
-        <span class="right_buttons">
-            <!-- options -->
-            <div t-if="widget.actions.length !== 0" class="btn-group button_option_group">
-                <span class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="fa fa-cogs"></i>
+
+    <t t-name="mail.chat.im.Conversation">
+        <div class="o_mail_chat_im_window openerp">
+            <div class="o_mail_chat_im_window_header">
+                <span class="o_mail_chat_im_window_header_name">
+                    <t t-raw="widget.get('session').name"/>
+                </span>
+                <span class="nbr_messages o_mail_chat_im_window_header_counter"/>
+                <span class="o_mail_chat_im_window_header_buttons">
+                    <div class="o_mail_chat_im_window_close">×</div>
                 </span>
-                <ul class="dropdown-menu" role="menu">
-                    <t t-foreach="widget.actions" t-as="action">
-                        <li t-att-class="action.class">
-                            <i t-att-class="action.icon_class"></i> <t t-esc="action.label"/>
-                        </li>
-                    </t>
-                </ul>
             </div>
-            <div class="oe_im_chatview_close">×</div>
-        </span>
-    </div>
-    <div class="oe_im_chatview_content">
-        <div class="oe_im_chatview_status"/>
-        <div class="oe_im_chatview_content_bubbles"></div>
-    </div>
-    <div class="oe_im_chatview_footer">
-        <input class="oe_im_chatview_input" t-att-placeholder="widget.inputPlaceholder" />
-    </div>
-</t>
-<t t-name="im_chat.Conversation_content">
-    <t t-foreach="_.keys(list)" t-as="date">
-        <div class="oe_im_chatview_date_separator">
-            <t t-esc="window.moment(date).format('LL')"/>
+            <div class="o_mail_chat_im_window_content">
+                <t t-call="mail.chat.im.Conversation.messages"/>
+            </div>
+            <div class="oe_im_chatview_footer o_mail_chat_im_window_footer">
+                <input class="o_mail_chat_im_window_input" t-att-placeholder="widget.options.placeholder"/>
+            </div>
         </div>
-        <t t-foreach="list[date]" t-as="bubble">
-            <t t-if="bubble[0].type === 'message'">
-                <t t-call="im_chat.Conversation_message_bubble">
-                    <t t-set="messages" t-value="bubble"/>
-                </t>
-            </t>
-            <t t-if="bubble[0].type === 'meta'">
-                <t t-call="im_chat.Conversation_technical_bubble">
-                    <t t-set="messages" t-value="bubble"/>
-                </t>
-            </t>
-        </t>
     </t>
-</t>
-<t t-name="im_chat.Conversation_message_bubble">
-    <div class="oe_im_chatview_message_bubble">
-        <div class="oe_im_chatview_clip">
-            <img class="oe_im_chatview_avatar" t-att-src="_.last(messages).from_id[2]"/>
-        </div>
-        <div class="oe_im_chatview_from"><t t-esc="_.last(messages).from_id[1]"/></div>
-        <div class="oe_im_chatview_bubble_list">
-            <t t-foreach="messages" t-as="m">
-                <div class="oe_im_chatview_bubble_item"><t t-raw="m.message"/></div>
+
+    <t t-name="mail.chat.im.Conversation.messages">
+        <div class="o_mail_chat_im_messages">
+            <t t-set="current_day" t-value="0"/>
+            <t t-foreach="widget.get('messages')"  t-as="message">
+                <div t-if="current_day != message.date.split(' ')[0]" class="row o_mail_chat_im_window_date_sperator">
+                    <t t-raw="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LL')"/>
+                    <t t-set="current_day" t-value="message.date.split(' ')[0]"/>
+                </div>
+                <div class="o_mail_chat_im_message">
+                    <div class="o_mail_chat_im_message_avatar">
+                        <t t-if="message.author_avatar">
+                            <img t-att-src="'data:image/png;base64,' + message.author_avatar" alt="avatar" class="img-responsive img-rounded"/>
+                        </t>
+                        <t t-if="!message.author_avatar">
+                            <img src="/mail/static/src/img/smiley/avatar.jpg" alt="avatar" class="img-responsive img-rounded"/>
+                        </t>
+                    </div>
+                    <div class="o_mail_chat_im_message_core">
+                        <!-- author -->
+                        <span class="text-muted">
+                            <t t-if="message.author_id">
+                                <strong><t t-esc="message.author_id[1]"/></strong> -
+                            </t>
+                            <t t-if="!message.author_id">
+                                <strong><t t-esc="message.email_from"/></strong> -
+                            </t>
+                            <span class="small"><t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/></span>
+                        </span>
+                        <!-- body -->
+                        <p class="o_mail_chat_im_message_body">
+                            <t t-if="message.body">
+                                <t t-raw="message.body"/> <!-- TODO JEM : tracking message and attachments ??!! -->
+                            </t>
+                            <t t-if="!message.body">
+                                <t t-call="mail.chat.im.Conversation.tracking_message"/>
+                            </t>
+                        </p>
+                        <!-- Attachments -->
+                        <div t-attf-class="o_mail_chat_im_message_attachment">
+                            <t t-foreach="message.attachment_ids" t-as="attachment">
+                                <a t-att-href='attachment.url' target="_blank">
+                                    <i t-att-class="attachment.fa_class" t-att-title="attachment.name || attachment.filename"/>
+                                </a>
+                            </t>
+                        </div>
+                    </div>
+                </div>
             </t>
         </div>
-        <div class="oe_im_chatview_time"><t t-esc="window.moment((_.last(messages).create_date)).format('LT')"/></div>
-    </div>
-</t>
-<t t-name="im_chat.Conversation_technical_bubble">
-    <div class="oe_im_chatview_technical_bubble">
-        <div class="oe_im_chatview_from"><t t-esc="_.last(messages).from_id[1]"/></div>
+    </t>
+
+    <t t-name="mail.chat.im.Conversation.tracking_message">
         <div>
-            <t t-foreach="messages" t-as="m">
-                <div><t t-raw="m.message"/></div>
-            </t>
+            <ul class="o_mail_message_tracking">
+                <t t-foreach='message.tracking_value_ids' t-as='value'>
+                    <li>
+                        <t t-esc="value.changed_field"/> :
+                        <t t-if="value.old_value">
+                            <span class="o_mail_message_tracking_value"> <t t-esc="value.old_value"/> </span>
+                            <span> <i class="fa fa-long-arrow-right"></i> </span>
+                        </t>
+                        <span class="o_mail_message_tracking_value"> <t t-esc="value.new_value"/> </span>
+                    </li>
+                </t>
+            </ul>
         </div>
-        <div class="oe_im_chatview_time"><t t-esc="window.moment((_.last(messages).create_date)).format('LT')"/></div>
-    </div>
-</t>
+    </t>
 
-<t t-name="im_chat.UserWidget">
-    <div class="oe_im_user ui-draggable">
-        <span class="oe_im_user_clip">
-            <img t-att-src="widget.get('image_url')" class="oe_im_user_avatar"/>
-        </span>
-        <span class="oe_im_user_name"><t t-esc="widget.get('name')"/></span>
-        <img t-att-src="'/im_chat/static/src/img/green.png'" t-att-data-im-user-id="widget.get('id')" class="oe_im_user_online"/>
-    </div>
-</t>
-<t t-name="im_chat.InstantMessaging">
-    <div class="oe_im">
-        <div class="oe_im_frame_header">
-            <i class="fa fa-search oe_im_search_icon"/>
-            <input class="oe_im_searchbox" placeholder="Search users..."/>
-        </div>
-        <div class="oe_im_users"></div>
-        <div class="oe_im_content"></div>
-    </div>
-</t>
-<t t-name="im_chat.ImTopButton">
-    <li t-att-title='_t("Display Instant Messaging")'>
-        <a href="#">
-              <i id="oe_topbar_imbutton_icon" class="fa fa-comments"/>
-        </a>
-    </li>
-</t>
-</templates>
+</templates>
\ No newline at end of file
diff --git a/addons/mail/static/src/xml/mail_chatter.xml b/addons/mail/static/src/xml/mail_chatter.xml
new file mode 100644
index 00000000000..2d2c150aaba
--- /dev/null
+++ b/addons/mail/static/src/xml/mail_chatter.xml
@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <t t-name="mail.chatter.ComposeMessage">
+        <div class="o_mail_chatter_compose_message">
+            <!-- Log a Note (subtypes)-->
+            <t t-if="widget.options.is_log">
+                <div class="form-group col-md-8">
+                    <span class="text-muted">
+                        Log an internal note which will not be sent to followers.<br/>
+                        Note that users reading the document can read internal notes.
+                    </span>
+                </div>
+                <!-- Internal subtypes -->
+                <div t-att-class="'form-group col-md-8 ' + (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
+                    <label class="col-sm-2 control-label">Activity</label>
+                    <div class="col-sm-4">
+                        <select class="form-control o_mail_chatter_compose_message_subtype_select">
+                            <t t-foreach="widget.options.internal_subtypes" t-as="subtype">
+                                <option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
+                            </t>
+                        </select>
+                    </div>
+                </div>
+            </t>
+            <!-- New Message (list of followers)-->
+            <t t-if="!widget.options.is_log">
+                <!-- Text for followers -->
+                <div class="form-group col-md-8 o_mail_chatter_compose_message_all_followers">
+                    <span class="text-muted">
+                        To:
+                        <t t-if="widget.options.record_name">
+                            Followers of
+                            <t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
+                        </t>
+                        <t t-if="!widget.options.record_name">
+                            Followers of this document
+                        </t>
+                    </span>
+                    <!-- List of followers -->
+                    <div class="o_mail_chatter_compose_message_suggested_partners">
+                        <t t-foreach='widget.suggested_partners' t-as='recipient'>
+                            <div class="checkbox">
+                                <label t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
+                                    <input type="checkbox"
+                                           t-att-checked="recipient.checked ? 'checked' : undefined"
+                                           t-att-data-fullname="recipient.full_name"/>
+                                    <t t-esc="recipient.name"/>
+                                    <t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
+                                    <t t-if="!recipient.email_address">(no email address)</t>
+                                </label>
+                            </div>
+                        </t>
+                    </div>
+                </div>
+            </t>
+            <!-- Composer Message -->
+            <t t-call="mail.ComposeMessage"/>
+        </div>
+    </t>
+
+
+    <t t-name="mail.chatter.ChatterMailThread">
+        <div class="container-fluid o_mail_chatter o_mail_thread">
+            <!-- Compose buttons ('new message' and 'log a note') -->
+            <div class="row o_mail_chatter_compose_buttons">
+                <div class="col-md-7">
+                    <div class="btn-group btn-group-sm">
+                        <button type="button" class="btn btn-primary o_mail_chatter_button_new_message" title="Send a message">
+                            New message
+                        </button>
+                    </div>
+                    <t t-if="widget.options.display_log_button">
+                        <span class="text-muted">or</span>
+                        <div class="btn-group btn-group-sm">
+                            <button class="btn btn-link btn-small o_mail_chatter_button_log_note" title="Log a note. Followers will not be notified.">
+                                Log an internal note
+                            </button>
+                        </div>
+                    </t>
+                </div>
+            </div>
+            <!-- wrap div for ChatterMailComposeMessage -->
+            <div class="row o_mail_chatter_compose_message_wrap" style="display:none;">
+
+            </div>
+
+            <!-- Message list -->
+            <div class="row">
+                <div class="col-md-10 col-md-offset-1 o_mail_chatter_messages">
+                    <t t-call="mail.chatter.ChatterMailThread.messages"/>
+                </div>
+            </div>
+
+            <div t-if="widget.options.display_show_more_message" class="o_mail_chatter_show_more_message text-muted">
+                ----------- Show more message -----------
+            </div>
+        </div>
+    </t>
+
+    <t t-name="mail.chatter.ChatterMailThread.messages">
+        <t t-if="widget.get('messages').length">
+            <t t-call="mail.Thread.messages"/>
+        </t>
+        <t t-if="!widget.get('messages').length">
+            No Messages.
+        </t>
+    </t>
+
+    <!--
+    ComposeMessage.ButtonTopBar
+    render of the button on the user bar for open wizard compose message
+    -->
+    <t t-name="mail.ComposeMessageTopButton">
+        <li title='Compose new Message' class="oe_topbar_item oe_topbar_compose_full_email">
+            <a href="#">
+                <i class="fa fa-envelope-o fa-fw"></i>
+            </a>
+        </li>
+    </t>
+
+
+</templates>
diff --git a/addons/mail/static/src/xml/mail_followers.xml b/addons/mail/static/src/xml/mail_followers.xml
index dd6d9883abd..b7548f861fd 100644
--- a/addons/mail/static/src/xml/mail_followers.xml
+++ b/addons/mail/static/src/xml/mail_followers.xml
@@ -2,76 +2,76 @@
 <templates>
 
 <!--
-    followers main template
+    Mail Follower (root template)
     Template used to display the followers, the actions and the subtypes in a record.
-    -->
-<div t-name="mail_followers" class="o_timeline_followers">
-    <div t-attf-class="btn-group-sm o_timeline_follower_title_box">
-        <button t-attf-class="btn btn-default dropdown-toggle o_timeline_partner_list" 
-                data-toggle="dropdown" aria-expanded="false">
-            <span class="o_timeline_follower_title">Followers</span> 
-            <span class="caret"></span>
-        </button>
-        <ul class="dropdown-menu o_timeline_follower_list" role="menu"></ul>
-    </div>
-    <div class="oe_actions">
-        <div t-attf-class="btn-group-sm o_timeline_subtype_list">
-            <button class="btn btn-default o_timeline_follower o_timeline_notfollow">
-                <span class="o_timeline_follow">Follow</span>
-                <span class="fa fa-times o_timeline_unfollow" aria-hidden="true"> Unfollow</span>
-                <span class="fa fa-check o_timeline_following" aria-hidden="true"> Following</span>
-            </button>
-            <button t-attf-class="btn btn-default dropdown-toggle o_timeline_sbtp_list" 
+-->
+<t t-name="mail.Followers">
+    <div class="o_timeline_followers">
+        <div t-attf-class="btn-group-sm o_timeline_follower_title_box">
+            <button t-attf-class="btn btn-default dropdown-toggle o_timeline_partner_list"
                     data-toggle="dropdown" aria-expanded="false">
+                <span class="o_timeline_follower_title">Followers</span>
                 <span class="caret"></span>
             </button>
-            <ul class="dropdown-menu oe_subtype" role="menu"></ul>
+            <ul class="dropdown-menu o_timeline_follower_list" role="menu"></ul>
+        </div>
+        <div class="oe_actions">
+            <div t-attf-class="btn-group-sm o_timeline_subtype_list">
+                <button class="btn btn-default o_timeline_follower o_timeline_notfollow">
+                    <span class="o_timeline_follow">Follow</span>
+                    <span class="fa fa-times o_timeline_unfollow" aria-hidden="true"> Unfollow</span>
+                    <span class="fa fa-check o_timeline_following" aria-hidden="true"> Following</span>
+                </button>
+                <button t-attf-class="btn btn-default dropdown-toggle o_timeline_sbtp_list"
+                        data-toggle="dropdown" aria-expanded="false">
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu oe_subtype" role="menu"></ul>
+            </div>
         </div>
-
-        <!--<t t-if="widget.comment">
-            <h5 class="oe_comment"><t t-raw="widget.comment"/></h5>
-        </t>-->
     </div>
-</div>
+</t>
 
 <!--
-    followers.partner template
+    Mail Followers Partner template
     Template used to display a partner following the record
-    -->
-<li t-name="mail_followers_partner" class='oe_partner'>
-    <span> <img class="oe_mail_thumbnail oe_mail_frame" t-att-src="record.avatar_url"/> </span>
-    <span class="oe_partner_name"> 
-        <a t-attf-href="#model=res.partner&amp;id=#{record.id}" 
-           t-att-title="record.name"
-           t-att-data-res-model="record.res_model"
-           t-att-data-res-id="record.res_id"
-           t-att-data-id="record.id">
-            <t t-esc="record.name"/></a>
-    </span>
-    <i t-if="record.is_editable and (widget.records_length &gt; 1)" 
-       class="oe_edit_subtype fa fa-pencil oe_hidden" title="Edit subscription" 
-       t-att-data-id="record.id"/>
-    <i t-if="widget.view_is_editable" class="oe_remove_follower fa fa-remove" 
-       title="Remove this follower"/>
-</li>
+-->
+<t t-name="mail.Followers.partner">
+    <li class='oe_partner'>
+        <span> <img class="oe_mail_thumbnail oe_mail_frame" t-att-src="record.avatar_url"/> </span>
+        <span class="oe_partner_name">
+            <a t-attf-href="#model=res.partner&amp;id=#{record.id}"
+               t-att-title="record.name"
+               t-att-data-res-model="record.res_model"
+               t-att-data-res-id="record.res_id"
+               t-att-data-id="record.id">
+                <t t-esc="record.name"/></a>
+        </span>
+        <i t-if="record.is_editable and (widget.records_length &gt; 1)"
+           class="oe_edit_subtype fa fa-pencil oe_hidden" title="Edit subscription"
+           t-att-data-id="record.id"/>
+        <i t-if="widget.view_is_editable" class="oe_remove_follower fa fa-remove"
+           title="Remove this follower"/>
+    </li>
+</t>
 
-<t t-name="mail_followers_add_more">
-    <li t-if="widget.view_is_editable" class="oe_invite"> 
+<t t-name="mail.Followers.add_more">
+    <li t-if="widget.view_is_editable" class="oe_invite">
         <a href="#"> Add followers </a>
     </li>
     <li t-if="widget.view_is_editable and (widget.followers.length > 0)" class="divider"></li>
 </t>
 
 <!--
-    followers.subtype template
+    Mail Followers Subtype template
     Template used to display message subtypes of a follower subscription
 -->
-<t t-name="mail_followers_subtype"> 
+<t t-name="mail.Followers.subtype">
     <li class="oe_subtype">
-        <input type="checkbox" t-att-checked="record.followed" 
+        <input type="checkbox" t-att-checked="record.followed"
                t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
                t-att-data-id="record.id" t-att-name="record.name" class="o_timeline_msg_subtype_check"/>
-   
+
         <label t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
             <t t-raw="record.name"/>
         </label>
diff --git a/addons/mail/static/src/xml/mail_thread.xml b/addons/mail/static/src/xml/mail_thread.xml
new file mode 100644
index 00000000000..10baacc0577
--- /dev/null
+++ b/addons/mail/static/src/xml/mail_thread.xml
@@ -0,0 +1,186 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <!--
+        Mail Composer Message : input with 2 buttons (emoji and attachment)
+    -->
+    <t t-name="mail.ComposeMessage">
+        <div class="form-group col-md-12 o_mail_compose_message">
+            <!-- input text : depending on the display_mode option -->
+            <div t-att-class="widget.options.display_mode === 'chat' ? 'input-group o_mail_compose_message_mode_chat' : 'o_mail_compose_message_mode_mail'">
+                <t t-if="widget.options.display_mode === 'chat'">
+                    <input type="text" class="form-control o_mail_compose_message_input" placeholder="Write something" name="message" id="send_message"/>
+                </t>
+                <t t-if="widget.options.display_mode === 'mail'">
+                    <textarea class="form-control o_mail_compose_message_input" placeholder="Write something" name="message" id="send_message"/>
+                </t>
+                <span class="input-group-btn o_mail_compose_message_button_group">
+                    <button t-if="widget.options.display_mode === 'mail'" class="btn btn-primary o_mail_compose_message_button_send" type="button">
+                        Send
+                    </button>
+                    <button class="btn btn-default o_mail_compose_message_button_emoji" type="button" data-toggle="popover">
+                        <i class="fa fa-smile-o"/>
+                    </button>
+                    <button class="btn btn-default o_mail_compose_message_button_attachment" type="button" data-toggle="popover">
+                        <i class="fa fa-paperclip"/>
+                    </button>
+                </span>
+            </div>
+
+            <span class="o_mail_attachment_file hide">
+                <t t-call="HiddenInputFile">
+                    <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                    <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
+                    <input type="hidden" name="model" value="mail.compose.message"/>
+                    <input type="hidden" name="id" value="0"/>
+                    <input type="hidden" name="session_id" t-att-value="widget.session.session_id"/>
+                </t>
+            </span>
+            <span class="o_mail_compose_message_emoji"></span>
+
+            <div class="o_mail_compose_message_attachment_list"></div>
+        </div>
+    </t>
+
+    <t t-name="mail.ComposeMessage.emoji">
+        <div class="o_mail_compose_message_emoji_content">
+            <t t-foreach="widget.emoji_list" t-as="emoji">
+                <span t-att-data-emoji="emoji.source" class="o_mail_compose_message_emoji_img" t-att-title="emoji.description">
+                    <t t-raw="emoji.substitution"/>
+                </span>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.ComposeMessage.attachments">
+        <div class="o_mail_chat_im_attachment_files">
+            <t t-foreach="widget.get('attachment_ids')" t-as='attachment'>
+                <t t-if="attachment.file_type_icon !== 'webimage'">
+                    <div t-attf-class="o_mail_attachment #{attachment.upload ? 'o_mail_uploading' : ''}">
+                        <a t-att-href='attachment.url' target="_blank">
+                            <img t-att-src="'/mail/static/src/img/mimetypes/' + (attachment.file_type_icon || 'unknown') + '.png'"></img>
+                            <div class='o_mail_attachment_name'><t t-raw="attachment.name"/></div>
+                        </a>
+                        <div class="o_mail_attachment_delete">
+                            <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
+                        </div>
+                        <div class="o_mail_attachment_progress_bar">
+                            Uploading
+                        </div>
+                    </div>
+                </t>
+                <t t-if="attachment.file_type_icon === 'webimage'">
+                    <div t-attf-class="o_mail_attachment o_mail_attachment_preview #{attachment.upload ? 'o_mail_uploading' : ''}">
+                        <a t-att-href='attachment.url' target="_blank">
+                            <img t-att-src="_.str.sprintf('/web/binary/image?model=ir.attachment&amp;field=datas&amp;id=%s', attachment.id)"/>
+                            <div class='o_mail_attachment_name'><t t-raw='attachment.name'/></div>
+                        </a>
+                        <div class="o_mail_attachment_delete">
+                            <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
+                        </div>
+                        <div class="o_mail_attachment_progress_bar">
+                            Uploading
+                        </div>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+
+    <!--
+        Message Thread
+    -->
+    <t t-name="mail.Thread.messages">
+        <t t-set="current_day" t-value="0"/>
+        <t t-foreach="widget.get('messages')" t-as="message">
+            <div t-if="current_day != message.date.split(' ')[0]" class="row o_mail_thread_date_separator">
+                <div class="o_mail_thread_date_wrapper">
+                    <div class="o_mail_thread_date_separator_title">
+                        <t t-raw="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LL')"/>
+                    </div>
+                </div>
+                <t t-set="current_day" t-value="message.date.split(' ')[0]"/>
+            </div>
+            <div class="row o_mail_thread_message" t-att-data-message-id="message.id">
+                <div class="col-md-1 col-sm-1 o_mail_thread_message_avatar">
+                    <t t-if="message.author_avatar">
+                        <img t-att-src="'data:image/png;base64,' + message.author_avatar" alt="avatar" class="o_mail_thread_avatar img-rounded"/>
+                    </t>
+                    <t t-if="!message.author_avatar">
+                        <img t-if="message.message_type == 'email' &amp;&amp; (!message.author_id || !message.author_id[0]) &amp;&amp; message.email_from" src="/mail/static/src/img/email_icon.png" alt="avatar" class="o_mail_thread_avatar img-rounded"/>
+                        <img t-if="message.message_type == 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0]) &amp;&amp; !message.email_from" t-att-src="'/web/binary/image?model=res.partner&amp;field=image_small&amp;id=' + message.author_id[0]" class="o_mail_thread_avatar img-rounded"/>
+                        <img t-if="message.message_type !== 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0])" t-att-src="'/web/binary/image?model=res.partner&amp;field=image_small&amp;id=' + message.author_id[0]" class="o_mail_thread_avatar img-rounded"/>
+                        <img t-if="message.message_type !== 'email' &amp;&amp; (!message.author_id || !message.author_id[0])" src="/mail/static/src/img/smiley/avatar.jpg" class="o_mail_thread_avatar img-rounded"/>
+                    </t>
+                </div>
+                <div t-att-class="'col-md-10 col-sm-10 o_mail_thread_message_core ' + 'o_mail_thread_message_type_' + message.message_type + ' ' + (message.is_note ? 'o_mail_thread_message_subtype_note' : '')">
+                    <!-- actions -->
+                    <span class="pull-right o_mail_thread_message_actions">
+                        <i t-if="message.is_needaction &amp;&amp; widget.options.display_needaction_button" class="fa fa-check o_mail_thread_message_needaction" t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>
+                        <i t-att-class="'fa fa-star-o fa-lg o_mail_thread_message_star ' + (message.is_starred ? 'o_mail_message_starred' : '')" t-att-data-message-id="message.id" t-att-title="_t('Mark as Todo')"/>
+                    </span>
+
+                    <p class="text-muted o_mail_thread_message_info">
+                        <t t-if="message.is_note">
+                            Note by
+                        </t>
+                        <!-- author : partner or email_from -->
+                        <t t-if="message.author_id">
+                            <strong class="o_mail_redirect" data-oe-model="res.partner" t-att-data-oe-id="message.author_id[0]"><t t-esc="message.author_id[1]"/></strong> -
+                        </t>
+                        <t t-if="!message.author_id">
+                            <strong><t t-esc="message.email_from"/></strong> -
+                        </t>
+                        <small t-att-title="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LLL')">
+                            <t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/>
+                        </small>
+                        <t t-if="message.model &amp;&amp; (message.model != 'mail.channel') &amp;&amp; widget.options.display_document_link">
+                            on <a class="o_mail_redirect" t-att-data-oe-model="message.model" t-att-data-oe-id="message.res_id" href="#"><t t-esc="message.record_name"/></a>
+                        </t>
+                    </p>
+                    <!-- tracking message-->
+                    <t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">
+                        <t t-call="mail.Thread.tracking_message">
+                            <t t-set="message" t-value="message"/>
+                        </t>
+                    </t>
+                    <!-- normal message -->
+                    <t t-if="!(message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0)">
+                        <t t-raw="message.body"/>
+                    </t>
+                    <!-- Attachments -->
+                    <t t-foreach="message.attachment_ids" t-as="attachment">
+                        <div t-attf-class="o_mail_attachment">
+                            <a t-att-href='attachment.url' target="_blank">
+                                 <img t-att-src="'/mail/static/src/img/mimetypes/' + (attachment.file_type_icon || 'unknown') + '.png'"></img>
+                                <div class='o_mail_attachment_name'><t t-raw='attachment.name'/></div>
+                            </a>
+                        </div>
+                    </t>
+                </div>
+
+                <div class="col-md-1">
+                </div>
+            </div>
+        </t>
+    </t>
+
+    <t t-name="mail.Thread.tracking_message">
+        <div>
+            <ul class="o_mail_thread_message_tracking">
+                <t t-foreach='message.tracking_value_ids' t-as='value'>
+                    <li>
+                        <t t-esc="value.changed_field"/> :
+                        <t t-if="value.old_value">
+                            <span class="o_mail_message_tracking_value"> <t t-esc="value.old_value"/> </span>
+                            <span> <i class="fa fa-long-arrow-right"></i> </span>
+                        </t>
+                        <span class="o_mail_message_tracking_value"> <t t-esc="value.new_value"/> </span>
+                    </li>
+                </t>
+            </ul>
+        </div>
+    </t>
+
+</templates>