initial commit 2

13 files changed, 2021 insertions, 0 deletions

diff --git a/addons/mail/static/src/widgets/common.xml b/addons/mail/static/src/widgets/common.xml
new file mode 100644
index 00000000..9106f96f
--- /dev/null
+++ b/addons/mail/static/src/widgets/common.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <!--
+        AKU FIXME: use mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js component instead
+        @param {string} status
+    -->
+    <t t-name="mail.widgets.UserStatus">
+        <span>
+            <t t-if="status == 'online'">
+                <i class="o_mail_user_status o_user_online fa fa-circle" title="Online" role="img" aria-label="User is online"/>
+            </t>
+            <t t-if="status == 'away'">
+                <i class="fa fa-circle o_mail_user_status o_user_idle" title="Idle" role="img" aria-label="User is idle"/>
+            </t>
+            <t t-if="status == 'offline'">
+                <i class="o_mail_user_status fa fa-circle-o" title="Offline" role="img" aria-label="User is offline"/>
+            </t>
+            <t t-if="status == 'bot'">
+                <i class="o_mail_user_status o_user_online fa fa-heart" title="Bot" role="img" aria-label="User is a bot"/>
+            </t>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/widgets/discuss/discuss.js b/addons/mail/static/src/widgets/discuss/discuss.js
new file mode 100644
index 00000000..86f3ba32
--- /dev/null
+++ b/addons/mail/static/src/widgets/discuss/discuss.js
@@ -0,0 +1,397 @@
+odoo.define('mail/static/src/widgets/discuss/discuss.js', function (require) {
+'use strict';
+
+const components = {
+    Discuss: require('mail/static/src/components/discuss/discuss.js'),
+};
+const InvitePartnerDialog = require('mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js');
+
+const AbstractAction = require('web.AbstractAction');
+const { action_registry, qweb } = require('web.core');
+
+const { Component } = owl;
+
+const DiscussWidget = AbstractAction.extend({
+    template: 'mail.widgets.Discuss',
+    hasControlPanel: true,
+    loadControlPanel: true,
+    withSearchBar: true,
+    searchMenuTypes: ['filter', 'favorite'],
+    /**
+     * @override {web.AbstractAction}
+     * @param {web.ActionManager} parent
+     * @param {Object} action
+     * @param {Object} [action.context]
+     * @param {string} [action.context.active_id]
+     * @param {Object} [action.params]
+     * @param {string} [action.params.default_active_id]
+     * @param {Object} [options={}]
+     */
+    init(parent, action, options={}) {
+        this._super(...arguments);
+
+        // render buttons in control panel
+        this.$buttons = $(qweb.render('mail.widgets.Discuss.DiscussControlButtons'));
+        this.$buttons.find('button').css({ display: 'inline-block' });
+        this.$buttons.on('click', '.o_invite', ev => this._onClickInvite(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonMarkAllRead',
+            ev => this._onClickMarkAllAsRead(ev)
+        );
+        this.$buttons.on('click', '.o_mobile_new_channel', ev => this._onClickMobileNewChannel(ev));
+        this.$buttons.on('click', '.o_mobile_new_message', ev => this._onClickMobileNewMessage(ev));
+        this.$buttons.on('click', '.o_unstar_all', ev => this._onClickUnstarAll(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonSelectAll', ev => this._onClickSelectAll(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonUnselectAll', ev => this._onClickUnselectAll(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonModeration.o-accept', ev => this._onClickModerationAccept(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonModeration.o-discard', ev => this._onClickModerationDiscard(ev));
+        this.$buttons.on('click', '.o_widget_Discuss_controlPanelButtonModeration.o-reject', ev => this._onClickModerationReject(ev));
+
+        // control panel attributes
+        this.action = action;
+        this.actionManager = parent;
+        this.searchModelConfig.modelName = 'mail.message';
+        this.discuss = undefined;
+        this.options = options;
+
+        this.component = undefined;
+
+        this._lastPushStateActiveThread = null;
+    },
+    /**
+     * @override
+     */
+    async willStart() {
+        await this._super(...arguments);
+        this.env = Component.env;
+        await this.env.messagingCreatedPromise;
+        const initActiveId = this.options.active_id ||
+            (this.action.context && this.action.context.active_id) ||
+            (this.action.params && this.action.params.default_active_id) ||
+            'mail.box_inbox';
+        this.discuss = this.env.messaging.discuss;
+        this.discuss.update({ initActiveId });
+    },
+    /**
+     * @override {web.AbstractAction}
+     */
+    destroy() {
+        if (this.component) {
+            this.component.destroy();
+            this.component = undefined;
+        }
+        if (this.$buttons) {
+            this.$buttons.off().remove();
+        }
+        this._super(...arguments);
+    },
+    /**
+     * @override {web.AbstractAction}
+     */
+    on_attach_callback() {
+        this._super(...arguments);
+        if (this.component) {
+            // prevent twice call to on_attach_callback (FIXME)
+            return;
+        }
+        const DiscussComponent = components.Discuss;
+        this.component = new DiscussComponent();
+        this._pushStateActionManagerEventListener = ev => {
+            ev.stopPropagation();
+            if (this._lastPushStateActiveThread === this.discuss.thread) {
+                return;
+            }
+            this._pushStateActionManager();
+            this._lastPushStateActiveThread = this.discuss.thread;
+        };
+        this._showRainbowManEventListener = ev => {
+            ev.stopPropagation();
+            this._showRainbowMan();
+        };
+        this._updateControlPanelEventListener = ev => {
+            ev.stopPropagation();
+            this._updateControlPanel();
+        };
+
+        this.el.addEventListener(
+            'o-push-state-action-manager',
+            this._pushStateActionManagerEventListener
+        );
+        this.el.addEventListener(
+            'o-show-rainbow-man',
+            this._showRainbowManEventListener
+        );
+        this.el.addEventListener(
+            'o-update-control-panel',
+            this._updateControlPanelEventListener
+        );
+        return this.component.mount(this.el);
+    },
+    /**
+     * @override {web.AbstractAction}
+     */
+    on_detach_callback() {
+        this._super(...arguments);
+        if (this.component) {
+            this.component.destroy();
+        }
+        this.component = undefined;
+        this.el.removeEventListener(
+            'o-push-state-action-manager',
+            this._pushStateActionManagerEventListener
+        );
+        this.el.removeEventListener(
+            'o-show-rainbow-man',
+            this._showRainbowManEventListener
+        );
+        this.el.removeEventListener(
+            'o-update-control-panel',
+            this._updateControlPanelEventListener
+        );
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _pushStateActionManager() {
+        this.actionManager.do_push_state({
+            action: this.action.id,
+            active_id: this.discuss.activeId,
+        });
+    },
+    /**
+     * @private
+     * @returns {boolean}
+     */
+    _shouldHaveInviteButton() {
+        return (
+            this.discuss.thread &&
+            this.discuss.thread.channel_type === 'channel'
+        );
+    },
+    /**
+     * @private
+     */
+    _showRainbowMan() {
+        this.trigger_up('show_effect', {
+            message: this.env._t("Congratulations, your inbox is empty!"),
+            type: 'rainbow_man',
+        });
+    },
+    /**
+     * @private
+     */
+    _updateControlPanel() {
+        // Invite
+        if (this._shouldHaveInviteButton()) {
+            this.$buttons.find('.o_invite').removeClass('o_hidden');
+        } else {
+            this.$buttons.find('.o_invite').addClass('o_hidden');
+        }
+        // Mark All Read
+        if (
+            this.discuss.threadView &&
+            this.discuss.thread &&
+            this.discuss.thread === this.env.messaging.inbox
+        ) {
+            this.$buttons
+                .find('.o_widget_Discuss_controlPanelButtonMarkAllRead')
+                .removeClass('o_hidden')
+                .prop('disabled', this.discuss.threadView.messages.length === 0);
+        } else {
+            this.$buttons
+                .find('.o_widget_Discuss_controlPanelButtonMarkAllRead')
+                .addClass('o_hidden');
+        }
+        // Unstar All
+        if (
+            this.discuss.threadView &&
+            this.discuss.thread &&
+            this.discuss.thread === this.env.messaging.starred
+        ) {
+            this.$buttons
+                .find('.o_unstar_all')
+                .removeClass('o_hidden')
+                .prop('disabled', this.discuss.threadView.messages.length === 0);
+        } else {
+            this.$buttons
+                .find('.o_unstar_all')
+                .addClass('o_hidden');
+        }
+        // Mobile: Add channel
+        if (
+            this.env.messaging.device.isMobile &&
+            this.discuss.activeMobileNavbarTabId === 'channel'
+        ) {
+            this.$buttons
+                .find('.o_mobile_new_channel')
+                .removeClass('o_hidden');
+        } else {
+            this.$buttons
+                .find('.o_mobile_new_channel')
+                .addClass('o_hidden');
+        }
+        // Mobile: Add message
+        if (
+            this.env.messaging.device.isMobile &&
+            this.discuss.activeMobileNavbarTabId === 'chat'
+        ) {
+            this.$buttons
+                .find('.o_mobile_new_message')
+                .removeClass('o_hidden');
+        } else {
+            this.$buttons
+                .find('.o_mobile_new_message')
+                .addClass('o_hidden');
+        }
+        // Select All & Unselect All
+        const $selectAll = this.$buttons.find('.o_widget_Discuss_controlPanelButtonSelectAll');
+        const $unselectAll = this.$buttons.find('.o_widget_Discuss_controlPanelButtonUnselectAll');
+
+        if (
+            this.discuss.threadView &&
+            (
+                this.discuss.threadView.checkedMessages.length > 0 ||
+                this.discuss.threadView.uncheckedMessages.length > 0
+            )
+        ) {
+            $selectAll.removeClass('o_hidden');
+            $selectAll.toggleClass('disabled', this.discuss.threadView.uncheckedMessages.length === 0);
+            $unselectAll.removeClass('o_hidden');
+            $unselectAll.toggleClass('disabled', this.discuss.threadView.checkedMessages.length === 0);
+        } else {
+            $selectAll.addClass('o_hidden');
+            $selectAll.addClass('disabled');
+            $unselectAll.addClass('o_hidden');
+            $unselectAll.addClass('disabled');
+        }
+
+        // Moderation Actions
+        const $moderationButtons = this.$buttons.find('.o_widget_Discuss_controlPanelButtonModeration');
+        if (
+            this.discuss.threadView &&
+            this.discuss.threadView.checkedMessages.length > 0 &&
+            this.discuss.threadView.checkedMessages.filter(
+                message => !message.isModeratedByCurrentPartner
+            ).length === 0
+        ) {
+            $moderationButtons.removeClass('o_hidden');
+        } else {
+            $moderationButtons.addClass('o_hidden');
+        }
+
+        let title;
+        if (this.env.messaging.device.isMobile || !this.discuss.thread) {
+            title = this.env._t("Discuss");
+        } else {
+            const prefix =
+                this.discuss.thread.channel_type === 'channel' &&
+                this.discuss.thread.public !== 'private'
+                ? '#'
+                : '';
+            title = `${prefix}${this.discuss.thread.displayName}`;
+        }
+
+        this.updateControlPanel({
+            cp_content: {
+                $buttons: this.$buttons,
+            },
+            title,
+        });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickInvite() {
+        new InvitePartnerDialog(this, {
+            activeThreadLocalId: this.discuss.thread.localId,
+            messagingEnv: this.env,
+        }).open();
+    },
+    /**
+     * @private
+     */
+    _onClickMarkAllAsRead() {
+        this.env.models['mail.message'].markAllAsRead(this.domain);
+    },
+    /**
+     * @private
+     */
+    _onClickMobileNewChannel() {
+        this.discuss.update({ isAddingChannel: true });
+    },
+    /**
+     * @private
+     */
+    _onClickMobileNewMessage() {
+        this.discuss.update({ isAddingChat: true });
+    },
+    /**
+     * @private
+     */
+    _onClickModerationAccept() {
+        this.env.models['mail.message'].moderate(
+            this.discuss.threadView.checkedMessages,
+            'accept'
+        );
+    },
+    /**
+     * @private
+     */
+    _onClickModerationDiscard() {
+        this.discuss.update({ hasModerationDiscardDialog: true });
+    },
+    /**
+     * @private
+     */
+    _onClickModerationReject() {
+        this.discuss.update({ hasModerationRejectDialog: true });
+    },
+    /**
+     * @private
+     */
+    _onClickSelectAll() {
+        this.env.models['mail.message'].checkAll(
+            this.discuss.thread,
+            this.discuss.stringifiedDomain
+        );
+    },
+    /**
+     * @private
+     */
+    _onClickUnselectAll() {
+        this.env.models['mail.message'].uncheckAll(
+            this.discuss.thread,
+            this.discuss.stringifiedDomain
+        );
+    },
+    /**
+     * @private
+     */
+    _onClickUnstarAll() {
+        this.env.models['mail.message'].unstarAll();
+    },
+    /**
+     * @private
+     * @param {Object} searchQuery
+     */
+    _onSearch: function (searchQuery) {
+        this.discuss.update({
+            stringifiedDomain: JSON.stringify(searchQuery.domain),
+        });
+    },
+});
+
+action_registry.add('mail.widgets.discuss', DiscussWidget);
+
+return DiscussWidget;
+
+});
diff --git a/addons/mail/static/src/widgets/discuss/discuss.scss b/addons/mail/static/src/widgets/discuss/discuss.scss
new file mode 100644
index 00000000..2bed9b7c
--- /dev/null
+++ b/addons/mail/static/src/widgets/discuss/discuss.scss
@@ -0,0 +1,36 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_widget_Discuss {
+    display: flex;
+    flex: 0 0 100%;
+    flex-flow: column;
+    height: 100%;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_widget_Discuss {
+
+    .o_control_panel {
+        border-bottom: 0; // cancel default border, so that we only apply it on top of discuss content
+    }
+
+    .o_Discuss_content {
+        border-top: 1px solid darken($o-control-panel-background-color, 20%);
+    }
+
+    .o_Discuss.o-mobile {
+
+        &:not(.o-adding-item) {
+            border-top: 1px solid darken($o-control-panel-background-color, 20%);
+        }
+
+        &.o-adding-item .o_Discuss_mobileAddItemHeader {
+            border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
+        }
+    }
+}
diff --git a/addons/mail/static/src/widgets/discuss/discuss.xml b/addons/mail/static/src/widgets/discuss/discuss.xml
new file mode 100644
index 00000000..f8e6de37
--- /dev/null
+++ b/addons/mail/static/src/widgets/discuss/discuss.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <!--
+        @param {mail/static/src/widgets/discuss/discuss.js} widget
+    -->
+    <t t-name="mail.widgets.Discuss">
+        <div class="o_widget_Discuss"/>
+    </t>
+
+    <!-- @param {boolean} isMobile -->
+    <t t-name="mail.widgets.Discuss.DiscussControlButtons">
+        <div>
+            <button class="o_widget_Discuss_controlPanelButtonInvite o_invite o_hidden btn btn-primary" type="button" title="Invite people">Invite</button>
+            <button class="o_widget_Discuss_controlPanelButtonMarkAllRead o_hidden btn btn-secondary" type="button" title="Mark all as read">Mark all read</button>
+            <button class="o_widget_Discuss_controlPanelButtonUnstarAll o_unstar_all o_hidden btn btn-secondary" type="button" title="Unstar all messages">Unstar all</button>
+            <button class="o_widget_Discuss_controlPanelButtonMobileNewMessage o_mobile_new_message o_hidden btn btn-secondary" type="button" title="New Message">New Message</button>
+            <button class="o_widget_Discuss_controlPanelButtonMobileNewChannel o_mobile_new_channel o_hidden btn btn-secondary" title="New Channel" type="button">New Channel</button>
+            <button class="o_widget_Discuss_controlPanelButtonSelectAll btn btn-secondary o_hidden" title="Select all messages">Select All</button>
+            <button class="o_widget_Discuss_controlPanelButtonUnselectAll btn btn-secondary o_hidden" title="Unselect all messages">Unselect All</button>
+            <button class="o_widget_Discuss_controlPanelButtonModeration btn btn-secondary o_hidden o-accept" title="Accept selected messages">Accept</button>
+            <button class="o_widget_Discuss_controlPanelButtonModeration btn btn-secondary o_hidden o-reject" title="Reject selected messages">Reject</button>
+            <button class="o_widget_Discuss_controlPanelButtonModeration btn btn-secondary o_hidden o-discard" title="Discard selected messages">Discard</button>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js b/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js
new file mode 100644
index 00000000..6d9a051b
--- /dev/null
+++ b/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js
@@ -0,0 +1,124 @@
+odoo.define('mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js', function (require) {
+'use strict';
+
+const core = require('web.core');
+const Dialog = require('web.Dialog');
+
+const _lt = core._lt;
+const QWeb = core.qweb;
+
+/**
+ * Widget : Invite People to Channel Dialog
+ *
+ * Popup containing a 'many2many_tags' custom input to select multiple partners.
+ * Searches user according to the input, and triggers event when selection is
+ * validated.
+ */
+const PartnerInviteDialog = Dialog.extend({
+    dialog_title: _lt("Invite people"),
+    template: 'mail.widgets.DiscussInvitePartnerDialog',
+    /**
+     * @override {web.Dialog}
+     * @param {mail/static/src/widgets/discuss/discuss.js} parent
+     * @param {Object} param1
+     * @param {string} param1.activeThreadLocalId
+     * @param {Object} param1.messagingEnv
+     * @param {Object} param1.messagingEnv.store
+     */
+    init(parent, { activeThreadLocalId, messagingEnv }) {
+        const env = messagingEnv;
+        const channel = env.models['mail.thread'].get(activeThreadLocalId);
+        this.channelId = channel.id;
+        this.env = env;
+        this._super(parent, {
+            title: _.str.sprintf(this.env._t("Invite people to #%s"), owl.utils.escape(channel.displayName)),
+            size: 'medium',
+            buttons: [{
+                text: this.env._t("Invite"),
+                close: true,
+                classes: 'btn-primary',
+                click: ev => this._invite(ev),
+            }],
+        });
+    },
+    /**
+     * @override {web.Dialog}
+     * @returns {Promise}
+     */
+    start() {
+        this.$input = this.$('.o_input');
+        this.$input.select2({
+            width: '100%',
+            allowClear: true,
+            multiple: true,
+            formatResult: item => {
+                let status;
+                // TODO FIXME fix this, why do we even have an old widget here
+                if (item.id === 'odoobot') {
+                    status = 'bot';
+                } else {
+                    const partner = this.env.models['mail.partner'].findFromIdentifyingData({
+                        id: item.id,
+                    });
+                    status = partner.im_status;
+                }
+                const $status = QWeb.render('mail.widgets.UserStatus', { status });
+                return $('<span>').text(item.text).prepend($status);
+            },
+            query: query => {
+                this.env.models['mail.partner'].imSearch({
+                    callback: partners => {
+                        let results = partners.map(partner => {
+                            return {
+                                id: partner.id,
+                                label: partner.nameOrDisplayName,
+                                text: partner.nameOrDisplayName,
+                                value: partner.nameOrDisplayName,
+                            };
+                        });
+                        results = _.sortBy(results, 'label');
+                        query.callback({ results });
+                    },
+                    keyword: query.term,
+                    limit: 20,
+                });
+            }
+        });
+        return this._super(...arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    async _invite() {
+        const data = this.$input.select2('data');
+        if (data.length === 0) {
+            return;
+        }
+        await this._rpc({
+            model: 'mail.channel',
+            method: 'channel_invite',
+            args: [this.channelId],
+            kwargs: {
+                partner_ids: _.pluck(data, 'id')
+            },
+        });
+        const names = _.escape(_.pluck(data, 'text').join(', '));
+        const notification = _.str.sprintf(
+            this.env._t("You added <b>%s</b> to the conversation."),
+            names
+        );
+        this.env.services['notification'].notify({
+            message: notification,
+            type: 'warning',
+        });
+    },
+});
+
+return PartnerInviteDialog;
+
+});
diff --git a/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.xml b/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.xml
new file mode 100644
index 00000000..82553476
--- /dev/null
+++ b/addons/mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <!--
+        @param {mail/static/src/widgets/discuss_invite_partner_dialog/discuss_invite_partner_dialog.js} widget
+    -->
+    <t t-name="mail.widgets.DiscussInvitePartnerDialog">
+        <div>
+            <input class="o_dialog o_input o_invite_partner" type="text"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.js b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
new file mode 100644
index 00000000..cf147656
--- /dev/null
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.js
@@ -0,0 +1,188 @@
+odoo.define('mail/static/src/widgets/form_renderer/form_renderer.js', function (require) {
+"use strict";
+
+const components = {
+    ChatterContainer: require('mail/static/src/components/chatter_container/chatter_container.js'),
+};
+
+const FormRenderer = require('web.FormRenderer');
+const { ComponentWrapper } = require('web.OwlCompatibility');
+
+class ChatterContainerWrapperComponent extends ComponentWrapper {}
+
+/**
+ * Include the FormRenderer to instantiate the chatter area containing (a
+ * subset of) the mail widgets (mail_thread, mail_followers and mail_activity).
+ */
+FormRenderer.include({
+    /**
+     * @override
+     */
+    init(parent, state, params) {
+        this._super(...arguments);
+        this.chatterFields = params.chatterFields;
+        this.mailFields = params.mailFields;
+        this._chatterContainerComponent = undefined;
+        /**
+         * The target of chatter, if chatter has to be appended to the DOM.
+         * This is set when arch contains `div.oe_chatter`.
+         */
+        this._chatterContainerTarget = undefined;
+        // Do not load chatter in form view dialogs
+        this._isFromFormViewDialog = params.isFromFormViewDialog;
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        this._super(...arguments);
+        this._chatterContainerComponent = undefined;
+        this.off('o_attachments_changed', this);
+        this.off('o_chatter_rendered', this);
+        this.off('o_message_posted', this);
+        owl.Component.env.bus.off('mail.thread:promptAddFollower-closed', this);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns whether the form renderer has a chatter to display or not.
+     * This is based on arch, which should have `div.oe_chatter`.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _hasChatter() {
+        return !!this._chatterContainerTarget;
+    },
+    /**
+     * @private
+     */
+    _makeChatterContainerComponent() {
+        const props = this._makeChatterContainerProps();
+        this._chatterContainerComponent = new ChatterContainerWrapperComponent(
+            this,
+            components.ChatterContainer,
+            props
+        );
+        // Not in custom_events because other modules may remove this listener
+        // while attempting to extend them.
+        this.on('o_chatter_rendered', this, ev => this._onChatterRendered(ev));
+        if (this.chatterFields.hasRecordReloadOnMessagePosted) {
+            this.on('o_message_posted', this, ev => {
+                this.trigger_up('reload', { keepChanges: true });
+            });
+        }
+        if (this.chatterFields.hasRecordReloadOnAttachmentsChanged) {
+            this.on('o_attachments_changed', this, ev => this.trigger_up('reload', { keepChanges: true }));
+        }
+        if (this.chatterFields.hasRecordReloadOnFollowersUpdate) {
+            owl.Component.env.bus.on('mail.thread:promptAddFollower-closed', this, ev => this.trigger_up('reload', { keepChanges: true }));
+        }
+    },
+    /**
+     * @private
+     * @returns {Object}
+     */
+    _makeChatterContainerProps() {
+        return {
+            hasActivities: this.chatterFields.hasActivityIds,
+            hasFollowers: this.chatterFields.hasMessageFollowerIds,
+            hasMessageList: this.chatterFields.hasMessageIds,
+            isAttachmentBoxVisibleInitially: this.chatterFields.isAttachmentBoxVisibleInitially,
+            threadId: this.state.res_id,
+            threadModel: this.state.model,
+        };
+    },
+    /**
+     * Create the DOM element that will contain the chatter. This is made in
+     * a separate method so it can be overridden (like in mail_enterprise for
+     * example).
+     *
+     * @private
+     * @returns {jQuery.Element}
+     */
+    _makeChatterContainerTarget() {
+        const $el = $('<div class="o_FormRenderer_chatterContainer"/>');
+        this._chatterContainerTarget = $el[0];
+        return $el;
+    },
+    /**
+     * Mount the chatter
+     *
+     * Force re-mounting chatter component in DOM. This is necessary
+     * because each time `_renderView` is called, it puts old content
+     * in a fragment.
+     *
+     * @private
+     */
+    async _mountChatterContainerComponent() {
+        try {
+            await this._chatterContainerComponent.mount(this._chatterContainerTarget);
+        } catch (error) {
+            if (error.message !== "Mounting operation cancelled") {
+                throw error;
+            }
+        }
+    },
+    /**
+     * @override
+     */
+    _renderNode(node) {
+        if (node.tag === 'div' && node.attrs.class === 'oe_chatter') {
+            if (this._isFromFormViewDialog) {
+                return $('<div/>');
+            }
+            return this._makeChatterContainerTarget();
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * Overrides the function to render the chatter once the form view is
+     * rendered.
+     *
+     * @override
+     */
+    async __renderView() {
+        await this._super(...arguments);
+        if (this._hasChatter()) {
+            if (!this._chatterContainerComponent) {
+                this._makeChatterContainerComponent();
+            } else {
+                await this._updateChatterContainerComponent();
+            }
+            await this._mountChatterContainerComponent();
+        }
+    },
+    /**
+     * @private
+     */
+    async _updateChatterContainerComponent() {
+        const props = this._makeChatterContainerProps();
+        try {
+            await this._chatterContainerComponent.update(props);
+        } catch (error) {
+            if (error.message !== "Mounting operation cancelled") {
+                throw error;
+            }
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @abstract
+     * @private
+     * @param {OdooEvent} ev
+     * @param {Object} ev.data
+     * @param {mail.attachment[]} ev.data.attachments
+     * @param {mail.thread} ev.data.thread
+     */
+    _onChatterRendered(ev) {},
+});
+
+});
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer.scss b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss
new file mode 100644
index 00000000..3092055b
--- /dev/null
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer.scss
@@ -0,0 +1,17 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_FormRenderer_chatterContainer {
+    display: flex;
+    flex: 1 1 auto;
+    margin: 0 auto;
+    max-width: $o-form-view-sheet-max-width;
+    padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 5);
+    width: 100%;
+}
+
+// FIX to hide chatter in dialogs when they are opened from an action returned by python code
+.modal .modal-dialog .o_form_view .o_FormRenderer_chatterContainer {
+    display: none;
+}
diff --git a/addons/mail/static/src/widgets/form_renderer/form_renderer_tests.js b/addons/mail/static/src/widgets/form_renderer/form_renderer_tests.js
new file mode 100644
index 00000000..90cdb169
--- /dev/null
+++ b/addons/mail/static/src/widgets/form_renderer/form_renderer_tests.js
@@ -0,0 +1,982 @@
+odoo.define('mail/static/src/widgets/form_renderer/form_renderer_tests.js', function (require) {
+"use strict";
+
+const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js');
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const config = require('web.config');
+const FormView = require('web.FormView');
+const {
+    dom: { triggerEvent },
+} = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('widgets', {}, function () {
+QUnit.module('form_renderer', {}, function () {
+QUnit.module('form_renderer_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        // FIXME archs could be removed once task-2248306 is done
+        // The mockServer will try to get the list view
+        // of every relational fields present in the main view.
+        // In the case of mail fields, we don't really need them,
+        // but they still need to be defined.
+        this.createView = async (viewParams, ...args) => {
+            await afterNextRender(async () => {
+                const viewArgs = Object.assign(
+                    {
+                        archs: {
+                            'mail.activity,false,list': '<tree/>',
+                            'mail.followers,false,list': '<tree/>',
+                            'mail.message,false,list': '<tree/>',
+                        },
+                    },
+                    viewParams,
+                );
+                const { afterEvent, env, widget } = await start(viewArgs, ...args);
+                this.afterEvent = afterEvent;
+                this.env = env;
+                this.widget = widget;
+            });
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('[technical] spinner when messaging is not created', async function (assert) {
+    /**
+     * Creation of messaging in env is async due to generation of models being
+     * async. Generation of models is async because it requires parsing of all
+     * JS modules that contain pieces of model definitions.
+     *
+     * Time of having no messaging is very short, almost imperceptible by user
+     * on UI, but the display should not crash during this critical time period.
+     */
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({
+        display_name: "second partner",
+        id: 12,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        messagingBeforeCreationDeferred: makeDeferred(), // block messaging creation
+        waitUntilMessagingCondition: 'none',
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter"></div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer',
+        "should display chatter container even when messaging is not created yet"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should not display any chatter when messaging not created"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatterContainer').textContent,
+        "Please wait...",
+        "chatter container should display spinner when messaging not yet created"
+    );
+});
+
+QUnit.test('[technical] keep spinner on transition from messaging non-created to messaging created (and non-initialized)', async function (assert) {
+    /**
+     * Creation of messaging in env is async due to generation of models being
+     * async. Generation of models is async because it requires parsing of all
+     * JS modules that contain pieces of model definitions.
+     *
+     * Time of having no messaging is very short, almost imperceptible by user
+     * on UI, but the display should not crash during this critical time period.
+     */
+    assert.expect(4);
+
+    const messagingBeforeCreationDeferred = makeDeferred();
+    this.data['res.partner'].records.push({
+        display_name: "second partner",
+        id: 12,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        messagingBeforeCreationDeferred,
+        async mockRPC(route, args) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await new Promise(() => {}); // simulate messaging never initialized
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'none',
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter"></div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ChatterContainer').textContent,
+        "Please wait...",
+        "chatter container should display spinner when messaging not yet created"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should not display any chatter when messaging not created"
+    );
+
+    // simulate messaging become created
+    messagingBeforeCreationDeferred.resolve();
+    await nextAnimationFrame();
+    assert.strictEqual(
+        document.querySelector('.o_ChatterContainer').textContent,
+        "Please wait...",
+        "chatter container should still display spinner when messaging is created but not initialized"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should still not display any chatter when messaging not initialized"
+    );
+});
+
+QUnit.test('spinner when messaging is created but not initialized', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({
+        display_name: "second partner",
+        id: 12,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        async mockRPC(route, args) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await new Promise(() => {}); // simulate messaging never initialized
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'created',
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter"></div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer',
+        "should display chatter container even when messaging is not fully initialized"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should not display any chatter when messaging not initialized"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatterContainer').textContent,
+        "Please wait...",
+        "chatter container should display spinner when messaging not yet initialized"
+    );
+});
+
+QUnit.test('transition non-initialized messaging to initialized messaging: display spinner then chatter', async function (assert) {
+    assert.expect(3);
+
+    const messagingBeforeInitializationDeferred = makeDeferred();
+    this.data['res.partner'].records.push({
+        display_name: "second partner",
+        id: 12,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        async mockRPC(route, args) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await messagingBeforeInitializationDeferred;
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'created',
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter"></div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ChatterContainer').textContent,
+        "Please wait...",
+        "chatter container should display spinner when messaging not yet initialized"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should not display any chatter when messaging not initialized"
+    );
+
+    // Simulate messaging becomes initialized
+    await afterNextRender(() => messagingBeforeInitializationDeferred.resolve());
+    assert.containsNone(
+        document.body,
+        '.o_ChatterContainer_noChatter',
+        "chatter container should now display chatter when messaging becomes initialized"
+    );
+});
+
+QUnit.test('basic chatter rendering', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ display_name: "second partner", id: 12, });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter"></div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter`).length,
+        1,
+        "there should be a chatter"
+    );
+});
+
+QUnit.test('basic chatter rendering without followers', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ display_name: "second partner", id: 12 });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="activity_ids"/>
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar',
+        "there should be a chatter topbar"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonAttachments',
+        "there should be an attachment button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonScheduleActivity',
+        "there should be a schedule activity button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu',
+        "there should be no followers menu"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter_thread',
+        "there should be a thread"
+    );
+});
+
+QUnit.test('basic chatter rendering without activities', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ display_name: "second partner", id: 12 });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_follower_ids"/>
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar',
+        "there should be a chatter topbar"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonAttachments',
+        "there should be an attachment button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatterTopbar_buttonScheduleActivity',
+        "there should be a schedule activity button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "there should be a followers menu"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter_thread',
+        "there should be a thread"
+    );
+});
+
+QUnit.test('basic chatter rendering without messages', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ display_name: "second partner", id: 12 });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_follower_ids"/>
+                    <field name="activity_ids"/>
+                </div>
+            </form>
+        `,
+        res_id: 12,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar',
+        "there should be a chatter topbar"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonAttachments',
+        "there should be an attachment button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonScheduleActivity',
+        "there should be a schedule activity button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "there should be a followers menu"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Chatter_thread',
+        "there should be a thread"
+    );
+});
+
+QUnit.test('chatter updating', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({ body: "not empty", model: 'res.partner', res_id: 12 });
+    this.data['res.partner'].records.push(
+        { display_name: "first partner", id: 11 },
+        { display_name: "second partner", id: 12 }
+    );
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        res_id: 11,
+        viewOptions: {
+            ids: [11, 12],
+            index: 0,
+        },
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        waitUntilEvent: {
+            eventName: 'o-thread-view-hint-processed',
+            message: "should wait until partner 11 thread loaded messages initially",
+            predicate: ({ hint, threadViewer }) => {
+                return (
+                    hint.type === 'messages-loaded' &&
+                    threadViewer.thread.model === 'res.partner' &&
+                    threadViewer.thread.id === 11
+                );
+            },
+        }
+    });
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => document.querySelector('.o_pager_next').click(),
+        message: "should wait until partner 12 thread loaded messages after clicking on next",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'res.partner' &&
+                threadViewer.thread.id === 12
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be a message in partner 12 thread"
+    );
+});
+
+QUnit.test('chatter should become enabled when creation done', async function (assert) {
+    assert.expect(10);
+
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        viewOptions: {
+            mode: 'edit',
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonSendMessage',
+        "there should be a send message button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonLogNote',
+        "there should be a log note button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonLogNote',
+        "there should be an attachments button"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).disabled,
+        "send message button should be disabled"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).disabled,
+        "log note button should be disabled"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachments`).disabled,
+        "attachments button should be disabled"
+    );
+
+    document.querySelectorAll('.o_field_char')[0].focus();
+    document.execCommand('insertText', false, "hello");
+    await afterNextRender(() => {
+        document.querySelector('.o_form_button_save').click();
+    });
+    assert.notOk(
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).disabled,
+        "send message button should now be enabled"
+    );
+    assert.notOk(
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).disabled,
+        "log note button should now be enabled"
+    );
+    assert.notOk(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachments`).disabled,
+        "attachments button should now be enabled"
+    );
+});
+
+QUnit.test('read more/less links are not duplicated when switching from read to edit mode', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.message'].records.push({
+        author_id: 100,
+        // "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
+        body: `
+            <div>
+                Dear Joel Willis,<br>
+                Thank you for your enquiry.<br>
+                If you have any questions, please let us know.
+                <br><br>
+                Thank you,<br>
+                <span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
+                    System
+                </span>
+            </div>
+        `,
+        id: 1000,
+        model: 'res.partner',
+        res_id: 2,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "Someone",
+        id: 100,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        res_id: 2,
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        waitUntilEvent: {
+            eventName: 'o-component-message-read-more-less-inserted',
+            message: "should wait until read more/less is inserted initially",
+            predicate: ({ message }) => message.id === 1000,
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be a message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_readMoreLess',
+        "there should be only one read more"
+    );
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-component-message-read-more-less-inserted',
+        func: () => document.querySelector('.o_form_button_edit').click(),
+        message: "should wait until read more/less is inserted after clicking on edit",
+        predicate: ({ message }) => message.id === 1000,
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_Message_readMoreLess',
+        "there should still be only one read more after switching to edit mode"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-component-message-read-more-less-inserted',
+        func: () => document.querySelector('.o_form_button_cancel').click(),
+        message: "should wait until read more/less is inserted after canceling edit",
+        predicate: ({ message }) => message.id === 1000,
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_Message_readMoreLess',
+        "there should still be only one read more after switching back to read mode"
+    );
+});
+
+QUnit.test('read more links becomes read less after being clicked', async function (assert) {
+    assert.expect(6);
+
+    this.data['mail.message'].records = [{
+        author_id: 100,
+        // "data-o-mail-quote" added by server is intended to be compacted in read more/less blocks
+        body: `
+            <div>
+                Dear Joel Willis,<br>
+                Thank you for your enquiry.<br>
+                If you have any questions, please let us know.
+                <br><br>
+                Thank you,<br>
+                <span data-o-mail-quote="1">-- <br data-o-mail-quote="1">
+                    System
+                </span>
+            </div>
+        `,
+        id: 1000,
+        model: 'res.partner',
+        res_id: 2,
+    }];
+    this.data['res.partner'].records.push({
+        display_name: "Someone",
+        id: 100,
+    });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        res_id: 2,
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        waitUntilEvent: {
+            eventName: 'o-component-message-read-more-less-inserted',
+            message: "should wait until read more/less is inserted initially",
+            predicate: ({ message }) => message.id === 1000,
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Chatter',
+        "there should be a chatter"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be a message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_readMoreLess',
+        "there should be a read more"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_readMoreLess').textContent,
+        'read more',
+        "read more/less link should contain 'read more' as text"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-component-message-read-more-less-inserted',
+        func: () => document.querySelector('.o_form_button_edit').click(),
+        message: "should wait until read more/less is inserted after clicking on edit",
+        predicate: ({ message }) => message.id === 1000,
+    }));
+    assert.strictEqual(
+        document.querySelector('.o_Message_readMoreLess').textContent,
+        'read more',
+        "read more/less link should contain 'read more' as text"
+    );
+
+    document.querySelector('.o_Message_readMoreLess').click();
+    assert.strictEqual(
+        document.querySelector('.o_Message_readMoreLess').textContent,
+        'read less',
+        "read more/less link should contain 'read less' as text after it has been clicked"
+    );
+});
+
+QUnit.test('Form view not scrolled when switching record', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push(
+        {
+            id: 11,
+            display_name: "Partner 1",
+            description: [...Array(60).keys()].join('\n'),
+        },
+        {
+            id: 12,
+            display_name: "Partner 2",
+        }
+    );
+
+    const messages = [...Array(60).keys()].map(id => {
+        return {
+            model: 'res.partner',
+            res_id: id % 2 ? 11 : 12,
+        };
+    });
+    this.data['mail.message'].records = messages;
+
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                    <field name="description"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+        viewOptions: {
+            currentId: 11,
+            ids: [11, 12],
+        },
+        config: {
+            device: { size_class: config.device.SIZES.LG },
+        },
+        env: {
+            device: { size_class: config.device.SIZES.LG },
+        },
+    });
+
+    const controllerContentEl = document.querySelector('.o_content');
+
+    assert.strictEqual(
+        document.querySelector('.breadcrumb-item.active').textContent,
+        'Partner 1',
+        "Form view should display partner 'Partner 1'"
+    );
+    assert.strictEqual(controllerContentEl.scrollTop, 0,
+        "The top of the form view is visible"
+    );
+
+    await afterNextRender(async () => {
+        controllerContentEl.scrollTop = controllerContentEl.scrollHeight - controllerContentEl.clientHeight;
+        await triggerEvent(
+            document.querySelector('.o_ThreadView_messageList'),
+            'scroll'
+        );
+    });
+    assert.strictEqual(
+        controllerContentEl.scrollTop,
+        controllerContentEl.scrollHeight - controllerContentEl.clientHeight,
+        "The controller container should be scrolled to its bottom"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_pager_next').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.breadcrumb-item.active').textContent,
+        'Partner 2',
+        "The form view should display partner 'Partner 2'"
+    );
+    assert.strictEqual(controllerContentEl.scrollTop, 0,
+        "The top of the form view should be visible when switching record from pager"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_pager_previous').click()
+    );
+    assert.strictEqual(controllerContentEl.scrollTop, 0,
+        "Form view's scroll position should have been reset when switching back to first record"
+    );
+});
+
+QUnit.test('Attachments that have been unlinked from server should be visually unlinked from record', async function (assert) {
+    // Attachments that have been fetched from a record at certain time and then
+    // removed from the server should be reflected on the UI when the current
+    // partner accesses this record again.
+    assert.expect(2);
+
+    this.data['res.partner'].records.push(
+        { display_name: "Partner1", id: 11 },
+        { display_name: "Partner2", id: 12 }
+    );
+    this.data['ir.attachment'].records.push(
+        {
+           id: 11,
+           mimetype: 'text.txt',
+           res_id: 11,
+           res_model: 'res.partner',
+        },
+        {
+           id: 12,
+           mimetype: 'text.txt',
+           res_id: 11,
+           res_model: 'res.partner',
+        }
+    );
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        // View params
+        View: FormView,
+        model: 'res.partner',
+        res_id: 11,
+        viewOptions: {
+            ids: [11, 12],
+            index: 0,
+        },
+        arch: `
+            <form string="Partners">
+                <sheet>
+                    <field name="name"/>
+                </sheet>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ChatterTopbar_buttonCount').textContent,
+        '2',
+        "Partner1 should have 2 attachments initially"
+    );
+
+    // The attachment links are updated on (re)load,
+    // so using pager is a way to reload the record "Partner1".
+    await afterNextRender(() =>
+        document.querySelector('.o_pager_next').click()
+    );
+    // Simulate unlinking attachment 12 from Partner 1.
+    this.data['ir.attachment'].records.find(a => a.id === 11).res_id = 0;
+    await afterNextRender(() =>
+        document.querySelector('.o_pager_previous').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatterTopbar_buttonCount').textContent,
+        '1',
+        "Partner1 should now have 1 attachment after it has been unlinked from server"
+    );
+});
+
+QUnit.test('chatter just contains "creating a new record" message during the creation of a new record after having displayed a chatter for an existing record', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 12 });
+    await this.createView({
+        data: this.data,
+        hasView: true,
+        View: FormView,
+        model: 'res.partner',
+        res_id: 12,
+        arch: `
+            <form>
+                <div class="oe_chatter">
+                    <field name="message_ids"/>
+                </div>
+            </form>
+        `,
+    });
+
+    await afterNextRender(() => {
+        document.querySelector('.o_form_button_create').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "Should have a single message when creating a new record"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_content').textContent,
+        'Creating a new record...',
+        "the message content should be in accord to the creation of this record"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/widgets/messaging_menu/messaging_menu.js b/addons/mail/static/src/widgets/messaging_menu/messaging_menu.js
new file mode 100644
index 00000000..edfef630
--- /dev/null
+++ b/addons/mail/static/src/widgets/messaging_menu/messaging_menu.js
@@ -0,0 +1,56 @@
+odoo.define('mail/static/src/widgets/messaging_menu/messaging_menu.js', function (require) {
+'use strict';
+
+const components = {
+    MessagingMenu: require('mail/static/src/components/messaging_menu/messaging_menu.js'),
+};
+
+const SystrayMenu = require('web.SystrayMenu');
+const Widget = require('web.Widget');
+
+/**
+ * Odoo Widget, necessary to instantiate component.
+ */
+const MessagingMenu = Widget.extend({
+    template: 'mail.widgets.MessagingMenu',
+    /**
+     * @override
+     */
+    init() {
+        this._super(...arguments);
+        this.component = undefined;
+    },
+    /**
+     * @override
+     */
+    destroy() {
+        if (this.component) {
+            this.component.destroy();
+        }
+        this._super(...arguments);
+    },
+    async on_attach_callback() {
+        const MessagingMenuComponent = components.MessagingMenu;
+        this.component = new MessagingMenuComponent(null);
+        await this.component.mount(this.el);
+        // unwrap
+        this.el.parentNode.insertBefore(this.component.el, this.el);
+        this.el.parentNode.removeChild(this.el);
+    },
+});
+
+// Systray menu items display order matches order in the list
+// lower index comes first, and display is from right to left.
+// For messagin menu, it should come before activity menu, if any
+// otherwise, it is the next systray item.
+const activityMenuIndex = SystrayMenu.Items.findIndex(SystrayMenuItem =>
+    SystrayMenuItem.prototype.name === 'activity_menu');
+if (activityMenuIndex > 0) {
+    SystrayMenu.Items.splice(activityMenuIndex, 0, MessagingMenu);
+} else {
+    SystrayMenu.Items.push(MessagingMenu);
+}
+
+return MessagingMenu;
+
+});
diff --git a/addons/mail/static/src/widgets/messaging_menu/messaging_menu.xml b/addons/mail/static/src/widgets/messaging_menu/messaging_menu.xml
new file mode 100644
index 00000000..308c1f31
--- /dev/null
+++ b/addons/mail/static/src/widgets/messaging_menu/messaging_menu.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.widgets.MessagingMenu">
+        <li class="o_widget_SystrayMessagingItem"/>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/widgets/notification_alert/notification_alert.js b/addons/mail/static/src/widgets/notification_alert/notification_alert.js
new file mode 100644
index 00000000..27055cd7
--- /dev/null
+++ b/addons/mail/static/src/widgets/notification_alert/notification_alert.js
@@ -0,0 +1,45 @@
+odoo.define('mail/static/src/widgets/notification_alert/notification_alert.js', function (require) {
+"use strict";
+
+const components = {
+    NotificationAlert: require('mail/static/src/components/notification_alert/notification_alert.js'),
+};
+
+const { ComponentWrapper, WidgetAdapterMixin } = require('web.OwlCompatibility');
+
+const Widget = require('web.Widget');
+const widgetRegistry = require('web.widget_registry');
+
+class NotificationAlertWrapper extends ComponentWrapper {}
+
+// -----------------------------------------------------------------------------
+// Display Notification alert on user preferences form view
+// -----------------------------------------------------------------------------
+const NotificationAlert = Widget.extend(WidgetAdapterMixin, {
+    /**
+     * @override
+     */
+    init() {
+        this._super(...arguments);
+        this.component = undefined;
+    },
+    /**
+     * @override
+     */
+    async start() {
+        await this._super(...arguments);
+
+        this.component = new NotificationAlertWrapper(
+            this,
+            components.NotificationAlert,
+            {}
+        );
+        await this.component.mount(this.el);
+    },
+});
+
+widgetRegistry.add('notification_alert', NotificationAlert);
+
+return NotificationAlert;
+
+});
diff --git a/addons/mail/static/src/widgets/notification_alert/notification_alert_tests.js b/addons/mail/static/src/widgets/notification_alert/notification_alert_tests.js
new file mode 100644
index 00000000..20297c85
--- /dev/null
+++ b/addons/mail/static/src/widgets/notification_alert/notification_alert_tests.js
@@ -0,0 +1,103 @@
+odoo.define('mail/static/src/widgets/notification_alert/notification_alert_tests.js', function (require) {
+'use strict';
+
+const { afterEach, beforeEach, start } = require('mail/static/src/utils/test_utils.js');
+
+const FormView = require('web.FormView');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('widgets', {}, function () {
+QUnit.module('notification_alert', {}, function () {
+QUnit.module('notification_alert_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            let { widget } = await start(Object.assign({
+                data: this.data,
+                hasView: true,
+                // View params
+                View: FormView,
+                model: 'mail.message',
+                arch: `
+                    <form>
+                        <widget name="notification_alert"/>
+                    </form>
+                `,
+            }, params));
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.skip('notification_alert widget: display blocked notification alert', async function (assert) {
+    // FIXME: Test should work, but for some reasons OWL always flags the
+    // component as not mounted, even though it is in the DOM and it's state
+    // is good for rendering... task-227947
+    assert.expect(1);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'denied',
+                },
+            },
+        },
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_notification_alert',
+        "Blocked notification alert should be displayed"
+    );
+});
+
+QUnit.test('notification_alert widget: no notification alert when granted', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'granted',
+                },
+            },
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_notification_alert',
+        "Blocked notification alert should not be displayed"
+    );
+});
+
+QUnit.test('notification_alert widget: no notification alert when default', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'default',
+                },
+            },
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_notification_alert',
+        "Blocked notification alert should not be displayed"
+    );
+});
+
+});
+});
+});
+
+});