From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001
From: stephanchrst <stephanchrst@gmail.com>
Date: Tue, 10 May 2022 21:51:50 +0700
Subject: initial commit 2

---
 .../static/src/components/activity/activity.js     |  199 +
 .../static/src/components/activity/activity.scss   |  186 +
 .../static/src/components/activity/activity.xml    |  153 +
 .../src/components/activity/activity_tests.js      | 1157 +++++
 .../src/components/activity_box/activity_box.js    |   64 +
 .../src/components/activity_box/activity_box.scss  |   45 +
 .../src/components/activity_box/activity_box.xml   |   45 +
 .../activity_mark_done_popover.js                  |  122 +
 .../activity_mark_done_popover.scss                |   20 +
 .../activity_mark_done_popover.xml                 |   23 +
 .../activity_mark_done_popover_tests.js            |  297 ++
 .../static/src/components/attachment/attachment.js |  204 +
 .../src/components/attachment/attachment.scss      |  204 +
 .../src/components/attachment/attachment.xml       |  115 +
 .../src/components/attachment/attachment_tests.js  |  762 ++++
 .../components/attachment_box/attachment_box.js    |  124 +
 .../components/attachment_box/attachment_box.scss  |   46 +
 .../components/attachment_box/attachment_box.xml   |   50 +
 .../attachment_box/attachment_box_tests.js         |  337 ++
 .../attachment_delete_confirm_dialog.js            |   92 +
 .../attachment_delete_confirm_dialog.xml           |   12 +
 .../components/attachment_list/attachment_list.js  |  119 +
 .../attachment_list/attachment_list.scss           |   29 +
 .../components/attachment_list/attachment_list.xml |   39 +
 .../attachment_viewer/attachment_viewer.js         |  598 +++
 .../attachment_viewer/attachment_viewer.scss       |  198 +
 .../attachment_viewer/attachment_viewer.xml        |   93 +
 .../autocomplete_input/autocomplete_input.js       |  174 +
 .../autocomplete_input/autocomplete_input.xml      |    8 +
 .../src/components/chat_window/chat_window.js      |  363 ++
 .../src/components/chat_window/chat_window.scss    |   93 +
 .../src/components/chat_window/chat_window.xml     |   54 +
 .../chat_window_header/chat_window_header.js       |  118 +
 .../chat_window_header/chat_window_header.scss     |   95 +
 .../chat_window_header/chat_window_header.xml      |   56 +
 .../chat_window_hidden_menu.js                     |  141 +
 .../chat_window_hidden_menu.scss                   |   90 +
 .../chat_window_hidden_menu.xml                    |   31 +
 .../chat_window_manager/chat_window_manager.js     |   51 +
 .../chat_window_manager/chat_window_manager.scss   |   16 +
 .../chat_window_manager/chat_window_manager.xml    |   23 +
 .../chat_window_manager_tests.js                   | 2423 +++++++++++
 .../mail/static/src/components/chatter/chatter.js  |  150 +
 .../static/src/components/chatter/chatter.scss     |   42 +
 .../mail/static/src/components/chatter/chatter.xml |   56 +
 .../chatter/chatter_suggested_recipient_tests.js   |  420 ++
 .../static/src/components/chatter/chatter_tests.js |  469 +++
 .../chatter_container/chatter_container.js         |  139 +
 .../chatter_container/chatter_container.scss       |   25 +
 .../chatter_container/chatter_container.xml        |   15 +
 .../components/chatter_topbar/chatter_topbar.js    |  137 +
 .../components/chatter_topbar/chatter_topbar.scss  |  106 +
 .../components/chatter_topbar/chatter_topbar.xml   |   74 +
 .../chatter_topbar/chatter_topbar_tests.js         |  730 ++++
 .../static/src/components/composer/composer.js     |  444 ++
 .../static/src/components/composer/composer.scss   |  273 ++
 .../static/src/components/composer/composer.xml    |  179 +
 .../src/components/composer/composer_tests.js      | 2153 ++++++++++
 .../composer_suggested_recipient.js                |  158 +
 .../composer_suggested_recipient.scss              |    5 +
 .../composer_suggested_recipient.xml               |   41 +
 .../composer_suggested_recipient_list.js           |   77 +
 .../composer_suggested_recipient_list.scss         |    3 +
 .../composer_suggested_recipient_list.xml          |   26 +
 .../composer_suggestion/composer_suggestion.js     |  143 +
 .../composer_suggestion/composer_suggestion.scss   |   43 +
 .../composer_suggestion/composer_suggestion.xml    |   33 +
 .../composer_suggestion_canned_response_tests.js   |  154 +
 .../composer_suggestion_channel_tests.js           |  144 +
 .../composer_suggestion_command_tests.js           |  151 +
 .../composer_suggestion_partner_tests.js           |  160 +
 .../composer_suggestion_list.js                    |   73 +
 .../composer_suggestion_list.scss                  |   27 +
 .../composer_suggestion_list.xml                   |   32 +
 .../composer_text_input/composer_text_input.js     |  419 ++
 .../composer_text_input/composer_text_input.scss   |   40 +
 .../composer_text_input/composer_text_input.xml    |   24 +
 addons/mail/static/src/components/dialog/dialog.js |  119 +
 .../mail/static/src/components/dialog/dialog.scss  |   23 +
 .../mail/static/src/components/dialog/dialog.xml   |   22 +
 .../components/dialog_manager/dialog_manager.js    |   69 +
 .../components/dialog_manager/dialog_manager.xml   |   17 +
 .../dialog_manager/dialog_manager_tests.js         |   82 +
 .../mail/static/src/components/discuss/discuss.js  |  313 ++
 .../static/src/components/discuss/discuss.scss     |  114 +
 .../mail/static/src/components/discuss/discuss.xml |  106 +
 .../discuss/tests/discuss_domain_tests.js          |  408 ++
 .../discuss/tests/discuss_inbox_tests.js           |  725 ++++
 .../discuss/tests/discuss_moderation_tests.js      | 1180 ++++++
 .../discuss/tests/discuss_pinned_tests.js          |  238 ++
 .../discuss/tests/discuss_sidebar_tests.js         |  163 +
 .../src/components/discuss/tests/discuss_tests.js  | 4447 ++++++++++++++++++++
 .../discuss_mobile_mailbox_selection.js            |   95 +
 .../discuss_mobile_mailbox_selection.scss          |   26 +
 .../discuss_mobile_mailbox_selection.xml           |   20 +
 .../discuss_mobile_mailbox_selection_tests.js      |  130 +
 .../components/discuss_sidebar/discuss_sidebar.js  |  308 ++
 .../discuss_sidebar/discuss_sidebar.scss           |  110 +
 .../components/discuss_sidebar/discuss_sidebar.xml |   81 +
 .../discuss_sidebar_item/discuss_sidebar_item.js   |  220 +
 .../discuss_sidebar_item/discuss_sidebar_item.scss |  109 +
 .../discuss_sidebar_item/discuss_sidebar_item.xml  |   63 +
 .../static/src/components/drop_zone/drop_zone.js   |  139 +
 .../static/src/components/drop_zone/drop_zone.scss |   29 +
 .../static/src/components/drop_zone/drop_zone.xml  |   12 +
 .../src/components/editable_text/editable_text.js  |   91 +
 .../src/components/editable_text/editable_text.xml |    8 +
 .../components/emojis_popover/emojis_popover.js    |   78 +
 .../components/emojis_popover/emojis_popover.scss  |   22 +
 .../components/emojis_popover/emojis_popover.xml   |   14 +
 .../src/components/file_uploader/file_uploader.js  |  241 ++
 .../components/file_uploader/file_uploader.scss    |    3 +
 .../src/components/file_uploader/file_uploader.xml |   10 +
 .../file_uploader/file_uploader_tests.js           |   94 +
 .../src/components/follow_button/follow_button.js  |   93 +
 .../components/follow_button/follow_button.scss    |   27 +
 .../src/components/follow_button/follow_button.xml |   24 +
 .../follow_button/follow_button_tests.js           |  278 ++
 .../static/src/components/follower/follower.js     |   80 +
 .../static/src/components/follower/follower.scss   |   55 +
 .../static/src/components/follower/follower.xml    |   23 +
 .../src/components/follower/follower_tests.js      |  380 ++
 .../follower_list_menu/follower_list_menu.js       |  154 +
 .../follower_list_menu/follower_list_menu.scss     |   17 +
 .../follower_list_menu/follower_list_menu.xml      |   38 +
 .../follower_list_menu/follower_list_menu_tests.js |  424 ++
 .../follower_subtype/follower_subtype.js           |   71 +
 .../follower_subtype/follower_subtype.scss         |   27 +
 .../follower_subtype/follower_subtype.xml          |   13 +
 .../follower_subtype/follower_subtype_tests.js     |  233 +
 .../follower_subtype_list/follower_subtype_list.js |   89 +
 .../follower_subtype_list.scss                     |    8 +
 .../follower_subtype_list.xml                      |   38 +
 .../src/components/mail_template/mail_template.js  |   81 +
 .../components/mail_template/mail_template.scss    |   27 +
 .../src/components/mail_template/mail_template.xml |   29 +
 .../mail/static/src/components/message/message.js  |  680 +++
 .../static/src/components/message/message.scss     |  381 ++
 .../mail/static/src/components/message/message.xml |  210 +
 .../static/src/components/message/message_tests.js | 1580 +++++++
 .../message_author_prefix/message_author_prefix.js |   67 +
 .../message_author_prefix.scss                     |   11 +
 .../message_author_prefix.xml                      |   17 +
 .../src/components/message_list/message_list.js    |  600 +++
 .../src/components/message_list/message_list.scss  |  135 +
 .../src/components/message_list/message_list.xml   |  103 +
 .../message_seen_indicator.js                      |  136 +
 .../message_seen_indicator.scss                    |   39 +
 .../message_seen_indicator.xml                     |   16 +
 .../message_seen_indicator_tests.js                |  294 ++
 .../components/messaging_menu/messaging_menu.js    |  234 +
 .../components/messaging_menu/messaging_menu.scss  |  143 +
 .../components/messaging_menu/messaging_menu.xml   |   83 +
 .../messaging_menu/messaging_menu_tests.js         | 1039 +++++
 .../mobile_messaging_navbar.js                     |   61 +
 .../mobile_messaging_navbar.scss                   |   43 +
 .../mobile_messaging_navbar.xml                    |   17 +
 .../moderation_ban_dialog/moderation_ban_dialog.js |   94 +
 .../moderation_ban_dialog.xml                      |   23 +
 .../moderation_discard_dialog.js                   |  109 +
 .../moderation_discard_dialog.xml                  |   13 +
 .../moderation_reject_dialog.js                    |  104 +
 .../moderation_reject_dialog.xml                   |   13 +
 .../notification_alert/notification_alert.js       |   54 +
 .../notification_alert/notification_alert.xml      |   14 +
 .../notification_group/notification_group.js       |   93 +
 .../notification_group/notification_group.scss     |   93 +
 .../notification_group/notification_group.xml      |   39 +
 .../notification_list/notification_list.js         |  226 +
 .../notification_list/notification_list.scss       |   37 +
 .../notification_list/notification_list.xml        |   47 +
 .../notification_list/notification_list_item.scss  |  179 +
 .../notification_list_notification_group_tests.js  |  546 +++
 .../notification_list/notification_list_tests.js   |  162 +
 .../notification_popover/notification_popover.js   |   95 +
 .../notification_popover/notification_popover.scss |    7 +
 .../notification_popover/notification_popover.xml  |   17 +
 .../notification_request/notification_request.js   |   94 +
 .../notification_request/notification_request.scss |   77 +
 .../notification_request/notification_request.xml  |   31 +
 .../partner_im_status_icon.js                      |   74 +
 .../partner_im_status_icon.scss                    |   59 +
 .../partner_im_status_icon.xml                     |   38 +
 .../partner_im_status_icon_tests.js                |  145 +
 .../src/components/thread_icon/thread_icon.js      |   64 +
 .../src/components/thread_icon/thread_icon.scss    |   26 +
 .../src/components/thread_icon/thread_icon.xml     |   58 +
 .../components/thread_icon/thread_icon_tests.js    |  118 +
 .../thread_needaction_preview.js                   |  151 +
 .../thread_needaction_preview.scss                 |  108 +
 .../thread_needaction_preview.xml                  |   58 +
 .../thread_needaction_preview_tests.js             |  457 ++
 .../components/thread_preview/thread_preview.js    |  130 +
 .../components/thread_preview/thread_preview.scss  |  117 +
 .../components/thread_preview/thread_preview.xml   |   63 +
 .../thread_preview/thread_preview_tests.js         |  114 +
 .../thread_textual_typing_status.js                |   52 +
 .../thread_textual_typing_status.scss              |   12 +
 .../thread_textual_typing_status.xml               |   14 +
 .../thread_textual_typing_status_tests.js          |  367 ++
 .../thread_typing_icon/thread_typing_icon.js       |   41 +
 .../thread_typing_icon/thread_typing_icon.scss     |  108 +
 .../thread_typing_icon/thread_typing_icon.xml      |   29 +
 .../src/components/thread_view/thread_view.js      |  222 +
 .../src/components/thread_view/thread_view.scss    |   38 +
 .../src/components/thread_view/thread_view.xml     |   50 +
 .../components/thread_view/thread_view_tests.js    | 1809 ++++++++
 207 files changed, 40950 insertions(+)
 create mode 100644 addons/mail/static/src/components/activity/activity.js
 create mode 100644 addons/mail/static/src/components/activity/activity.scss
 create mode 100644 addons/mail/static/src/components/activity/activity.xml
 create mode 100644 addons/mail/static/src/components/activity/activity_tests.js
 create mode 100644 addons/mail/static/src/components/activity_box/activity_box.js
 create mode 100644 addons/mail/static/src/components/activity_box/activity_box.scss
 create mode 100644 addons/mail/static/src/components/activity_box/activity_box.xml
 create mode 100644 addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
 create mode 100644 addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
 create mode 100644 addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
 create mode 100644 addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js
 create mode 100644 addons/mail/static/src/components/attachment/attachment.js
 create mode 100644 addons/mail/static/src/components/attachment/attachment.scss
 create mode 100644 addons/mail/static/src/components/attachment/attachment.xml
 create mode 100644 addons/mail/static/src/components/attachment/attachment_tests.js
 create mode 100644 addons/mail/static/src/components/attachment_box/attachment_box.js
 create mode 100644 addons/mail/static/src/components/attachment_box/attachment_box.scss
 create mode 100644 addons/mail/static/src/components/attachment_box/attachment_box.xml
 create mode 100644 addons/mail/static/src/components/attachment_box/attachment_box_tests.js
 create mode 100644 addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
 create mode 100644 addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
 create mode 100644 addons/mail/static/src/components/attachment_list/attachment_list.js
 create mode 100644 addons/mail/static/src/components/attachment_list/attachment_list.scss
 create mode 100644 addons/mail/static/src/components/attachment_list/attachment_list.xml
 create mode 100644 addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
 create mode 100644 addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
 create mode 100644 addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
 create mode 100644 addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
 create mode 100644 addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
 create mode 100644 addons/mail/static/src/components/chat_window/chat_window.js
 create mode 100644 addons/mail/static/src/components/chat_window/chat_window.scss
 create mode 100644 addons/mail/static/src/components/chat_window/chat_window.xml
 create mode 100644 addons/mail/static/src/components/chat_window_header/chat_window_header.js
 create mode 100644 addons/mail/static/src/components/chat_window_header/chat_window_header.scss
 create mode 100644 addons/mail/static/src/components/chat_window_header/chat_window_header.xml
 create mode 100644 addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
 create mode 100644 addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
 create mode 100644 addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
 create mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
 create mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
 create mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
 create mode 100644 addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
 create mode 100644 addons/mail/static/src/components/chatter/chatter.js
 create mode 100644 addons/mail/static/src/components/chatter/chatter.scss
 create mode 100644 addons/mail/static/src/components/chatter/chatter.xml
 create mode 100644 addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js
 create mode 100644 addons/mail/static/src/components/chatter/chatter_tests.js
 create mode 100644 addons/mail/static/src/components/chatter_container/chatter_container.js
 create mode 100644 addons/mail/static/src/components/chatter_container/chatter_container.scss
 create mode 100644 addons/mail/static/src/components/chatter_container/chatter_container.xml
 create mode 100644 addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
 create mode 100644 addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
 create mode 100644 addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
 create mode 100644 addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js
 create mode 100644 addons/mail/static/src/components/composer/composer.js
 create mode 100644 addons/mail/static/src/components/composer/composer.scss
 create mode 100644 addons/mail/static/src/components/composer/composer.xml
 create mode 100644 addons/mail/static/src/components/composer/composer_tests.js
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss
 create mode 100644 addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js
 create mode 100644 addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
 create mode 100644 addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
 create mode 100644 addons/mail/static/src/components/composer_text_input/composer_text_input.js
 create mode 100644 addons/mail/static/src/components/composer_text_input/composer_text_input.scss
 create mode 100644 addons/mail/static/src/components/composer_text_input/composer_text_input.xml
 create mode 100644 addons/mail/static/src/components/dialog/dialog.js
 create mode 100644 addons/mail/static/src/components/dialog/dialog.scss
 create mode 100644 addons/mail/static/src/components/dialog/dialog.xml
 create mode 100644 addons/mail/static/src/components/dialog_manager/dialog_manager.js
 create mode 100644 addons/mail/static/src/components/dialog_manager/dialog_manager.xml
 create mode 100644 addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/discuss.js
 create mode 100644 addons/mail/static/src/components/discuss/discuss.scss
 create mode 100644 addons/mail/static/src/components/discuss/discuss.xml
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js
 create mode 100644 addons/mail/static/src/components/discuss/tests/discuss_tests.js
 create mode 100644 addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js
 create mode 100644 addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
 create mode 100644 addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
 create mode 100644 addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js
 create mode 100644 addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js
 create mode 100644 addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss
 create mode 100644 addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
 create mode 100644 addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
 create mode 100644 addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss
 create mode 100644 addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
 create mode 100644 addons/mail/static/src/components/drop_zone/drop_zone.js
 create mode 100644 addons/mail/static/src/components/drop_zone/drop_zone.scss
 create mode 100644 addons/mail/static/src/components/drop_zone/drop_zone.xml
 create mode 100644 addons/mail/static/src/components/editable_text/editable_text.js
 create mode 100644 addons/mail/static/src/components/editable_text/editable_text.xml
 create mode 100644 addons/mail/static/src/components/emojis_popover/emojis_popover.js
 create mode 100644 addons/mail/static/src/components/emojis_popover/emojis_popover.scss
 create mode 100644 addons/mail/static/src/components/emojis_popover/emojis_popover.xml
 create mode 100644 addons/mail/static/src/components/file_uploader/file_uploader.js
 create mode 100644 addons/mail/static/src/components/file_uploader/file_uploader.scss
 create mode 100644 addons/mail/static/src/components/file_uploader/file_uploader.xml
 create mode 100644 addons/mail/static/src/components/file_uploader/file_uploader_tests.js
 create mode 100644 addons/mail/static/src/components/follow_button/follow_button.js
 create mode 100644 addons/mail/static/src/components/follow_button/follow_button.scss
 create mode 100644 addons/mail/static/src/components/follow_button/follow_button.xml
 create mode 100644 addons/mail/static/src/components/follow_button/follow_button_tests.js
 create mode 100644 addons/mail/static/src/components/follower/follower.js
 create mode 100644 addons/mail/static/src/components/follower/follower.scss
 create mode 100644 addons/mail/static/src/components/follower/follower.xml
 create mode 100644 addons/mail/static/src/components/follower/follower_tests.js
 create mode 100644 addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
 create mode 100644 addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
 create mode 100644 addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
 create mode 100644 addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js
 create mode 100644 addons/mail/static/src/components/follower_subtype/follower_subtype.js
 create mode 100644 addons/mail/static/src/components/follower_subtype/follower_subtype.scss
 create mode 100644 addons/mail/static/src/components/follower_subtype/follower_subtype.xml
 create mode 100644 addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js
 create mode 100644 addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js
 create mode 100644 addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss
 create mode 100644 addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
 create mode 100644 addons/mail/static/src/components/mail_template/mail_template.js
 create mode 100644 addons/mail/static/src/components/mail_template/mail_template.scss
 create mode 100644 addons/mail/static/src/components/mail_template/mail_template.xml
 create mode 100644 addons/mail/static/src/components/message/message.js
 create mode 100644 addons/mail/static/src/components/message/message.scss
 create mode 100644 addons/mail/static/src/components/message/message.xml
 create mode 100644 addons/mail/static/src/components/message/message_tests.js
 create mode 100644 addons/mail/static/src/components/message_author_prefix/message_author_prefix.js
 create mode 100644 addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
 create mode 100644 addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
 create mode 100644 addons/mail/static/src/components/message_list/message_list.js
 create mode 100644 addons/mail/static/src/components/message_list/message_list.scss
 create mode 100644 addons/mail/static/src/components/message_list/message_list.xml
 create mode 100644 addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js
 create mode 100644 addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
 create mode 100644 addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
 create mode 100644 addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
 create mode 100644 addons/mail/static/src/components/messaging_menu/messaging_menu.js
 create mode 100644 addons/mail/static/src/components/messaging_menu/messaging_menu.scss
 create mode 100644 addons/mail/static/src/components/messaging_menu/messaging_menu.xml
 create mode 100644 addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
 create mode 100644 addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js
 create mode 100644 addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
 create mode 100644 addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
 create mode 100644 addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js
 create mode 100644 addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml
 create mode 100644 addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js
 create mode 100644 addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml
 create mode 100644 addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js
 create mode 100644 addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml
 create mode 100644 addons/mail/static/src/components/notification_alert/notification_alert.js
 create mode 100644 addons/mail/static/src/components/notification_alert/notification_alert.xml
 create mode 100644 addons/mail/static/src/components/notification_group/notification_group.js
 create mode 100644 addons/mail/static/src/components/notification_group/notification_group.scss
 create mode 100644 addons/mail/static/src/components/notification_group/notification_group.xml
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list.js
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list.scss
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list.xml
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list_item.scss
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js
 create mode 100644 addons/mail/static/src/components/notification_list/notification_list_tests.js
 create mode 100644 addons/mail/static/src/components/notification_popover/notification_popover.js
 create mode 100644 addons/mail/static/src/components/notification_popover/notification_popover.scss
 create mode 100644 addons/mail/static/src/components/notification_popover/notification_popover.xml
 create mode 100644 addons/mail/static/src/components/notification_request/notification_request.js
 create mode 100644 addons/mail/static/src/components/notification_request/notification_request.scss
 create mode 100644 addons/mail/static/src/components/notification_request/notification_request.xml
 create mode 100644 addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js
 create mode 100644 addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
 create mode 100644 addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
 create mode 100644 addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js
 create mode 100644 addons/mail/static/src/components/thread_icon/thread_icon.js
 create mode 100644 addons/mail/static/src/components/thread_icon/thread_icon.scss
 create mode 100644 addons/mail/static/src/components/thread_icon/thread_icon.xml
 create mode 100644 addons/mail/static/src/components/thread_icon/thread_icon_tests.js
 create mode 100644 addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js
 create mode 100644 addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
 create mode 100644 addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
 create mode 100644 addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js
 create mode 100644 addons/mail/static/src/components/thread_preview/thread_preview.js
 create mode 100644 addons/mail/static/src/components/thread_preview/thread_preview.scss
 create mode 100644 addons/mail/static/src/components/thread_preview/thread_preview.xml
 create mode 100644 addons/mail/static/src/components/thread_preview/thread_preview_tests.js
 create mode 100644 addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js
 create mode 100644 addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss
 create mode 100644 addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
 create mode 100644 addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js
 create mode 100644 addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js
 create mode 100644 addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss
 create mode 100644 addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
 create mode 100644 addons/mail/static/src/components/thread_view/thread_view.js
 create mode 100644 addons/mail/static/src/components/thread_view/thread_view.scss
 create mode 100644 addons/mail/static/src/components/thread_view/thread_view.xml
 create mode 100644 addons/mail/static/src/components/thread_view/thread_view_tests.js

(limited to 'addons/mail/static/src/components')

diff --git a/addons/mail/static/src/components/activity/activity.js b/addons/mail/static/src/components/activity/activity.js
new file mode 100644
index 00000000..1ee7ecf3
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.js
@@ -0,0 +1,199 @@
+odoo.define('mail/static/src/components/activity/activity.js', function (require) {
+'use strict';
+
+const components = {
+    ActivityMarkDonePopover: require('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js'),
+    FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'),
+    MailTemplate: require('mail/static/src/components/mail_template/mail_template.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const {
+    auto_str_to_date,
+    getLangDateFormat,
+    getLangDatetimeFormat,
+} = require('web.time');
+
+const { Component, useState } = owl;
+const { useRef } = owl.hooks;
+
+class Activity extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.state = useState({
+            areDetailsVisible: false,
+        });
+        useStore(props => {
+            const activity = this.env.models['mail.activity'].get(props.activityLocalId);
+            return {
+                activity: activity ? activity.__state : undefined,
+                assigneeNameOrDisplayName: (
+                    activity &&
+                    activity.assignee &&
+                    activity.assignee.nameOrDisplayName
+                ),
+            };
+        });
+        /**
+         * Reference of the file uploader.
+         * Useful to programmatically prompts the browser file uploader.
+         */
+        this._fileUploaderRef = useRef('fileUploader');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.activity}
+     */
+    get activity() {
+        return this.env.models['mail.activity'].get(this.props.activityLocalId);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get assignedUserText() {
+        return _.str.sprintf(this.env._t("for %s"), this.activity.assignee.nameOrDisplayName);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get delayLabel() {
+        const today = moment().startOf('day');
+        const momentDeadlineDate = moment(auto_str_to_date(this.activity.dateDeadline));
+        // true means no rounding
+        const diff = momentDeadlineDate.diff(today, 'days', true);
+        if (diff === 0) {
+            return this.env._t("Today:");
+        } else if (diff === -1) {
+            return this.env._t("Yesterday:");
+        } else if (diff < 0) {
+            return _.str.sprintf(this.env._t("%d days overdue:"), Math.abs(diff));
+        } else if (diff === 1) {
+            return this.env._t("Tomorrow:");
+        } else {
+            return _.str.sprintf(this.env._t("Due in %d days:"), Math.abs(diff));
+        }
+    }
+
+    /**
+     * @returns {string}
+     */
+    get formattedCreateDatetime() {
+        const momentCreateDate = moment(auto_str_to_date(this.activity.dateCreate));
+        const datetimeFormat = getLangDatetimeFormat();
+        return momentCreateDate.format(datetimeFormat);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get formattedDeadlineDate() {
+        const momentDeadlineDate = moment(auto_str_to_date(this.activity.dateDeadline));
+        const datetimeFormat = getLangDateFormat();
+        return momentDeadlineDate.format(datetimeFormat);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get MARK_DONE() {
+        return this.env._t("Mark Done");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get summary() {
+        return _.str.sprintf(this.env._t("“%s”"), this.activity.summary);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {mail.attachment} ev.detail.attachment
+     */
+    _onAttachmentCreated(ev) {
+        this.activity.markAsDone({ attachments: [ev.detail.attachment] });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        if (
+            ev.target.tagName === 'A' &&
+            ev.target.dataset.oeId &&
+            ev.target.dataset.oeModel
+        ) {
+            this.env.messaging.openProfile({
+                id: Number(ev.target.dataset.oeId),
+                model: ev.target.dataset.oeModel,
+            });
+            // avoid following dummy href
+            ev.preventDefault();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    async _onClickCancel(ev) {
+        ev.preventDefault();
+        await this.activity.deleteServerRecord();
+        this.trigger('reload', { keepChanges: true });
+    }
+
+    /**
+     * @private
+     */
+    _onClickDetailsButton() {
+        this.state.areDetailsVisible = !this.state.areDetailsVisible;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickEdit(ev) {
+        this.activity.edit();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickUploadDocument(ev) {
+        this._fileUploaderRef.comp.openBrowserFileUploader();
+    }
+
+}
+
+Object.assign(Activity, {
+    components,
+    props: {
+        activityLocalId: String,
+    },
+    template: 'mail.Activity',
+});
+
+return Activity;
+
+});
diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss
new file mode 100644
index 00000000..64a0ceac
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.scss
@@ -0,0 +1,186 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Activity {
+    display: flex;
+    flex: 0 0 auto;
+    padding: map-get($spacers, 2);
+}
+
+.o_Activity_detailsUserAvatar {
+    margin-inline-end: map-get($spacers, 2);
+    object-fit: cover;
+    height: 18px;
+    width: 18px;
+}
+
+.o_Activity_dueDateText, .o_Activity_summary {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Activity_iconContainer {
+    @include o-position-absolute($top: auto, $left: auto, $bottom: -5px, $right: -5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 25px;
+    border-width: 2px;
+}
+
+.o_Activity_info {
+    display: flex;
+    align-items: baseline;
+}
+
+.o_Activity_note p {
+    margin-bottom: 0;
+}
+
+.o_Activity_sidebar {
+    display: flex;
+    flex: 0 0 36px;
+    margin-right: map-get($spacers, 3);
+    justify-content: center;
+}
+
+.o_Activity_toolButton {
+    padding-top: map-get($spacers, 0);
+}
+
+.o_Activity_tools {
+    display: flex;
+}
+
+.o_Activity_user {
+    height: 36px;
+    margin-left: map-get($spacers, 2);
+    margin-right: map-get($spacers, 2);
+    position: relative;
+    width: 36px;
+}
+
+.o_Activity_userAvatar {
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
+}
+
+// From python template
+.o_mail_note_title {
+    margin-top: map-get($spacers, 2);
+}
+
+.o_mail_note_title + div p {
+    margin-bottom: 0;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+$o-mail-activity-default-color: gray('300') !default;
+$o-mail-activity-overdue-color: darken(theme-color('danger'), 10%) !default;
+$o-mail-activity-planned-color: darken(theme-color('success'), 10%) !default;
+$o-mail-activity-today-color: darken(theme-color('warning'), 10%) !default;
+
+
+.o_Activity_deadlineDateText {
+   &.o-default {
+       color: $o-mail-activity-default-color;
+   }
+
+   &.o-overdue {
+       color: $o-mail-activity-overdue-color;
+   }
+
+   &.o-planned {
+       color: $o-mail-activity-planned-color;
+   }
+
+   &.o-today {
+    color: $o-mail-activity-today-color;
+   }
+}
+
+.o_Activity_details {
+    color: gray('500');
+}
+
+.o_Activity_detailsCreatorAvatar {
+    margin-inline-start: map-get($spacers, 2);
+}
+
+.o_Activity_detailsUserAvatar {
+    border-radius: 50%;
+}
+
+.o_Activity_dueDateText {
+    font-weight: bolder;
+
+   &.o-default {
+       color: $o-mail-activity-default-color;
+   }
+
+   &.o-overdue {
+       color: $o-mail-activity-overdue-color;
+   }
+
+   &.o-planned {
+       color: $o-mail-activity-planned-color;
+   }
+
+   &.o-today {
+    color: $o-mail-activity-today-color;
+   }
+}
+
+/* Needed specifity to counter default bootstrap style */
+a:not([href]):not([tabindex]).o_Activity_detailsButton {
+    background: transparent;
+    opacity: 0.5;
+    color: gray('500');
+
+    &:hover {
+        opacity: 1;
+        color: gray('600');
+    }
+}
+
+.o_Activity_detailsCreator {
+    font-weight: bold;
+}
+
+.o_Activity_iconContainer {
+    color: white;
+    border-color: white;
+    border-radius: 100%;
+    border-style: solid;
+}
+
+.o_Activity_sidebar {
+    font-size: smaller;
+}
+
+.o_Activity_summary {
+    font-weight: bolder;
+    color: gray('900');
+}
+
+.o_Activity_toolButton {
+    opacity: 0.5;
+    color: gray('500');
+
+    &:hover {
+        opacity: 1;
+        color: gray('600');
+    }
+}
+
+.o_Activity_userAvatar {
+    border-radius: 50%;
+}
+
+.o_Activity_userName {
+    color: gray('500');
+}
diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
new file mode 100644
index 00000000..e5e9832c
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -0,0 +1,153 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Activity" owl="1">
+        <div class="o_Activity" t-on-click="_onClick">
+            <t t-if="activity">
+                <div class="o_Activity_sidebar">
+                    <div class="o_Activity_user">
+                        <t t-if="activity.assignee">
+                            <img class="o_Activity_userAvatar" t-attf-src="/web/image/res.users/{{ activity.assignee.id }}/image_128" t-att-alt="activity.assignee.nameOrDisplayName"/>
+                        </t>
+                        <div class="o_Activity_iconContainer"
+                            t-att-class="{
+                                'bg-success-full': activity.state === 'planned',
+                                'bg-warning-full': activity.state === 'today',
+                                'bg-danger-full': activity.state === 'overdue',
+                            }"
+                        >
+                            <i class="o_Activity_icon fa" t-attf-class="{{ activity.icon }}"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="o_Activity_core">
+                    <div class="o_Activity_info">
+                        <div class="o_Activity_dueDateText"
+                            t-att-class="{
+                                'o-default': activity.state === 'default',
+                                'o-overdue': activity.state === 'overdue',
+                                'o-planned': activity.state === 'planned',
+                                'o-today': activity.state === 'today',
+                            }"
+                        >
+                            <t t-esc="delayLabel"/>
+                        </div>
+                        <t t-if="activity.summary">
+                            <div class="o_Activity_summary">
+                                <t t-esc="summary"/>
+                            </div>
+                        </t>
+                        <t t-elif="activity.type">
+                            <div class="o_Activity_summary o_Activity_type">
+                                <t t-esc="activity.type.displayName"/>
+                            </div>
+                        </t>
+                        <t t-if="activity.assignee">
+                            <div class="o_Activity_userName">
+                                <t t-esc="assignedUserText"/>
+                            </div>
+                        </t>
+                        <a class="o_Activity_detailsButton btn btn-link" t-on-click="_onClickDetailsButton" role="button">
+                            <i class="fa fa-info-circle" role="img" title="Info"/>
+                        </a>
+                    </div>
+
+                    <t t-if="state.areDetailsVisible">
+                        <div class="o_Activity_details">
+                            <dl class="dl-horizontal">
+                                <t t-if="activity.type">
+                                    <dt>Activity type</dt>
+                                    <dd class="o_Activity_type">
+                                        <t t-esc="activity.type.displayName"/>
+                                    </dd>
+                                </t>
+                                <t t-if="activity.creator">
+                                    <dt>Created</dt>
+                                    <dd class="o_Activity_detailsCreation">
+                                        <t t-esc="formattedCreateDatetime"/>
+                                        <img class="o_Activity_detailsUserAvatar o_Activity_detailsCreatorAvatar" t-attf-src="/web/image/res.users/{{ activity.creator.id }}/image_128" t-att-title="activity.creator.nameOrDisplayName" t-att-alt="activity.creator.nameOrDisplayName"/>
+                                        <span class="o_Activity_detailsCreator">
+                                            <t t-esc="activity.creator.nameOrDisplayName"/>
+                                        </span>
+                                    </dd>
+                                </t>
+                                <t t-if="activity.assignee">
+                                    <dt>Assigned to</dt>
+                                    <dd class="o_Activity_detailsAssignation">
+                                        <img class="o_Activity_detailsUserAvatar o_Activity_detailsAssignationUserAvatar" t-attf-src="/web/image/res.users/{{ activity.assignee.id }}/image_128" t-att-title="activity.assignee.nameOrDisplayName" t-att-alt="activity.assignee.nameOrDisplayName"/>
+                                        <t t-esc="activity.assignee.nameOrDisplayName"/>
+                                    </dd>
+                                </t>
+                                <dt>Due on</dt>
+                                <dd class="o_Activity_detailsDueDate">
+                                    <span class="o_Activity_deadlineDateText"
+                                        t-att-class="{
+                                            'o-default': activity.state === 'default',
+                                            'o-overdue': activity.state === 'overdue',
+                                            'o-planned': activity.state === 'planned',
+                                            'o-today': activity.state === 'today',
+                                        }"
+                                    >
+                                        <t t-esc="formattedDeadlineDate"/>
+                                    </span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </t>
+
+                    <t t-if="activity.note">
+                        <div class="o_Activity_note">
+                            <t t-raw="activity.note"/>
+                        </div>
+                    </t>
+
+                    <t t-if="activity.mailTemplates.length > 0">
+                        <div class="o_Activity_mailTemplates">
+                            <t t-foreach="activity.mailTemplates" t-as="mailTemplate" t-key="mailTemplate.localId">
+                                <MailTemplate
+                                    class="o_Activity_mailTemplate"
+                                    activityLocalId="activity.localId"
+                                    mailTemplateLocalId="mailTemplate.localId"
+                                />
+                            </t>
+                        </div>
+                    </t>
+
+                    <t t-if="activity.canWrite">
+                        <div name="tools" class="o_Activity_tools">
+                            <t t-if="activity.category !== 'upload_file'">
+                                <Popover position="'right'" title="MARK_DONE">
+                                    <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link" t-att-title="MARK_DONE">
+                                        <i class="fa fa-check"/> Mark Done
+                                    </button>
+                                    <t t-set="opened">
+                                        <ActivityMarkDonePopover activityLocalId="props.activityLocalId"/>
+                                    </t>
+                                </Popover>
+                            </t>
+                            <t t-else="">
+                                <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link" t-on-click="_onClickUploadDocument">
+                                    <i class="fa fa-upload"/> Upload Document
+                                </button>
+                                <FileUploader
+                                    attachmentLocalIds="activity.attachments.map(attachment => attachment.localId)"
+                                    uploadId="activity.thread.id"
+                                    uploadModel="activity.thread.model"
+                                    t-on-o-attachment-created="_onAttachmentCreated"
+                                    t-ref="fileUploader"
+                                />
+                            </t>
+                            <button class="o_Activity_toolButton o_Activity_editButton btn btn-link" t-on-click="_onClickEdit">
+                                <i class="fa fa-pencil"/> Edit
+                            </button>
+                            <button class="o_Activity_toolButton o_Activity_cancelButton btn btn-link" t-on-click="_onClickCancel" >
+                                <i class="fa fa-times"/> Cancel
+                            </button>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/activity/activity_tests.js b/addons/mail/static/src/components/activity/activity_tests.js
new file mode 100644
index 00000000..1c260f07
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity_tests.js
@@ -0,0 +1,1157 @@
+odoo.define('mail/static/src/components/activity/activity_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Activity: require('mail/static/src/components/activity/activity.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const Bus = require('web.Bus');
+const { date_to_str } = require('web.time');
+
+const { Component, tags: { xml } } = owl;
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('activity', {}, function () {
+QUnit.module('activity_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createActivityComponent = async function (activity) {
+            await createRootComponent(this, components.Activity, {
+                props: { activityLocalId: activity.localId },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('activity simplest layout', async function (assert) {
+    assert.expect(12);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_sidebar').length,
+        1,
+        "should have activity sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_core').length,
+        1,
+        "should have activity core"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_user').length,
+        1,
+        "should have activity user"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_info').length,
+        1,
+        "should have activity info"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_note').length,
+        0,
+        "should not have activity note"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details').length,
+        0,
+        "should not have activity details"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_mailTemplates').length,
+        0,
+        "should not have activity mail templates"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_editButton').length,
+        0,
+        "should not have activity Edit button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_cancelButton').length,
+        0,
+        "should not have activity Cancel button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_markDoneButton').length,
+        0,
+        "should not have activity Mark as Done button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_uploadButton').length,
+        0,
+        "should not have activity Upload button"
+    );
+});
+
+QUnit.test('activity with note layout', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        note: 'There is no good or bad note',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_note').length,
+        1,
+        "should have activity note"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_note').textContent,
+        "There is no good or bad note",
+        "activity note should be 'There is no good or bad note'"
+    );
+});
+
+QUnit.test('activity info layout when planned after tomorrow', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const fiveDaysFromNow = new Date();
+    fiveDaysFromNow.setDate(today.getDate() + 5);
+    const activity = this.env.models['mail.activity'].create({
+        dateDeadline: date_to_str(fiveDaysFromNow),
+        id: 12,
+        state: 'planned',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_dueDateText').length,
+        1,
+        "should have activity delay"
+    );
+    assert.ok(
+        document.querySelector('.o_Activity_dueDateText').classList.contains('o-planned'),
+        "activity delay should have the right color modifier class (planned)"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_dueDateText').textContent,
+        "Due in 5 days:",
+        "activity delay should have 'Due in 5 days:' as label"
+    );
+});
+
+QUnit.test('activity info layout when planned tomorrow', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        dateDeadline: date_to_str(tomorrow),
+        id: 12,
+        state: 'planned',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_dueDateText').length,
+        1,
+        "should have activity delay"
+    );
+    assert.ok(
+        document.querySelector('.o_Activity_dueDateText').classList.contains('o-planned'),
+        "activity delay should have the right color modifier class (planned)"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_dueDateText').textContent,
+        'Tomorrow:',
+        "activity delay should have 'Tomorrow:' as label"
+    );
+});
+
+QUnit.test('activity info layout when planned today', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const activity = this.env.models['mail.activity'].create({
+        dateDeadline: date_to_str(today),
+        id: 12,
+        state: 'today',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_dueDateText').length,
+        1,
+        "should have activity delay"
+    );
+    assert.ok(
+        document.querySelector('.o_Activity_dueDateText').classList.contains('o-today'),
+        "activity delay should have the right color modifier class (today)"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_dueDateText').textContent,
+        "Today:",
+        "activity delay should have 'Today:' as label"
+    );
+});
+
+QUnit.test('activity info layout when planned yesterday', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const yesterday = new Date();
+    yesterday.setDate(today.getDate() - 1);
+    const activity = this.env.models['mail.activity'].create({
+        dateDeadline: date_to_str(yesterday),
+        id: 12,
+        state: 'overdue',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_dueDateText').length,
+        1,
+        "should have activity delay"
+    );
+    assert.ok(
+        document.querySelector('.o_Activity_dueDateText').classList.contains('o-overdue'),
+        "activity delay should have the right color modifier class (overdue)"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_dueDateText').textContent,
+        "Yesterday:",
+        "activity delay should have 'Yesterday:' as label"
+    );
+});
+
+QUnit.test('activity info layout when planned before yesterday', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const fiveDaysBeforeNow = new Date();
+    fiveDaysBeforeNow.setDate(today.getDate() - 5);
+    const activity = this.env.models['mail.activity'].create({
+        dateDeadline: date_to_str(fiveDaysBeforeNow),
+        id: 12,
+        state: 'overdue',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_dueDateText').length,
+        1,
+        "should have activity delay"
+    );
+    assert.ok(
+        document.querySelector('.o_Activity_dueDateText').classList.contains('o-overdue'),
+        "activity delay should have the right color modifier class (overdue)"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_dueDateText').textContent,
+        "5 days overdue:",
+        "activity delay should have '5 days overdue:' as label"
+    );
+});
+
+QUnit.test('activity with a summary layout', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        summary: 'test summary',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_summary').length,
+        1,
+        "should have activity summary"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_type').length,
+        0,
+        "should not have the activity type as summary"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_summary').textContent.trim(),
+        "“test summary”",
+        "should have the specific activity summary in activity summary"
+    );
+});
+
+QUnit.test('activity without summary layout', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+        type: [['insert', { id: 1, displayName: "Fake type" }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_type').length,
+        1,
+        "activity details should have an activity type section"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_type').textContent.trim(),
+        "Fake type",
+        "activity details should have the activity type display name in type section"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_summary.o_Activity_type').length,
+        1,
+        "should have activity type as summary"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_summary:not(.o_Activity_type)').length,
+        0,
+        "should not have a specific summary"
+    );
+});
+
+QUnit.test('activity details toggle', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        creator: [['insert', { id: 1, display_name: "Admin" }]],
+        dateCreate: date_to_str(today),
+        dateDeadline: date_to_str(tomorrow),
+        id: 12,
+        state: 'planned',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+        type: [['insert', { id: 1, displayName: "Fake type" }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details').length,
+        0,
+        "activity details should not be visible by default"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsButton').length,
+        1,
+        "activity should have a details button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Activity_detailsButton').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details').length,
+        1,
+        "activity details should be visible after clicking on details button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Activity_detailsButton').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details').length,
+        0,
+        "activity details should no longer be visible after clicking again on details button"
+    );
+});
+
+QUnit.test('activity details layout', async function (assert) {
+    assert.expect(11);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        assignee: [['insert', { id: 10, display_name: "Pauvre pomme" }]],
+        creator: [['insert', { id: 1, display_name: "Admin" }]],
+        dateCreate: date_to_str(today),
+        dateDeadline: date_to_str(tomorrow),
+        id: 12,
+        state: 'planned',
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+        type: [['insert', { id: 1, displayName: "Fake type" }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_userAvatar').length,
+        1,
+        "should have activity user avatar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsButton').length,
+        1,
+        "activity should have a details button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Activity_detailsButton').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details').length,
+        1,
+        "activity details should be visible after clicking on details button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_details .o_Activity_type').length,
+        1,
+        "activity details should have type"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_details .o_Activity_type').textContent,
+        "Fake type",
+        "activity details type should be 'Fake type'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsCreation').length,
+        1,
+        "activity details should have creation date "
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsCreator').length,
+        1,
+        "activity details should have creator"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsAssignation').length,
+        1,
+        "activity details should have assignation information"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Activity_detailsAssignation').textContent.indexOf('Pauvre pomme'),
+        0,
+        "activity details assignation information should contain creator display name"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_detailsAssignationUserAvatar').length,
+        1,
+        "activity details should have user avatar"
+    );
+});
+
+QUnit.test('activity with mail template layout', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        mailTemplates: [['insert', { id: 1, name: "Dummy mail template" }]],
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_sidebar').length,
+        1,
+        "should have activity sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_mailTemplates').length,
+        1,
+        "should have activity mail templates"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_mailTemplate').length,
+        1,
+        "should have activity mail template"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_MailTemplate_name').length,
+        1,
+        "should have activity mail template name"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_MailTemplate_name').textContent,
+        "Dummy mail template",
+        "should have activity mail template name"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_MailTemplate_preview').length,
+        1,
+        "should have activity mail template name preview button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_MailTemplate_send').length,
+        1,
+        "should have activity mail template name send button"
+    );
+});
+
+QUnit.test('activity with mail template: preview mail', async function (assert) {
+    assert.expect(10);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.context.default_res_id,
+            42,
+            'Action should have the activity res id as default res id in context'
+        );
+        assert.strictEqual(
+            payload.action.context.default_model,
+            'res.partner',
+            'Action should have the activity res model as default model in context'
+        );
+        assert.ok(
+            payload.action.context.default_use_template,
+            'Action should have true as default use_template in context'
+        );
+        assert.strictEqual(
+            payload.action.context.default_template_id,
+            1,
+            'Action should have the selected mail template id as default template id in context'
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            'Action should be of type "ir.actions.act_window"'
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            "mail.compose.message",
+            'Action should have "mail.compose.message" as res_model'
+        );
+    });
+
+    await this.start({ env: { bus } });
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        mailTemplates: [['insert', {
+            id: 1,
+            name: "Dummy mail template",
+        }]],
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_MailTemplate_preview').length,
+        1,
+        "should have activity mail template name preview button"
+    );
+
+    document.querySelector('.o_MailTemplate_preview').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should have called 'compose email' action correctly"
+    );
+});
+
+QUnit.test('activity with mail template: send mail', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'activity_send_mail') {
+                assert.step('activity_send_mail');
+                assert.strictEqual(args.args[0].length, 1);
+                assert.strictEqual(args.args[0][0], 42);
+                assert.strictEqual(args.args[1], 1);
+                return;
+            } else {
+                return this._super(...arguments);
+            }
+        },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        id: 12,
+        mailTemplates: [['insert', {
+            id: 1,
+            name: "Dummy mail template",
+        }]],
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_MailTemplate_send').length,
+        1,
+        "should have activity mail template name send button"
+    );
+
+    document.querySelector('.o_MailTemplate_send').click();
+    assert.verifySteps(
+        ['activity_send_mail'],
+        "should have called activity_send_mail rpc"
+    );
+});
+
+QUnit.test('activity upload document is available', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_uploadButton').length,
+        1,
+        "should have activity upload button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_FileUploader').length,
+        1,
+        "should have a file uploader"
+    );
+});
+
+QUnit.test('activity click on mark as done', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_markDoneButton').length,
+        1,
+        "should have activity Mark as Done button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_markDoneButton').click();
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        1,
+        "should have opened the mark done popover"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_markDoneButton').click();
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_ActivityMarkDonePopover').length,
+        0,
+        "should have closed the mark done popover"
+    );
+});
+
+QUnit.test('activity mark as done popover should focus feedback input on open [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const today = new Date();
+    const tomorrow = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Activity',
+        "should have activity component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_markDoneButton',
+        "should have activity Mark as Done button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_markDoneButton').click();
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ActivityMarkDonePopover_feedback'),
+        document.activeElement,
+        "the popover textarea should have the focus"
+    );
+});
+
+QUnit.test('activity click on edit', async function (assert) {
+    assert.expect(9);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.context.default_res_id,
+            42,
+            'Action should have the activity res id as default res id in context'
+        );
+        assert.strictEqual(
+            payload.action.context.default_res_model,
+            'res.partner',
+            'Action should have the activity res model as default res model in context'
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            'Action should be of type "ir.actions.act_window"'
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            "mail.activity",
+            'Action should have "mail.activity" as res_model'
+        );
+        assert.strictEqual(
+            payload.action.res_id,
+            12,
+            'Action should have activity id as res_id'
+        );
+    });
+
+    await this.start({ env: { bus } });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        id: 12,
+        mailTemplates: [['insert', { id: 1, name: "Dummy mail template" }]],
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_editButton').length,
+        1,
+        "should have activity edit button"
+    );
+
+    document.querySelector('.o_Activity_editButton').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should have called 'schedule activity' action correctly"
+    );
+});
+
+QUnit.test('activity edition', async function (assert) {
+    assert.expect(14);
+
+    this.data['mail.activity'].records.push({
+        can_write: true,
+        icon: 'fa-times',
+        id: 12,
+        res_id: 42,
+        res_model: 'res.partner',
+    });
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.context.default_res_id,
+            42,
+            'Action should have the activity res id as default res id in context'
+        );
+        assert.strictEqual(
+            payload.action.context.default_res_model,
+            'res.partner',
+            'Action should have the activity res model as default res model in context'
+        );
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            'Action should be of type "ir.actions.act_window"'
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'mail.activity',
+            'Action should have "mail.activity" as res_model'
+        );
+        assert.strictEqual(
+            payload.action.res_id,
+            12,
+            'Action should have activity id as res_id'
+        );
+        this.data['mail.activity'].records[0].icon = 'fa-check';
+        payload.options.on_close();
+    });
+
+    await this.start({ env: { bus } });
+    const activity = this.env.models['mail.activity'].insert(
+        this.env.models['mail.activity'].convertData(
+            this.data['mail.activity'].records[0]
+        )
+    );
+    await this.createActivityComponent(activity);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Activity',
+        "should have activity component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_editButton',
+        "should have activity edit button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_icon',
+        "should have activity icon"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_icon.fa-times',
+        "should have initial activity icon"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Activity_icon.fa-check',
+        "should not have new activity icon when not edited yet"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_editButton').click();
+    });
+    assert.verifySteps(
+        ['do_action'],
+        "should have called 'schedule activity' action correctly"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Activity_icon.fa-times',
+        "should no more have initial activity icon once edited"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_icon.fa-check',
+        "should now have new activity icon once edited"
+    );
+});
+
+QUnit.test('activity click on cancel', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/dataset/call_kw/mail.activity/unlink') {
+                assert.step('unlink');
+                assert.strictEqual(args.args[0].length, 1);
+                assert.strictEqual(args.args[0][0], 12);
+                return;
+            } else {
+                return this._super(...arguments);
+            }
+        },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        id: 12,
+        mailTemplates: [['insert', {
+            id: 1,
+            name: "Dummy mail template",
+        }]],
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+
+    // Create a parent component to surround the Activity component in order to be able
+    // to check that activity component has been destroyed
+    class ParentComponent extends Component {
+        constructor(...args) {
+            super(... args);
+            useStore(props => {
+                const activity = this.env.models['mail.activity'].get(props.activityLocalId);
+                return {
+                    activity: activity ? activity.__state : undefined,
+                };
+            });
+        }
+
+        /**
+         * @returns {mail.activity}
+         */
+        get activity() {
+            return this.env.models['mail.activity'].get(this.props.activityLocalId);
+        }
+    }
+    ParentComponent.env = this.env;
+    Object.assign(ParentComponent, {
+        components,
+        props: { activityLocalId: String },
+        template: xml`
+            <div>
+                <p>parent</p>
+                <t t-if="activity">
+                    <Activity activityLocalId="activity.localId"/>
+                </t>
+            </div>
+        `,
+    });
+    await createRootComponent(this, ParentComponent, {
+        props: { activityLocalId: activity.localId },
+        target: this.widget.el,
+    });
+
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        1,
+        "should have activity component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity_cancelButton').length,
+        1,
+        "should have activity cancel button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Activity_cancelButton').click()
+    );
+    assert.verifySteps(
+        ['unlink'],
+        "should have called unlink rpc after clicking on cancel"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Activity').length,
+        0,
+        "should no longer display activity after clicking on cancel"
+    );
+});
+
+QUnit.test('activity mark done popover close on ESCAPE', async function (assert) {
+    // This test is not in activity_mark_done_popover_tests.js as it requires the activity mark done
+    // component to have a parent in order to allow testing interactions the popover.
+    assert.expect(2);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+
+    await this.createActivityComponent(activity);
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_markDoneButton').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "Popover component should be present"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_ActivityMarkDonePopover`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "ESCAPE pressed should have closed the mark done popover"
+    );
+});
+
+QUnit.test('activity mark done popover click on discard', async function (assert) {
+    // This test is not in activity_mark_done_popover_tests.js as it requires the activity mark done
+    // component to have a parent in order to allow testing interactions the popover.
+    assert.expect(3);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    await afterNextRender(() => {
+        document.querySelector('.o_Activity_markDoneButton').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "Popover component should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_discardButton',
+        "Popover component should contain the discard button"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ActivityMarkDonePopover_discardButton').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "Discard button clicked should have closed the mark done popover"
+    );
+});
+
+QUnit.test('data-oe-id & data-oe-model link redirection on click', async function (assert) {
+    assert.expect(7);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            "action should open view"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'some.model',
+            "action should open view on 'some.model' model"
+        );
+        assert.strictEqual(
+            payload.action.res_id,
+            250,
+            "action should open view on 250"
+        );
+        assert.step('do-action:openFormView_some.model_250');
+    });
+    await this.start({ env: { bus } });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        note: `<p><a href="#" data-oe-id="250" data-oe-model="some.model">some.model_250</a></p>`,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityComponent(activity);
+    assert.containsOnce(
+        document.body,
+        '.o_Activity_note',
+        "activity should have a note"
+    );
+    assert.containsOnce(
+        document.querySelector('.o_Activity_note'),
+        'a',
+        "activity note should have a link"
+    );
+
+    document.querySelector(`.o_Activity_note a`).click();
+    assert.verifySteps(
+        ['do-action:openFormView_some.model_250'],
+        "should have open form view on related record after click on link"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/activity_box/activity_box.js b/addons/mail/static/src/components/activity_box/activity_box.js
new file mode 100644
index 00000000..ca191694
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.js
@@ -0,0 +1,64 @@
+odoo.define('mail/static/src/components/activity_box/activity_box.js', function (require) {
+'use strict';
+
+const components = {
+    Activity: require('mail/static/src/components/activity/activity.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ActivityBox extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId);
+            const thread = chatter && chatter.thread;
+            return {
+                chatter: chatter ? chatter.__state : undefined,
+                thread: thread && thread.__state,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {Chatter}
+     */
+    get chatter() {
+        return this.env.models['mail.chatter'].get(this.props.chatterLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickTitle() {
+        this.chatter.toggleActivityBoxVisibility();
+    }
+
+}
+
+Object.assign(ActivityBox, {
+    components,
+    props: {
+        chatterLocalId: String,
+    },
+    template: 'mail.ActivityBox',
+});
+
+return ActivityBox;
+
+});
diff --git a/addons/mail/static/src/components/activity_box/activity_box.scss b/addons/mail/static/src/components/activity_box/activity_box.scss
new file mode 100644
index 00000000..64e99347
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.scss
@@ -0,0 +1,45 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ActivityBox_title {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    margin-top: map-get($spacers, 4);
+    margin-bottom: map-get($spacers, 4);
+}
+
+.o_ActivityBox_titleBadge {
+    padding: map-get($spacers, 0) map-get($spacers, 2);
+}
+
+.o_ActivityBox_titleBadges {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_ActivityBox_titleLine {
+    flex: 1 1 auto;
+    width: auto;
+}
+
+.o_ActivityBox_titleText {
+    margin: map-get($spacers, 0) map-get($spacers, 3);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ActivityBox_title {
+    font-weight: bold;
+}
+
+.o_ActivityBox_titleBadge {
+    font-size: 11px;
+}
+
+.o_ActivityBox_titleLine {
+    border-color: gray('400');
+    border-style: dashed;
+}
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
new file mode 100644
index 00000000..900b5634
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActivityBox" owl="1">
+        <div class="o_ActivityBox">
+            <t t-if="chatter and chatter.thread">
+                <a role="button" class="o_ActivityBox_title btn" t-on-click="_onClickTitle">
+                    <hr class="o_ActivityBox_titleLine" />
+                    <span class="o_ActivityBox_titleText">
+                        <i class="fa fa-fw" t-att-class="chatter.isActivityBoxVisible ? 'fa-caret-down' : 'fa-caret-right'"/>
+                        Planned activities
+                    </span>
+                    <t t-if="!chatter.isActivityBoxVisible">
+                        <span class="o_ActivityBox_titleBadges">
+                            <t t-if="chatter.thread.overdueActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-danger">
+                                    <t t-esc="chatter.thread.overdueActivities.length"/>
+                                </span>
+                            </t>
+                            <t t-if="chatter.thread.todayActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-warning">
+                                    <t t-esc="chatter.thread.todayActivities.length"/>
+                                </span>
+                            </t>
+                            <t t-if="chatter.thread.futureActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-success">
+                                    <t t-esc="chatter.thread.futureActivities.length"/>
+                                </span>
+                            </t>
+                        </span>
+                    </t>
+                    <hr class="o_ActivityBox_titleLine" />
+                </a>
+                <t t-if="chatter.isActivityBoxVisible">
+                    <div class="o_ActivityList">
+                        <t t-foreach="chatter.thread.activities" t-as="activity" t-key="activity.localId">
+                            <Activity class="o_ActivityBox_activity" activityLocalId="activity.localId"/>
+                        </t>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
new file mode 100644
index 00000000..de1ea5ce
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js
@@ -0,0 +1,122 @@
+odoo.define('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ActivityMarkDonePopover extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const activity = this.env.models['mail.activity'].get(props.activityLocalId);
+            return {
+                activity: activity ? activity.__state : undefined,
+            };
+        });
+        this._feedbackTextareaRef = useRef('feedbackTextarea');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    mounted() {
+        this._feedbackTextareaRef.el.focus();
+        if (this.activity.feedbackBackup) {
+            this._feedbackTextareaRef.el.value = this.activity.feedbackBackup;
+        }
+    }
+
+    /**
+     * @returns {mail.activity}
+     */
+    get activity() {
+        return this.env.models['mail.activity'].get(this.props.activityLocalId);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get DONE_AND_SCHEDULE_NEXT() {
+        return this.env._t("Done & Schedule Next");
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _close() {
+        this.trigger('o-popover-close');
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onBlur() {
+        this.activity.update({
+            feedbackBackup: this._feedbackTextareaRef.el.value,
+        });
+    }
+
+    /**
+     * @private
+     */
+    _onClickDiscard() {
+        this._close();
+    }
+
+    /**
+     * @private
+     */
+    async _onClickDone() {
+        await this.activity.markAsDone({
+            feedback: this._feedbackTextareaRef.el.value,
+        });
+        this.trigger('reload', { keepChanges: true });
+    }
+
+    /**
+     * @private
+     */
+    _onClickDoneAndScheduleNext() {
+        this.activity.markAsDoneAndScheduleNext({
+            feedback: this._feedbackTextareaRef.el.value,
+        });
+    }
+
+    /**
+     * @private
+     */
+    _onKeydown(ev) {
+        if (ev.key === 'Escape') {
+            this._close();
+        }
+    }
+
+}
+
+Object.assign(ActivityMarkDonePopover, {
+    props: {
+        activityLocalId: String,
+    },
+    template: 'mail.ActivityMarkDonePopover',
+});
+
+return ActivityMarkDonePopover;
+
+});
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
new file mode 100644
index 00000000..3479ffc3
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss
@@ -0,0 +1,20 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ActivityMarkDonePopover {
+    min-height: 100px;
+}
+
+.o_ActivityMarkDonePopover_buttons {
+    margin-top: map-get($spacers, 2);
+}
+
+.o_ActivityMarkDonePopover_doneButton {
+    margin: map-get($spacers, 0) map-get($spacers, 2);
+}
+
+.o_ActivityMarkDonePopover_feedback {
+    min-height: 70px;
+}
+
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
new file mode 100644
index 00000000..357ab59b
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActivityMarkDonePopover" owl="1">
+        <div class="o_ActivityMarkDonePopover" t-on-keydown="_onKeydown">
+            <t t-if="activity">
+                <textarea class="form-control o_ActivityMarkDonePopover_feedback" rows="3" placeholder="Write Feedback" t-on-blur="_onBlur" t-ref="feedbackTextarea"/>
+                <div class="o_ActivityMarkDonePopover_buttons">
+                    <button type="button" class="o_ActivityMarkDonePopover_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="_onClickDoneAndScheduleNext" t-esc="DONE_AND_SCHEDULE_NEXT"/>
+                    <t t-if="!activity.force_next">
+                        <button type="button" class="o_ActivityMarkDonePopover_doneButton btn btn-sm btn-primary" t-on-click="_onClickDone">
+                            Done
+                        </button>
+                    </t>
+                    <button type="button" class="o_ActivityMarkDonePopover_discardButton btn btn-sm btn-link" t-on-click="_onClickDiscard">
+                        Discard
+                    </button>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js
new file mode 100644
index 00000000..0c019b2b
--- /dev/null
+++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js
@@ -0,0 +1,297 @@
+odoo.define('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ActivityMarkDonePopover: require('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('activity_mark_done_popover', {}, function () {
+QUnit.module('activity_mark_done_popover_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createActivityMarkDonePopoverComponent = async activity => {
+            await createRootComponent(this, components.ActivityMarkDonePopover, {
+                props: { activityLocalId: activity.localId },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('activity mark done popover simplest layout', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "Popover component should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_feedback',
+        "Popover component should contain the feedback textarea"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_buttons',
+        "Popover component should contain the action buttons"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        "Popover component should contain the done & schedule next button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_doneButton',
+        "Popover component should contain the done button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_discardButton',
+        "Popover component should contain the discard button"
+    );
+});
+
+QUnit.test('activity with force next mark done popover simplest layout', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        force_next: true,
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover',
+        "Popover component should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_feedback',
+        "Popover component should contain the feedback textarea"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_buttons',
+        "Popover component should contain the action buttons"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_doneScheduleNextButton',
+        "Popover component should contain the done & schedule next button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ActivityMarkDonePopover_doneButton',
+        "Popover component should NOT contain the done button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ActivityMarkDonePopover_discardButton',
+        "Popover component should contain the discard button"
+    );
+});
+
+QUnit.test('activity mark done popover mark done without feedback', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/dataset/call_kw/mail.activity/action_feedback') {
+                assert.step('action_feedback');
+                assert.strictEqual(args.args.length, 1);
+                assert.strictEqual(args.args[0].length, 1);
+                assert.strictEqual(args.args[0][0], 12);
+                assert.strictEqual(args.kwargs.attachment_ids.length, 0);
+                assert.notOk(args.kwargs.feedback);
+                return;
+            }
+            if (route === '/web/dataset/call_kw/mail.activity/unlink') {
+                // 'unlink' on non-existing record raises a server crash
+                throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)");
+            }
+            return this._super(...arguments);
+        },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    document.querySelector('.o_ActivityMarkDonePopover_doneButton').click();
+    assert.verifySteps(
+        ['action_feedback'],
+        "Mark done and schedule next button should call the right rpc"
+    );
+});
+
+QUnit.test('activity mark done popover mark done with feedback', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/dataset/call_kw/mail.activity/action_feedback') {
+                assert.step('action_feedback');
+                assert.strictEqual(args.args.length, 1);
+                assert.strictEqual(args.args[0].length, 1);
+                assert.strictEqual(args.args[0][0], 12);
+                assert.strictEqual(args.kwargs.attachment_ids.length, 0);
+                assert.strictEqual(args.kwargs.feedback, 'This task is done');
+                return;
+            }
+            if (route === '/web/dataset/call_kw/mail.activity/unlink') {
+                // 'unlink' on non-existing record raises a server crash
+                throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)");
+            }
+            return this._super(...arguments);
+        },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    feedbackTextarea.focus();
+    document.execCommand('insertText', false, 'This task is done');
+    document.querySelector('.o_ActivityMarkDonePopover_doneButton').click();
+    assert.verifySteps(
+        ['action_feedback'],
+        "Mark done and schedule next button should call the right rpc"
+    );
+});
+
+QUnit.test('activity mark done popover mark done and schedule next', async function (assert) {
+    assert.expect(6);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('activity_action');
+        throw new Error("The do-action event should not be triggered when the route doesn't return an action");
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/dataset/call_kw/mail.activity/action_feedback_schedule_next') {
+                assert.step('action_feedback_schedule_next');
+                assert.strictEqual(args.args.length, 1);
+                assert.strictEqual(args.args[0].length, 1);
+                assert.strictEqual(args.args[0][0], 12);
+                assert.strictEqual(args.kwargs.feedback, 'This task is done');
+                return false;
+            }
+            if (route === '/web/dataset/call_kw/mail.activity/unlink') {
+                // 'unlink' on non-existing record raises a server crash
+                throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)");
+            }
+            return this._super(...arguments);
+        },
+        env: { bus },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback');
+    feedbackTextarea.focus();
+    document.execCommand('insertText', false, 'This task is done');
+    await afterNextRender(() => {
+        document.querySelector('.o_ActivityMarkDonePopover_doneScheduleNextButton').click();
+    });
+    assert.verifySteps(
+        ['action_feedback_schedule_next'],
+        "Mark done and schedule next button should call the right rpc and not trigger an action"
+    );
+});
+
+QUnit.test('[technical] activity mark done & schedule next with new action', async function (assert) {
+    assert.expect(3);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('activity_action');
+        assert.deepEqual(
+            payload.action,
+            { type: 'ir.actions.act_window' },
+            "The content of the action should be correct"
+        );
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (route === '/web/dataset/call_kw/mail.activity/action_feedback_schedule_next') {
+                return { type: 'ir.actions.act_window' };
+            }
+            return this._super(...arguments);
+        },
+        env: { bus },
+    });
+    const activity = this.env.models['mail.activity'].create({
+        canWrite: true,
+        category: 'not_upload_file',
+        id: 12,
+        thread: [['insert', { id: 42, model: 'res.partner' }]],
+    });
+    await this.createActivityMarkDonePopoverComponent(activity);
+
+    await afterNextRender(() => {
+        document.querySelector('.o_ActivityMarkDonePopover_doneScheduleNextButton').click();
+    });
+    assert.verifySteps(
+        ['activity_action'],
+        "The action returned by the route should be executed"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/attachment/attachment.js b/addons/mail/static/src/components/attachment/attachment.js
new file mode 100644
index 00000000..a4b7b136
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment.js
@@ -0,0 +1,204 @@
+odoo.define('mail/static/src/components/attachment/attachment.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const components = {
+    AttachmentDeleteConfirmDialog: require('mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js'),
+};
+
+const { Component, useState } = owl;
+
+class Attachment extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                attachmentLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const attachment = this.env.models['mail.attachment'].get(props.attachmentLocalId);
+            return {
+                attachment: attachment ? attachment.__state : undefined,
+            };
+        });
+        this.state = useState({
+            hasDeleteConfirmDialog: false,
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.attachment}
+     */
+    get attachment() {
+        return this.env.models['mail.attachment'].get(this.props.attachmentLocalId);
+    }
+
+    /**
+     * Return the url of the attachment. Temporary attachments, a.k.a. uploading
+     * attachments, do not have an url.
+     *
+     * @returns {string}
+     */
+    get attachmentUrl() {
+        if (this.attachment.isTemporary) {
+            return '';
+        }
+        return this.env.session.url('/web/content', {
+            id: this.attachment.id,
+            download: true,
+        });
+    }
+
+    /**
+     * Get the details mode after auto mode is computed
+     *
+     * @returns {string} 'card', 'hover' or 'none'
+     */
+    get detailsMode() {
+        if (this.props.detailsMode !== 'auto') {
+            return this.props.detailsMode;
+        }
+        if (this.attachment.fileType !== 'image') {
+            return 'card';
+        }
+        return 'hover';
+    }
+
+    /**
+     * Get the attachment representation style to be applied
+     *
+     * @returns {string}
+     */
+    get imageStyle() {
+        if (this.attachment.fileType !== 'image') {
+            return '';
+        }
+        if (this.env.isQUnitTest) {
+            // background-image:url is hardly mockable, and attachments in
+            // QUnit tests do not actually exist in DB, so style should not
+            // be fetched at all.
+            return '';
+        }
+        let size;
+        if (this.detailsMode === 'card') {
+            size = '38x38';
+        } else {
+            // The size of background-image depends on the props.imageSize
+            // to sync with width and height of `.o_Attachment_image`.
+            if (this.props.imageSize === "large") {
+                size = '400x400';
+            } else if (this.props.imageSize === "medium") {
+                size = '200x200';
+            } else if (this.props.imageSize === "small") {
+                size = '100x100';
+            }
+        }
+        // background-size set to override value from `o_image` which makes small image stretched
+        return `background-image:url(/web/image/${this.attachment.id}/${size}); background-size: auto;`;
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Download the attachment when clicking on donwload icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDownload(ev) {
+        ev.stopPropagation();
+        window.location = `/web/content/ir.attachment/${this.attachment.id}/datas?download=true`;
+    }
+
+    /**
+     * Open the attachment viewer when clicking on viewable attachment.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickImage(ev) {
+        if (!this.attachment.isViewable) {
+            return;
+        }
+        this.env.models['mail.attachment'].view({
+            attachment: this.attachment,
+            attachments: this.props.attachmentLocalIds.map(
+                attachmentLocalId => this.env.models['mail.attachment'].get(attachmentLocalId)
+            ),
+        });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickUnlink(ev) {
+        ev.stopPropagation();
+        if (!this.attachment) {
+            return;
+        }
+        if (this.attachment.isLinkedToComposer) {
+            this.attachment.remove();
+            this.trigger('o-attachment-removed', { attachmentLocalId: this.props.attachmentLocalId });
+        } else {
+            this.state.hasDeleteConfirmDialog = true;
+        }
+    }
+
+   /**
+    * @private
+    */
+    _onDeleteConfirmDialogClosed() {
+        this.state.hasDeleteConfirmDialog = false;
+    }
+}
+
+Object.assign(Attachment, {
+    components,
+    defaultProps: {
+        attachmentLocalIds: [],
+        detailsMode: 'auto',
+        imageSize: 'medium',
+        isDownloadable: false,
+        isEditable: true,
+        showExtension: true,
+        showFilename: true,
+    },
+    props: {
+        attachmentLocalId: String,
+        attachmentLocalIds: {
+            type: Array,
+            element: String,
+        },
+        detailsMode: {
+            type: String,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        imageSize: {
+            type: String,
+            validate: prop => ['small', 'medium', 'large'].includes(prop),
+        },
+        isDownloadable: Boolean,
+        isEditable: Boolean,
+        showExtension: Boolean,
+        showFilename: Boolean,
+    },
+    template: 'mail.Attachment',
+});
+
+return Attachment;
+
+});
diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss
new file mode 100644
index 00000000..583e5703
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment.scss
@@ -0,0 +1,204 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Attachment {
+    display: flex;
+
+    &:hover .o_Attachment_asideItemUnlink.o-pretty {
+        transform: translateX(0);
+    }
+}
+
+.o_Attachment_action {
+    min-width: 20px;
+}
+
+.o_Attachment_actions {
+    justify-content: space-between;
+    display: flex;
+    flex-direction: column;
+}
+
+.o_Attachment_aside {
+    position: relative;
+    overflow: hidden;
+
+    &:not(.o-has-multiple-action) {
+        min-width: 50px;
+    }
+
+    &.o-has-multiple-action {
+        min-width: 30px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.o_Attachment_asideItem {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Attachment_asideItemUnlink.o-pretty {
+    position: absolute;
+    top: 0;
+    transform: translateX(100%);
+}
+
+.o_Attachment_details {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    min-width: 0; /* This allows the text ellipsis in the flex element */
+    /* prevent hover delete button & attachment image to be too close to the text */
+    padding-left : map-get($spacers, 1);
+    padding-right : map-get($spacers, 1);
+}
+
+.o_Attachment_filename {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.o_Attachment_image {
+    flex-shrink: 0;
+    margin: 3px;
+
+    &.o-details-overlay {
+        position: relative;
+        // small, medium and large size styles should be sync with
+        // the size of the background-image and `.o_Attachment_image`.
+        &.o-small {
+            min-width: 100px;
+            min-height: 100px;
+        }
+        &.o-medium {
+            min-width: 200px;
+            min-height: 200px;
+        }
+        &.o-large {
+            min-width: 400px;
+            min-height: 400px;
+        }
+
+        &:hover {
+            .o_Attachment_imageOverlay {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.o_Attachment_imageOverlay {
+    bottom: 0;
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    left: 0;
+    padding: 10px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.o_Attachment_imageOverlayDetails {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    margin: 3px;
+    width: 200px;
+}
+
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Attachment {
+    &.o-has-card-details {
+        background-color: gray('300');
+        border-radius: 5px;
+    }
+}
+
+.o_Attachment_action {
+    border-radius: 10px;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover {
+        background: rgba(255, 255, 255, 0.2);
+    }
+}
+
+.o_Attachment_aside {
+    border-radius: 0 5px 5px 0;
+}
+
+.o_Attachment_asideItemDownload {
+    cursor: pointer;
+
+    &:hover {
+        background-color: gray('400');
+    }
+}
+
+.o_Attachment_asideItemUnlink {
+    cursor: pointer;
+
+    &:not(.o-pretty):hover {
+        background-color: gray('400');
+    }
+
+    &.o-pretty {
+        color: white;
+        background-color: $o-brand-primary;
+
+        &:hover {
+            background-color: darken($o-brand-primary, 10%);
+        }
+    }
+
+}
+
+.o_Attachment_asideItemUploaded {
+    color: $o-brand-primary;
+}
+
+.o_Attachment_extension {
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: 400;
+}
+
+.o_Attachment_image.o-attachment-viewable {
+    cursor: zoom-in;
+
+    &:not(.o-details-overlay):hover {
+        opacity: 0.7;
+    }
+}
+
+.o_Attachment_imageOverlay {
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
+    border-radius: 5px;
+    color: white;
+    opacity: 0;
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_Attachment_asideItemUnlink.o-pretty {
+    transition: transform 0.3s ease 0s;
+}
+
+.o_Attachment_imageOverlay {
+    transition: all 0.3s ease 0s;
+}
diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml
new file mode 100644
index 00000000..938ff894
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment.xml
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Attachment" owl="1">
+        <div class="o_Attachment"
+            t-att-class="{
+                'o-downloadable': props.isDownloadable,
+                'o-editable': props.isEditable,
+                'o-has-card-details': attachment and detailsMode === 'card',
+                'o-temporary': attachment and attachment.isTemporary,
+                'o-viewable': attachment and attachment.isViewable,
+            }" t-att-title="attachment ? attachment.displayName : undefined" t-att-data-attachment-local-id="attachment ? attachment.localId : undefined"
+        >
+            <t t-if="attachment">
+                <!-- Image style-->
+                <!-- o_image from mimetype.scss -->
+                <div class="o_Attachment_image o_image" t-on-click="_onClickImage"
+                    t-att-class="{
+                        'o-attachment-viewable': attachment.isViewable,
+                        'o-details-overlay': detailsMode !== 'card',
+                        'o-large': props.imageSize === 'large',
+                        'o-medium': props.imageSize === 'medium',
+                        'o-small': props.imageSize === 'small',
+                    }" t-att-href="attachmentUrl" t-att-style="imageStyle" t-att-data-mimetype="attachment.mimetype"
+                >
+                    <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'hover'">
+                        <div class="o_Attachment_imageOverlay">
+                            <div class="o_Attachment_details o_Attachment_imageOverlayDetails">
+                                <t t-if="props.showFilename">
+                                    <div class="o_Attachment_filename">
+                                        <t t-esc="attachment.displayName"/>
+                                    </div>
+                                </t>
+                                <t t-if="props.showExtension">
+                                    <div class="o_Attachment_extension">
+                                        <t t-esc="attachment.extension"/>
+                                    </div>
+                                </t>
+                            </div>
+                            <div class="o_Attachment_actions">
+                                <!-- Remove button -->
+                                <t t-if="props.isEditable" t-key="'unlink'">
+                                    <div class="o_Attachment_action o_Attachment_actionUnlink"
+                                        t-att-class="{
+                                            'o-pretty': attachment.isLinkedToComposer,
+                                        }" t-on-click="_onClickUnlink" title="Remove"
+                                    >
+                                        <i class="fa fa-times"/>
+                                    </div>
+                                </t>
+                                <!-- Download button -->
+                                <t t-if="props.isDownloadable and !attachment.isTemporary" t-key="'download'">
+                                    <div class="o_Attachment_action o_Attachment_actionDownload" t-on-click="_onClickDownload" title="Download">
+                                        <i class="fa fa-download"/>
+                                    </div>
+                                </t>
+                            </div>
+                        </div>
+                    </t>
+                </div>
+                <!-- Attachment details -->
+                <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'">
+                    <div class="o_Attachment_details">
+                        <t t-if="props.showFilename">
+                            <div class="o_Attachment_filename">
+                                <t t-esc="attachment.displayName"/>
+                            </div>
+                        </t>
+                        <t t-if="props.showExtension">
+                            <div class="o_Attachment_extension">
+                                <t t-esc="attachment.extension"/>
+                            </div>
+                        </t>
+                    </div>
+                </t>
+                <!-- Attachment aside -->
+                <t t-if="detailsMode !== 'hover' and (props.isDownloadable or props.isEditable)">
+                    <div class="o_Attachment_aside" t-att-class="{ 'o-has-multiple-action': props.isDownloadable and props.isEditable }">
+                        <!-- Uploading icon -->
+                        <t t-if="attachment.isTemporary and attachment.isLinkedToComposer">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUploading" title="Uploading">
+                                <i class="fa fa-spin fa-spinner"/>
+                            </div>
+                        </t>
+                        <!-- Uploaded icon -->
+                        <t t-if="!attachment.isTemporary and attachment.isLinkedToComposer">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUploaded" title="Uploaded">
+                                <i class="fa fa-check"/>
+                            </div>
+                        </t>
+                        <!-- Remove button -->
+                        <t t-if="props.isEditable">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemUnlink" t-att-class="{ 'o-pretty': attachment.isLinkedToComposer }" t-on-click="_onClickUnlink" title="Remove">
+                                <i class="fa fa-times"/>
+                            </div>
+                        </t>
+                        <!-- Download button -->
+                        <t t-if="props.isDownloadable and !attachment.isTemporary">
+                            <div class="o_Attachment_asideItem o_Attachment_asideItemDownload" t-on-click="_onClickDownload" title="Download">
+                                <i class="fa fa-download"/>
+                            </div>
+                        </t>
+                    </div>
+                </t>
+                <t t-if="state.hasDeleteConfirmDialog">
+                    <AttachmentDeleteConfirmDialog
+                        attachmentLocalId="props.attachmentLocalId"
+                        t-on-dialog-closed="_onDeleteConfirmDialogClosed"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js
new file mode 100644
index 00000000..eaeb267d
--- /dev/null
+++ b/addons/mail/static/src/components/attachment/attachment_tests.js
@@ -0,0 +1,762 @@
+odoo.define('mail/static/src/components/attachment/attachment_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Attachment: require('mail/static/src/components/attachment/attachment.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('attachment', {}, function () {
+QUnit.module('attachment_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createAttachmentComponent = async (attachment, otherProps) => {
+            const props = Object.assign({ attachmentLocalId: attachment.localId }, otherProps);
+            await createRootComponent(this, components.Attachment, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('simplest layout', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false,
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    const attachmentEl = document.querySelector('.o_Attachment');
+    assert.strictEqual(
+        attachmentEl.dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].findFromIdentifyingData({ id: 750 }).localId,
+        "attachment component should be linked to attachment store model"
+    );
+    assert.strictEqual(
+        attachmentEl.title,
+        "test.txt",
+        "attachment should have filename as title attribute"
+    );
+    assert.strictEqual(
+        attachmentEl.querySelectorAll(`:scope .o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    const attachmentImage = document.querySelector(`.o_Attachment_image`);
+    assert.ok(
+        attachmentImage.classList.contains('o_image'),
+        "attachment should have o_image classname (required for mimetype.scss style)"
+    );
+    assert.strictEqual(
+        attachmentImage.dataset.mimetype,
+        'text/plain',
+        "attachment should have data-mimetype set (required for mimetype.scss style)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside part"
+    );
+});
+
+QUnit.test('simplest layout + deletable', async function (assert) {
+    assert.expect(6);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('web/image/750')) {
+                assert.ok(
+                    route.includes('/200x200'),
+                    "should fetch image with 200x200 pixels ratio");
+                assert.step('fetch_image');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: false,
+        isEditable: true,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        1,
+        "attachment should have only one aside item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length,
+        1,
+        "attachment should have a delete button"
+    );
+});
+
+QUnit.test('simplest layout + downloadable', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: true,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        1,
+        "attachment should have only one aside item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemDownload`).length,
+        1,
+        "attachment should have a download button"
+    );
+});
+
+QUnit.test('simplest layout + deletable + downloadable', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'none',
+        isDownloadable: true,
+        isEditable: true,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Attachment').length,
+        1,
+        "should have attachment component in DOM"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        1,
+        "attachment should have an aside part"
+    );
+    assert.ok(
+        document.querySelector(`.o_Attachment_aside`).classList.contains('o-has-multiple-action'),
+        "attachment aside should contain multiple actions"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItem`).length,
+        2,
+        "attachment should have only two aside items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemDownload`).length,
+        1,
+        "attachment should have a download button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length,
+        1,
+        "attachment should have a delete button"
+    );
+});
+
+QUnit.test('layout with card details', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        0,
+        "attachment should not have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside part"
+    );
+});
+
+QUnit.test('layout with card details and filename', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: false,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should not have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        0,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('layout with card details and extension', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: false
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        0,
+        "attachment should not have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('layout with card details and filename and extension', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_details`).length,
+        1,
+        "attachment should have a details part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+});
+
+QUnit.test('simplest layout with hover details and filename and extension', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'hover',
+        isDownloadable: true,
+        isEditable: true,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Attachment_details:not(.o_Attachment_imageOverlayDetails)
+        `).length,
+        0,
+        "attachment should not have a details part directly"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length,
+        1,
+        "attachment should have a details part in the overlay"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlay`).length,
+        1,
+        "attachment should have an image overlay part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_actions`).length,
+        1,
+        "attachment should have an actions part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside element"
+    );
+});
+
+QUnit.test('auto layout with image', async function (assert) {
+    assert.expect(7);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.png",
+        id: 750,
+        mimetype: 'image/png',
+        name: "test.png",
+    });
+
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'auto',
+        isDownloadable: false,
+        isEditable: false,
+        showExtension: true,
+        showFilename: true
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Attachment_details:not(.o_Attachment_imageOverlayDetails)
+        `).length,
+        0,
+        "attachment should not have a details part directly"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length,
+        1,
+        "attachment should have a details part in the overlay"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_image`).length,
+        1,
+        "attachment should have an image part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_imageOverlay`).length,
+        1,
+        "attachment should have an image overlay part"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_filename`).length,
+        1,
+        "attachment should have its filename shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_extension`).length,
+        1,
+        "attachment should have its extension shown"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Attachment_aside`).length,
+        0,
+        "attachment should not have an aside element"
+    );
+});
+
+QUnit.test('view attachment', async function (assert) {
+    assert.expect(3);
+
+    await this.start({
+        hasDialog: true,
+    });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.png",
+        id: 750,
+        mimetype: 'image/png',
+        name: "test.png",
+    });
+
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'hover',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment_image',
+        "attachment should have an image part"
+    );
+    await afterNextRender(() => document.querySelector('.o_Attachment_image').click());
+    assert.containsOnce(
+        document.body,
+        '.o_Dialog',
+        'a dialog should have been opened once attachment image is clicked',
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentViewer',
+        'an attachment viewer should have been opened once attachment image is clicked',
+    );
+});
+
+QUnit.test('close attachment viewer', async function (assert) {
+    assert.expect(3);
+
+    await this.start({ hasDialog: true });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.png",
+        id: 750,
+        mimetype: 'image/png',
+        name: "test.png",
+    });
+
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'hover',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment_image',
+        "attachment should have an image part"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Attachment_image').click());
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentViewer',
+        "an attachment viewer should have been opened once attachment image is clicked",
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentViewer_headerItemButtonClose').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Dialog',
+        "attachment viewer should be closed after clicking on close button"
+    );
+});
+
+QUnit.test('clicking on the delete attachment button multiple times should do the rpc only once', async function (assert) {
+    assert.expect(2);
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === "unlink" && args.model === "ir.attachment") {
+                assert.step('attachment_unlink');
+                return;
+            }
+            return this._super(...arguments);
+        },
+    });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'hover',
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_Attachment_actionUnlink').click();
+    });
+
+    await afterNextRender(() => {
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click();
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click();
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click();
+    });
+    assert.verifySteps(
+        ['attachment_unlink'],
+        "The unlink method must be called once"
+    );
+});
+
+QUnit.test('[technical] does not crash when the viewer is closed before image load', async function (assert) {
+    /**
+     * When images are displayed using `src` attribute for the 1st time, it fetches the resource.
+     * In this case, images are actually displayed (fully fetched and rendered on screen) when
+     * `<image>` intercepts `load` event.
+     *
+     * Current code needs to be aware of load state of image, to display spinner when loading
+     * and actual image when loaded. This test asserts no crash from mishandling image becoming
+     * loaded from being viewed for 1st time, but viewer being closed while image is loading.
+     */
+    assert.expect(1);
+
+    await this.start({ hasDialog: true });
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.png",
+        id: 750,
+        mimetype: 'image/png',
+        name: "test.png",
+    });
+    await this.createAttachmentComponent(attachment);
+    await afterNextRender(() => document.querySelector('.o_Attachment_image').click());
+    const imageEl = document.querySelector('.o_AttachmentViewer_viewImage');
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentViewer_headerItemButtonClose').click()
+    );
+    // Simulate image becoming loaded.
+    let successfulLoad;
+    try {
+        imageEl.dispatchEvent(new Event('load', { bubbles: true }));
+        successfulLoad = true;
+    } catch (err) {
+        successfulLoad = false;
+    } finally {
+        assert.ok(successfulLoad, 'should not crash when the image is loaded');
+    }
+});
+
+QUnit.test('plain text file is viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.txt",
+        id: 750,
+        mimetype: 'text/plain',
+        name: "test.txt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.hasClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should be viewable",
+    );
+});
+
+QUnit.test('HTML file is viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.html",
+        id: 750,
+        mimetype: 'text/html',
+        name: "test.html",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.hasClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should be viewable",
+    );
+});
+
+QUnit.test('ODT file is not viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.odt",
+        id: 750,
+        mimetype: 'application/vnd.oasis.opendocument.text',
+        name: "test.odt",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.doesNotHaveClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should not be viewable",
+    );
+});
+
+QUnit.test('DOCX file is not viewable', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const attachment = this.env.models['mail.attachment'].create({
+        filename: "test.docx",
+        id: 750,
+        mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        name: "test.docx",
+    });
+    await this.createAttachmentComponent(attachment, {
+        detailsMode: 'card',
+        isDownloadable: false,
+        isEditable: false,
+    });
+    assert.doesNotHaveClass(
+        document.querySelector('.o_Attachment'),
+        'o-viewable',
+        "should not be viewable",
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.js b/addons/mail/static/src/components/attachment_box/attachment_box.js
new file mode 100644
index 00000000..5bfe7c06
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_box/attachment_box.js
@@ -0,0 +1,124 @@
+odoo.define('mail/static/src/components/attachment_box/attachment_box.js', function (require) {
+'use strict';
+
+const components = {
+    AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'),
+    DropZone: require('mail/static/src/components/drop_zone/drop_zone.js'),
+    FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'),
+};
+const useDragVisibleDropZone = require('mail/static/src/component_hooks/use_drag_visible_dropzone/use_drag_visible_dropzone.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class AttachmentBox extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.isDropZoneVisible = useDragVisibleDropZone();
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            return {
+                thread,
+                threadAllAttachments: thread ? thread.allAttachments : [],
+                threadId: thread && thread.id,
+                threadModel: thread && thread.model,
+            };
+        }, {
+            compareDepth: {
+                threadAllAttachments: 1,
+            },
+        });
+        /**
+         * Reference of the file uploader.
+         * Useful to programmatically prompts the browser file uploader.
+         */
+        this._fileUploaderRef = useRef('fileUploader');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Get an object which is passed to FileUploader component to be used when
+     * creating attachment.
+     *
+     * @returns {Object}
+     */
+    get newAttachmentExtraData() {
+        return {
+            originThread: [['link', this.thread]],
+        };
+    }
+
+    /**
+     * @returns {mail.thread|undefined}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onAttachmentCreated(ev) {
+        // FIXME Could be changed by spying attachments count (task-2252858)
+        this.trigger('o-attachments-changed');
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onAttachmentRemoved(ev) {
+        // FIXME Could be changed by spying attachments count (task-2252858)
+        this.trigger('o-attachments-changed');
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClickAdd(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this._fileUploaderRef.comp.openBrowserFileUploader();
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {FileList} ev.detail.files
+     */
+    async _onDropZoneFilesDropped(ev) {
+        ev.stopPropagation();
+        await this._fileUploaderRef.comp.uploadFiles(ev.detail.files);
+        this.isDropZoneVisible.value = false;
+    }
+
+}
+
+Object.assign(AttachmentBox, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.AttachmentBox',
+});
+
+return AttachmentBox;
+
+});
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.scss b/addons/mail/static/src/components/attachment_box/attachment_box.scss
new file mode 100644
index 00000000..d51cca9c
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_box/attachment_box.scss
@@ -0,0 +1,46 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_AttachmentBox {
+    position: relative;
+}
+
+.o_AttachmentBox_buttonAdd {
+    align-self: center;
+}
+
+.o_AttachmentBox_content {
+    display: flex;
+    flex-direction: column;
+}
+
+.o_AttachmentBox_dashedLine {
+    flex-grow: 1;
+}
+
+.o_AttachmentBox_fileInput {
+    display: none;
+}
+
+.o_AttachmentBox_title {
+    display: flex;
+    align-items: center;
+}
+
+.o_AttachmentBox_titleText {
+    padding: map-get($spacers, 3);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_AttachmentBox_dashedLine {
+    border-style: dashed;
+    border-color: gray('300');
+}
+
+.o_AttachmentBox_title {
+    font-weight: bold;
+}
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.xml b/addons/mail/static/src/components/attachment_box/attachment_box.xml
new file mode 100644
index 00000000..9cd3e713
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_box/attachment_box.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.AttachmentBox" owl="1">
+        <div class="o_AttachmentBox">
+            <div class="o_AttachmentBox_title">
+                <hr class="o_AttachmentBox_dashedLine"/>
+                <span class="o_AttachmentBox_titleText">
+                    Attachments
+                </span>
+                <hr class="o_AttachmentBox_dashedLine"/>
+            </div>
+            <div class="o_AttachmentBox_content">
+                <t t-if="isDropZoneVisible.value">
+                    <DropZone
+                        class="o_AttachmentBox_dropZone"
+                        t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped"
+                        t-ref="dropzone"
+                    />
+                </t>
+                <t t-if="thread and thread.allAttachments.length > 0">
+                    <AttachmentList
+                        class="o_attachmentBox_attachmentList"
+                        areAttachmentsDownloadable="true"
+                        attachmentLocalIds="thread.allAttachments.map(attachment => attachment.localId)"
+                        attachmentsDetailsMode="'hover'"
+                        attachmentsImageSize="'small'"
+                        showAttachmentsFilenames="true"
+                        t-on-o-attachment-removed="_onAttachmentRemoved"
+                    />
+                </t>
+                <button class="o_AttachmentBox_buttonAdd btn btn-link" type="button" t-on-click="_onClickAdd">
+                    <i class="fa fa-plus-square"/>
+                    Add attachments
+                </button>
+            </div>
+            <t t-if="thread">
+                <FileUploader
+                    attachmentLocalIds="thread.allAttachments.map(attachment => attachment.localId)"
+                    newAttachmentExtraData="newAttachmentExtraData"
+                    uploadModel="thread.model"
+                    uploadId="thread.id"
+                    t-on-o-attachment-created="_onAttachmentCreated"
+                    t-ref="fileUploader"
+                />
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box_tests.js b/addons/mail/static/src/components/attachment_box/attachment_box_tests.js
new file mode 100644
index 00000000..142eb804
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_box/attachment_box_tests.js
@@ -0,0 +1,337 @@
+odoo.define('mail/static/src/components/attachment_box/attachment_box_tests.js', function (require) {
+"use strict";
+
+const components = {
+    AttachmentBox: require('mail/static/src/components/attachment_box/attachment_box.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    dragenterFiles,
+    dropFiles,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const { file: { createFile } } = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('attachment_box', {}, function () {
+QUnit.module('attachment_box_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createAttachmentBoxComponent = async (thread, otherProps) => {
+            const props = Object.assign({ threadLocalId: thread.localId }, otherProps);
+            await createRootComponent(this, components.AttachmentBox, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base empty rendering', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createAttachmentBoxComponent(thread);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox`).length,
+        1,
+        "should have an attachment box"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox_buttonAdd`).length,
+        1,
+        "should have a button add"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_FileUploader_input`).length,
+        1,
+        "should have a file input"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length,
+        0,
+        "should not have any attachment"
+    );
+});
+
+QUnit.test('base non-empty rendering', async function (assert) {
+    assert.expect(6);
+
+    this.data['ir.attachment'].records.push(
+        {
+            mimetype: 'text/plain',
+            name: 'Blah.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+        {
+            mimetype: 'text/plain',
+            name: 'Blu.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        }
+    );
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('ir.attachment/search_read')) {
+                assert.step('ir.attachment/search_read');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await thread.fetchAttachments();
+    await this.createAttachmentBoxComponent(thread);
+    assert.verifySteps(
+        ['ir.attachment/search_read'],
+        "should have fetched attachments"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox`).length,
+        1,
+        "should have an attachment box"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox_buttonAdd`).length,
+        1,
+        "should have a button add"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_FileUploader_input`).length,
+        1,
+        "should have a file input"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_attachmentBox_attachmentList`).length,
+        1,
+        "should have an attachment list"
+    );
+});
+
+QUnit.test('attachment box: drop attachments', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await thread.fetchAttachments();
+    await this.createAttachmentBoxComponent(thread);
+    const files = [
+        await createFile({
+            content: 'hello, world',
+            contentType: 'text/plain',
+            name: 'text.txt',
+        }),
+    ];
+    assert.strictEqual(
+        document.querySelectorAll('.o_AttachmentBox').length,
+        1,
+        "should have an attachment box"
+    );
+
+    await afterNextRender(() =>
+        dragenterFiles(document.querySelector('.o_AttachmentBox'))
+    );
+    assert.ok(
+        document.querySelector('.o_AttachmentBox_dropZone'),
+        "should have a drop zone"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length,
+        0,
+        "should have no attachment before files are dropped"
+    );
+
+    await afterNextRender(() =>
+        dropFiles(
+            document.querySelector('.o_AttachmentBox_dropZone'),
+            files
+        )
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length,
+        1,
+        "should have 1 attachment in the box after files dropped"
+    );
+
+    await afterNextRender(() =>
+        dragenterFiles(document.querySelector('.o_AttachmentBox'))
+    );
+    const file1 = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text2.txt',
+    });
+    const file2 = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text3.txt',
+    });
+    await afterNextRender(() =>
+        dropFiles(
+            document.querySelector('.o_AttachmentBox_dropZone'),
+            [file1, file2]
+        )
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length,
+        3,
+        "should have 3 attachments in the box after files dropped"
+    );
+});
+
+QUnit.test('view attachments', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        hasDialog: true,
+    });
+    const thread = this.env.models['mail.thread'].create({
+        attachments: [
+            ['insert', {
+                id: 143,
+                mimetype: 'text/plain',
+                name: 'Blah.txt'
+            }],
+            ['insert', {
+                id: 144,
+                mimetype: 'text/plain',
+                name: 'Blu.txt'
+            }]
+        ],
+        id: 100,
+        model: 'res.partner',
+    });
+    const firstAttachment = this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 });
+    await this.createAttachmentBoxComponent(thread);
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_Attachment[data-attachment-local-id="${firstAttachment.localId}"]
+            .o_Attachment_image
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Dialog',
+        "a dialog should have been opened once attachment image is clicked",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentViewer',
+        "an attachment viewer should have been opened once attachment image is clicked",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_AttachmentViewer_name').textContent,
+        'Blah.txt',
+        "attachment viewer iframe should point to clicked attachment",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentViewer_buttonNavigationNext',
+        "attachment viewer should allow to see next attachment",
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentViewer_buttonNavigationNext').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_AttachmentViewer_name').textContent,
+        'Blu.txt',
+        "attachment viewer iframe should point to next attachment of attachment box",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentViewer_buttonNavigationNext',
+        "attachment viewer should allow to see next attachment",
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentViewer_buttonNavigationNext').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_AttachmentViewer_name').textContent,
+        'Blah.txt',
+        "attachment viewer iframe should point anew to first attachment",
+    );
+});
+
+QUnit.test('remove attachment should ask for confirmation', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        attachments: [
+            ['insert', {
+                id: 143,
+                mimetype: 'text/plain',
+                name: 'Blah.txt'
+            }],
+        ],
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createAttachmentBoxComponent(thread);
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have an attachment",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment_asideItemUnlink',
+        "attachment should have a delete button"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Attachment_asideItemUnlink').click());
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentDeleteConfirmDialog',
+        "A confirmation dialog should have been opened"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_mainText').textContent,
+        `Do you really want to delete "Blah.txt"?`,
+        "Confirmation dialog should contain the attachment delete confirmation text"
+    );
+
+    // Confirm the deletion
+    await afterNextRender(() => document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click());
+    assert.containsNone(
+        document.body,
+        '.o_Attachment',
+        "should no longer have an attachment",
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
new file mode 100644
index 00000000..ab7e155a
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
@@ -0,0 +1,92 @@
+odoo.define('mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const components = {
+    Dialog: require('web.OwlDialog'),
+};
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class AttachmentDeleteConfirmDialog extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const attachment = this.env.models['mail.attachment'].get(props.attachmentLocalId);
+            return {
+                attachment: attachment ? attachment.__state : undefined,
+            };
+        });
+        // to manually trigger the dialog close event
+        this._dialogRef = useRef('dialog');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.attachment}
+     */
+    get attachment() {
+        return this.env.models['mail.attachment'].get(this.props.attachmentLocalId);
+    }
+
+    /**
+     * @returns {string}
+     */
+    getBody() {
+        return _.str.sprintf(
+            this.env._t(`Do you really want to delete "%s"?`),
+            owl.utils.escape(this.attachment.displayName)
+        );
+    }
+
+    /**
+     * @returns {string}
+     */
+    getTitle() {
+        return this.env._t("Confirmation");
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickCancel() {
+        this._dialogRef.comp._close();
+    }
+
+    /**
+     * @private
+     */
+    _onClickOk() {
+        this._dialogRef.comp._close();
+        this.attachment.remove();
+        this.trigger('o-attachment-removed', { attachmentLocalId: this.props.attachmentLocalId });
+    }
+
+}
+
+Object.assign(AttachmentDeleteConfirmDialog, {
+    components,
+    props: {
+        attachmentLocalId: String,
+    },
+    template: 'mail.AttachmentDeleteConfirmDialog',
+});
+
+return AttachmentDeleteConfirmDialog;
+
+});
diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
new file mode 100644
index 00000000..6b466a9b
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.AttachmentDeleteConfirmDialog" owl="1">
+        <Dialog contentClass="'o_AttachmentDeleteConfirmDialog'" title="getTitle()" size="'medium'" t-ref="dialog">
+            <p class="o_AttachmentDeleteConfirmDialog_mainText" t-esc="getBody()"/>
+            <t t-set-slot="buttons">
+                <button class="o_AttachmentDeleteConfirmDialog_confirmButton btn btn-primary" t-on-click="_onClickOk">Ok</button>
+                <button class="o_AttachmentDeleteConfirmDialog_cancelButton btn btn-secondary" t-on-click="_onClickCancel">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.js b/addons/mail/static/src/components/attachment_list/attachment_list.js
new file mode 100644
index 00000000..d8658ac8
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.js
@@ -0,0 +1,119 @@
+odoo.define('mail/static/src/components/attachment_list/attachment_list.js', function (require) {
+'use strict';
+
+const components = {
+    Attachment: require('mail/static/src/components/attachment/attachment.js'),
+};
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class AttachmentList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                attachmentLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const attachments = this.env.models['mail.attachment'].all().filter(attachment =>
+                props.attachmentLocalIds.includes(attachment.localId)
+            );
+            return {
+                attachments: attachments
+                    ? attachments.map(attachment => attachment.__state)
+                    : undefined,
+            };
+        }, {
+            compareDepth: {
+                attachments: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get attachments() {
+        return this.env.models['mail.attachment'].all().filter(attachment =>
+            this.props.attachmentLocalIds.includes(attachment.localId)
+        );
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get imageAttachments() {
+        return this.attachments.filter(attachment => attachment.fileType === 'image');
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get nonImageAttachments() {
+        return this.attachments.filter(attachment => attachment.fileType !== 'image');
+    }
+
+    /**
+     * @returns {mail.attachment[]}
+     */
+    get viewableAttachments() {
+        return this.attachments.filter(attachment => attachment.isViewable);
+    }
+
+}
+
+Object.assign(AttachmentList, {
+    components,
+    defaultProps: {
+        attachmentLocalIds: [],
+    },
+    props: {
+        areAttachmentsDownloadable: {
+            type: Boolean,
+            optional: true,
+        },
+        areAttachmentsEditable: {
+            type: Boolean,
+            optional: true,
+        },
+        attachmentLocalIds: {
+            type: Array,
+            element: String,
+        },
+        attachmentsDetailsMode: {
+            type: String,
+            optional: true,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        attachmentsImageSize: {
+            type: String,
+            optional: true,
+            validate: prop => ['small', 'medium', 'large'].includes(prop),
+        },
+        showAttachmentsExtensions: {
+            type: Boolean,
+            optional: true,
+        },
+        showAttachmentsFilenames: {
+            type: Boolean,
+            optional: true,
+        },
+    },
+    template: 'mail.AttachmentList',
+});
+
+return AttachmentList;
+
+});
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.scss b/addons/mail/static/src/components/attachment_list/attachment_list.scss
new file mode 100644
index 00000000..dfe281ae
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.scss
@@ -0,0 +1,29 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_AttachmentList {
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+}
+
+/* Avoid overflow of long attachment text */
+.o_AttachmentList_attachment {
+    margin-bottom: map-get($spacers, 1);
+    margin-top: map-get($spacers, 1);
+    margin-inline-end: map-get($spacers, 1);
+    margin-inline-start: map-get($spacers, 0);
+    max-width: 100%;
+}
+
+.o_AttachmentList_partialList {
+    display: flex;
+    flex: 1;
+    flex-flow: wrap;
+}
+
+.o_AttachmentList_partialListNonImages {
+    margin: map-get($spacers, 1);
+    justify-content: flex-start;
+}
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.xml b/addons/mail/static/src/components/attachment_list/attachment_list.xml
new file mode 100644
index 00000000..39499285
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.AttachmentList" owl="1">
+        <div class="o_AttachmentList">
+            <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages">
+                <t t-foreach="imageAttachments" t-as="attachment" t-key="attachment.localId">
+                    <Attachment
+                        class="o_AttachmentList_attachment o_AttachmentList_imageAttachment"
+                        attachmentLocalId="attachment.localId"
+                        attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)"
+                        detailsMode="props.attachmentsDetailsMode"
+                        imageSize="props.attachmentsImageSize"
+                        isDownloadable="props.areAttachmentsDownloadable"
+                        isEditable="props.areAttachmentsEditable"
+                        showExtension="props.showAttachmentsExtensions"
+                        showFilename="props.showAttachmentsFilenames"
+                    />
+                </t>
+            </div>
+            <div class="o_AttachmentList_partialList o_AttachmentList_partialListNonImages">
+                <t t-foreach="nonImageAttachments" t-as="attachment" t-key="attachment.localId">
+                    <Attachment
+                        class="o_AttachmentList_attachment o_AttachmentList_nonImageAttachment"
+                        attachmentLocalId="attachment.localId"
+                        attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)"
+                        detailsMode="'card'"
+                        imageSize="props.attachmentsImageSize"
+                        isDownloadable="props.areAttachmentsDownloadable"
+                        isEditable="props.areAttachmentsEditable"
+                        showExtension="props.showAttachmentsExtensions"
+                        showFilename="props.showAttachmentsFilenames"
+                    />
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
new file mode 100644
index 00000000..30755fd9
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
@@ -0,0 +1,598 @@
+odoo.define('mail/static/src/components/attachment_viewer/attachment_viewer.js', function (require) {
+'use strict';
+
+const useRefs = require('mail/static/src/component_hooks/use_refs/use_refs.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component, QWeb } = owl;
+const { useRef } = owl.hooks;
+
+const MIN_SCALE = 0.5;
+const SCROLL_ZOOM_STEP = 0.1;
+const ZOOM_STEP = 0.5;
+
+class AttachmentViewer extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.MIN_SCALE = MIN_SCALE;
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const attachmentViewer = this.env.models['mail.attachment_viewer'].get(props.localId);
+            return {
+                attachment: attachmentViewer && attachmentViewer.attachment
+                    ? attachmentViewer.attachment.__state
+                    : undefined,
+                attachments: attachmentViewer
+                    ? attachmentViewer.attachments.map(attachment => attachment.__state)
+                    : [],
+                attachmentViewer: attachmentViewer ? attachmentViewer.__state : undefined,
+            };
+        });
+        /**
+         * Used to ensure that the ref is always up to date, which seems to be needed if the element
+         * has a t-key, which was added to force the rendering of a new element when the src of the image changes.
+         * This was made to remove the display of the previous image as soon as the src changes.
+         */
+        this._getRefs = useRefs();
+        /**
+         * Determine whether the user is currently dragging the image.
+         * This is useful to determine whether a click outside of the image
+         * should close the attachment viewer or not.
+         */
+        this._isDragging = false;
+        /**
+         * Reference of the zoomer node. Useful to apply translate
+         * transformation on image visualisation.
+         */
+        this._zoomerRef = useRef('zoomer');
+        /**
+         * Tracked translate transformations on image visualisation. This is
+         * not observed with `useStore` because they are used to compute zoomer
+         * style, and this is changed directly on zoomer for performance
+         * reasons (overhead of making vdom is too significant for each mouse
+         * position changes while dragging)
+         */
+        this._translate = { x: 0, y: 0, dx: 0, dy: 0 };
+        this._onClickGlobal = this._onClickGlobal.bind(this);
+    }
+
+    mounted() {
+        this.el.focus();
+        this._handleImageLoad();
+        document.addEventListener('click', this._onClickGlobal);
+    }
+
+    /**
+     * When a new image is displayed, show a spinner until it is loaded.
+     */
+    patched() {
+        this._handleImageLoad();
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickGlobal);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.attachment_viewer}
+     */
+    get attachmentViewer() {
+        return this.env.models['mail.attachment_viewer'].get(this.props.localId);
+    }
+
+    /**
+     * Compute the style of the image (scale + rotation).
+     *
+     * @returns {string}
+     */
+    get imageStyle() {
+        const attachmentViewer = this.attachmentViewer;
+        let style = `transform: ` +
+            `scale3d(${attachmentViewer.scale}, ${attachmentViewer.scale}, 1) ` +
+            `rotate(${attachmentViewer.angle}deg);`;
+
+        if (attachmentViewer.angle % 180 !== 0) {
+            style += `` +
+                `max-height: ${window.innerWidth}px; ` +
+                `max-width: ${window.innerHeight}px;`;
+        } else {
+            style += `` +
+                `max-height: 100%; ` +
+                `max-width: 100%;`;
+        }
+        return style;
+    }
+
+    /**
+     * Mandatory method for dialog components.
+     * Prevent closing the dialog when clicking on the mask when the user is
+     * currently dragging the image.
+     *
+     * @returns {boolean}
+     */
+    isCloseable() {
+        return !this._isDragging;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Close the dialog with this attachment viewer.
+     *
+     * @private
+     */
+    _close() {
+        this.attachmentViewer.close();
+    }
+
+    /**
+     * Download the attachment.
+     *
+     * @private
+     */
+    _download() {
+        const id = this.attachmentViewer.attachment.id;
+        this.env.services.navigate(`/web/content/ir.attachment/${id}/datas`, { download: true });
+    }
+
+    /**
+     * Determine whether the current image is rendered for the 1st time, and if
+     * that's the case, display a spinner until loaded.
+     *
+     * @private
+     */
+    _handleImageLoad() {
+        if (!this.attachmentViewer || !this.attachmentViewer.attachment) {
+            return;
+        }
+        const refs = this._getRefs();
+        const image = refs[`image_${this.attachmentViewer.attachment.id}`];
+        if (
+            this.attachmentViewer.attachment.fileType === 'image' &&
+            (!image || !image.complete)
+        ) {
+            this.attachmentViewer.update({ isImageLoading: true });
+        }
+    }
+
+    /**
+     * Display the previous attachment in the list of attachments.
+     *
+     * @private
+     */
+    _next() {
+        const attachmentViewer = this.attachmentViewer;
+        const index = attachmentViewer.attachments.findIndex(attachment =>
+            attachment === attachmentViewer.attachment
+        );
+        const nextIndex = (index + 1) % attachmentViewer.attachments.length;
+        attachmentViewer.update({
+            attachment: [['link', attachmentViewer.attachments[nextIndex]]],
+        });
+    }
+
+    /**
+     * Display the previous attachment in the list of attachments.
+     *
+     * @private
+     */
+    _previous() {
+        const attachmentViewer = this.attachmentViewer;
+        const index = attachmentViewer.attachments.findIndex(attachment =>
+            attachment === attachmentViewer.attachment
+        );
+        const nextIndex = index === 0
+            ? attachmentViewer.attachments.length - 1
+            : index - 1;
+        attachmentViewer.update({
+            attachment: [['link', attachmentViewer.attachments[nextIndex]]],
+        });
+    }
+
+    /**
+     * Prompt the browser print of this attachment.
+     *
+     * @private
+     */
+    _print() {
+        const printWindow = window.open('about:blank', '_new');
+        printWindow.document.open();
+        printWindow.document.write(`
+            <html>
+                <head>
+                    <script>
+                        function onloadImage() {
+                            setTimeout('printImage()', 10);
+                        }
+                        function printImage() {
+                            window.print();
+                            window.close();
+                        }
+                    </script>
+                </head>
+                <body onload='onloadImage()'>
+                    <img src="${this.attachmentViewer.attachment.defaultSource}" alt=""/>
+                </body>
+            </html>`);
+        printWindow.document.close();
+    }
+
+    /**
+     * Rotate the image by 90 degrees to the right.
+     *
+     * @private
+     */
+    _rotate() {
+        this.attachmentViewer.update({ angle: this.attachmentViewer.angle + 90 });
+    }
+
+    /**
+     * Stop dragging interaction of the user.
+     *
+     * @private
+     */
+    _stopDragging() {
+        this._isDragging = false;
+        this._translate.x += this._translate.dx;
+        this._translate.y += this._translate.dy;
+        this._translate.dx = 0;
+        this._translate.dy = 0;
+        this._updateZoomerStyle();
+    }
+
+    /**
+     * Update the style of the zoomer based on translate transformation. Changes
+     * are directly applied on zoomer, instead of triggering re-render and
+     * defining them in the template, for performance reasons.
+     *
+     * @private
+     * @returns {string}
+     */
+    _updateZoomerStyle() {
+        const attachmentViewer = this.attachmentViewer;
+        const refs = this._getRefs();
+        const image = refs[`image_${this.attachmentViewer.attachment.id}`];
+        const tx = image.offsetWidth * attachmentViewer.scale > this._zoomerRef.el.offsetWidth
+            ? this._translate.x + this._translate.dx
+            : 0;
+        const ty = image.offsetHeight * attachmentViewer.scale > this._zoomerRef.el.offsetHeight
+            ? this._translate.y + this._translate.dy
+            : 0;
+        if (tx === 0) {
+            this._translate.x = 0;
+        }
+        if (ty === 0) {
+            this._translate.y = 0;
+        }
+        this._zoomerRef.el.style = `transform: ` +
+            `translate(${tx}px, ${ty}px)`;
+    }
+
+    /**
+     * Zoom in the image.
+     *
+     * @private
+     * @param {Object} [param0={}]
+     * @param {boolean} [param0.scroll=false]
+     */
+    _zoomIn({ scroll = false } = {}) {
+        this.attachmentViewer.update({
+            scale: this.attachmentViewer.scale + (scroll ? SCROLL_ZOOM_STEP : ZOOM_STEP),
+        });
+        this._updateZoomerStyle();
+    }
+
+    /**
+     * Zoom out the image.
+     *
+     * @private
+     * @param {Object} [param0={}]
+     * @param {boolean} [param0.scroll=false]
+     */
+    _zoomOut({ scroll = false } = {}) {
+        if (this.attachmentViewer.scale === MIN_SCALE) {
+            return;
+        }
+        const unflooredAdaptedScale = (
+            this.attachmentViewer.scale -
+            (scroll ? SCROLL_ZOOM_STEP : ZOOM_STEP)
+        );
+        this.attachmentViewer.update({
+            scale: Math.max(MIN_SCALE, unflooredAdaptedScale),
+        });
+        this._updateZoomerStyle();
+    }
+
+    /**
+     * Reset the zoom scale of the image.
+     *
+     * @private
+     */
+    _zoomReset() {
+        this.attachmentViewer.update({ scale: 1 });
+        this._updateZoomerStyle();
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on mask of attachment viewer.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        if (this._isDragging) {
+            return;
+        }
+        // TODO: clicking on the background should probably be handled by the dialog?
+        // task-2092965
+        this._close();
+    }
+
+    /**
+     * Called when clicking on cross icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickClose(ev) {
+        this._close();
+    }
+
+    /**
+     * Called when clicking on download icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDownload(ev) {
+        ev.stopPropagation();
+        this._download();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickGlobal(ev) {
+        if (!this._isDragging) {
+            return;
+        }
+        ev.stopPropagation();
+        this._stopDragging();
+    }
+
+    /**
+     * Called when clicking on the header. Stop propagation of event to prevent
+     * closing the dialog.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickHeader(ev) {
+        ev.stopPropagation();
+    }
+
+    /**
+     * Called when clicking on image. Stop propagation of event to prevent
+     * closing the dialog.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickImage(ev) {
+        if (this._isDragging) {
+            return;
+        }
+        ev.stopPropagation();
+    }
+
+    /**
+     * Called when clicking on next icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickNext(ev) {
+        ev.stopPropagation();
+        this._next();
+    }
+
+    /**
+     * Called when clicking on previous icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickPrevious(ev) {
+        ev.stopPropagation();
+        this._previous();
+    }
+
+    /**
+     * Called when clicking on print icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickPrint(ev) {
+        ev.stopPropagation();
+        this._print();
+    }
+
+    /**
+     * Called when clicking on rotate icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickRotate(ev) {
+        ev.stopPropagation();
+        this._rotate();
+    }
+
+    /**
+     * Called when clicking on embed video player. Stop propagation to prevent
+     * closing the dialog.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickVideo(ev) {
+        ev.stopPropagation();
+    }
+
+    /**
+     * Called when clicking on zoom in icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickZoomIn(ev) {
+        ev.stopPropagation();
+        this._zoomIn();
+    }
+
+    /**
+     * Called when clicking on zoom out icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickZoomOut(ev) {
+        ev.stopPropagation();
+        this._zoomOut();
+    }
+
+    /**
+     * Called when clicking on reset zoom icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickZoomReset(ev) {
+        ev.stopPropagation();
+        this._zoomReset();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        switch (ev.key) {
+            case 'ArrowRight':
+                this._next();
+                break;
+            case 'ArrowLeft':
+                this._previous();
+                break;
+            case 'Escape':
+                this._close();
+                break;
+            case 'q':
+                this._close();
+                break;
+            case 'r':
+                this._rotate();
+                break;
+            case '+':
+                this._zoomIn();
+                break;
+            case '-':
+                this._zoomOut();
+                break;
+            case '0':
+                this._zoomReset();
+                break;
+            default:
+                return;
+        }
+        ev.stopPropagation();
+    }
+
+    /**
+     * Called when new image has been loaded
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onLoadImage(ev) {
+        ev.stopPropagation();
+        this.attachmentViewer.update({ isImageLoading: false });
+    }
+
+    /**
+     * @private
+     * @param {DragEvent} ev
+     */
+    _onMousedownImage(ev) {
+        if (this._isDragging) {
+            return;
+        }
+        if (ev.button !== 0) {
+            return;
+        }
+        ev.stopPropagation();
+        this._isDragging = true;
+        this._dragstartX = ev.clientX;
+        this._dragstartY = ev.clientY;
+    }
+
+    /**
+     * @private
+     * @param {DragEvent}
+     */
+    _onMousemoveView(ev) {
+        if (!this._isDragging) {
+            return;
+        }
+        this._translate.dx = ev.clientX - this._dragstartX;
+        this._translate.dy = ev.clientY - this._dragstartY;
+        this._updateZoomerStyle();
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onWheelImage(ev) {
+        ev.stopPropagation();
+        if (!this.el) {
+            return;
+        }
+        if (ev.deltaY > 0) {
+            this._zoomOut({ scroll: true });
+        } else {
+            this._zoomIn({ scroll: true });
+        }
+    }
+
+}
+
+Object.assign(AttachmentViewer, {
+    props: {
+        localId: String,
+    },
+    template: 'mail.AttachmentViewer',
+});
+
+QWeb.registerComponent('AttachmentViewer', AttachmentViewer);
+
+return AttachmentViewer;
+
+});
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
new file mode 100644
index 00000000..54f00c1a
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss
@@ -0,0 +1,198 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-flow: column;
+    align-items: center;
+    z-index: -1;
+}
+
+.o_AttachmentViewer_buttonNavigation {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.o_AttachmentViewer_buttonNavigationNext {
+    right: 15px;
+
+    > .fa {
+        margin: 1px 0 0 1px; // not correctly centered for some reasons
+    }
+}
+
+.o_AttachmentViewer_buttonNavigationPrevious {
+    left: 15px;
+
+    > .fa {
+        margin: 1px 1px 0 0; // not correctly centered for some reasons
+    }
+}
+
+.o_AttachmentViewer_header {
+    display: flex;
+    height: $o-navbar-height;
+    align-items: center;
+    padding: 0 15px;
+    width: 100%;
+}
+
+.o_AttachmentViewer_headerItem {
+    margin: 0 5px;
+
+    &:first-child {
+        margin-left: 0;
+    }
+
+    &:last-child {
+        margin-right: 0;
+    }
+}
+
+.o_AttachmentViewer_loading {
+    position: absolute;
+}
+
+.o_AttachmentViewer_main {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: -1;
+    padding: 45px 0;
+
+    &.o_with_img {
+        overflow: hidden;
+    }
+}
+
+.o_AttachmentViewer_toolbar {
+    position: absolute;
+    bottom: 45px;
+    transform: translateY(100%);
+    display: flex;
+}
+
+.o_AttachmentViewer_toolbarButton {
+    padding: 8px;
+}
+
+.o_AttachmentViewer_viewImage {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.o_AttachmentViewer_viewIframe {
+    width: 90%;
+    height: 100%;
+}
+
+.o_AttachmentViewer_viewVideo {
+    width: 75%;
+    height: 75%;
+}
+
+.o_AttachmentViewer_zoomer {
+    position: absolute;
+    padding: 45px 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer {
+    outline: none;
+}
+
+.o_AttachmentViewer_buttonNavigation {
+    color: gray('400');
+    background-color: lighten(black, 15%);
+    border-radius: 100%;
+    cursor: pointer;
+
+    &:hover {
+        color: lighten(gray('400'), 15%);
+        background-color: black;
+    }
+}
+
+.o_AttachmentViewer_header {
+    background-color: rgba(0, 0, 0, 0.7);
+    color: gray('400');
+}
+
+.o_AttachmentViewer_headerItemButton {
+    cursor: pointer;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.8);
+        color: lighten(gray('400'), 15%);
+    }
+}
+
+.o_AttachmentViewer_headerItemButtonClose {
+    cursor: pointer;
+    font-size: 1.3rem;
+}
+
+.o_AttachmentViewer_toolbar {
+    cursor: pointer;
+}
+
+.o_AttachmentViewer_toolbarButton {
+    background-color: lighten(black, 15%);
+
+    &.o_disabled {
+        cursor: not-allowed;
+        filter: brightness(1.3);
+    }
+
+    &:not(.o_disabled) {
+        color: gray('400');
+        cursor: pointer;
+
+        &:hover {
+            background-color: black;
+            color: lighten(gray('400'), 15%);
+        }
+    }
+}
+
+.o_AttachmentViewer_view {
+    background-color: black;
+    box-shadow: 0 0 40px black;
+    outline: none;
+    border: none;
+
+    &.o_text {
+        background-color: white;
+    }
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_AttachmentViewer_viewImage {
+    transition: transform 0.3s ease;
+}
+
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
new file mode 100644
index 00000000..8791bd09
--- /dev/null
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.AttachmentViewer" owl="1">
+        <div class="o_AttachmentViewer" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0">
+            <div class="o_AttachmentViewer_header" t-on-click="_onClickHeader">
+                <t t-if="attachmentViewer.attachment.fileType">
+                    <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon">
+                        <t t-if="attachmentViewer.attachment.fileType === 'image'">
+                            <i class="fa fa-picture-o" role="img" title="Image"/>
+                        </t>
+                        <t t-if="attachmentViewer.attachment.fileType === 'application/pdf'">
+                            <i class="fa fa-file-text" role="img" title="PDF file"/>
+                        </t>
+                        <t t-if="attachmentViewer.attachment.isTextFile">
+                            <i class="fa fa-file-text" role="img" title="Text file"/>
+                        </t>
+                        <t t-if="attachmentViewer.attachment.fileType === 'video'">
+                            <i class="fa fa-video-camera" role="img" title="Video"/>
+                        </t>
+                    </div>
+                </t>
+                <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name">
+                    <t t-esc="attachmentViewer.attachment.displayName"/>
+                </div>
+                <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download">
+                    <i class="fa fa-download fa-fw" role="img"/>
+                </div>
+                <div class="o-autogrow"/>
+                <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close">
+                    <i class="fa fa-fw fa-times" role="img"/>
+                </div>
+            </div>
+            <div class="o_AttachmentViewer_main" t-att-class="{ o_with_img: attachmentViewer.attachment.fileType === 'image' }" t-on-mousemove="_onMousemoveView">
+                <t t-if="attachmentViewer.attachment.fileType === 'image'">
+                    <div class="o_AttachmentViewer_zoomer" t-ref="zoomer">
+                        <t t-if="attachmentViewer.isImageLoading">
+                            <div class="o_AttachmentViewer_loading">
+                                <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/>
+                            </div>
+                        </t>
+                        <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.attachment.defaultSource" t-att-style="imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/>
+                    </div>
+                </t>
+                <t t-if="attachmentViewer.attachment.fileType === 'application/pdf'">
+                    <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                </t>
+                <t t-if="attachmentViewer.attachment.isTextFile">
+                    <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                </t>
+                <t t-if="attachmentViewer.attachment.fileType === 'youtu'">
+                    <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/>
+                </t>
+                <t t-if="attachmentViewer.attachment.fileType === 'video'">
+                    <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo" t-on-click="_onClickVideo" controls="controls">
+                        <source t-att-data-type="attachmentViewer.attachment.mimetype" t-att-src="attachmentViewer.attachment.defaultSource"/>
+                    </video>
+                </t>
+            </div>
+            <t t-if="attachmentViewer.attachment.fileType === 'image'">
+                <div class="o_AttachmentViewer_toolbar" role="toolbar">
+                    <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button">
+                        <i class="fa fa-fw fa-plus" role="img"/>
+                    </div>
+                    <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)">
+                        <i class="fa fa-fw fa-search" role="img"/>
+                    </div>
+                    <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button">
+                        <i class="fa fa-fw fa-minus" role="img"/>
+                    </div>
+                    <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickRotate" title="Rotate (r)" role="button">
+                        <i class="fa fa-fw fa-repeat" role="img"/>
+                    </div>
+                    <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickPrint" title="Print" role="button">
+                        <i class="fa fa-fw fa-print" role="img"/>
+                    </div>
+                    <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton" t-on-click="_onClickDownload" title="Download" role="button">
+                        <i class="fa fa-download fa-fw" role="img"/>
+                    </div>
+                </div>
+            </t>
+            <t t-if="attachmentViewer.attachments.length > 1">
+                <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button">
+                    <span class="fa fa-chevron-left" role="img"/>
+                </div>
+                <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button">
+                    <span class="fa fa-chevron-right" role="img"/>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
new file mode 100644
index 00000000..c6e268e5
--- /dev/null
+++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
@@ -0,0 +1,174 @@
+odoo.define('mail/static/src/components/autocomplete_input/autocomplete_input.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class AutocompleteInput extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+    }
+
+    mounted() {
+        if (this.props.isFocusOnMount) {
+            this.el.focus();
+        }
+
+        let args = {
+            autoFocus: true,
+            select: (ev, ui) => this._onAutocompleteSelect(ev, ui),
+            source: (req, res) => this._onAutocompleteSource(req, res),
+            focus: ev => this._onAutocompleteFocus(ev),
+            html: this.props.isHtml || false,
+        };
+
+        if (this.props.customClass) {
+            args.classes = { 'ui-autocomplete': this.props.customClass };
+        }
+
+        const autoCompleteElem = $(this.el).autocomplete(args);
+        // Resize the autocomplete dropdown options to handle the long strings
+        // By setting the width of dropdown based on the width of the input element.
+        autoCompleteElem.data("ui-autocomplete")._resizeMenu = function () {
+            const ul = this.menu.element;
+            ul.outerWidth(this.element.outerWidth());
+        };
+    }
+
+    willUnmount() {
+        $(this.el).autocomplete('destroy');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns whether the given node is self or a children of self, including
+     * the suggestion menu.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        if (this.el.contains(node)) {
+            return true;
+        }
+        if (!this.props.customClass) {
+            return false;
+        }
+        const element = document.querySelector(`.${this.props.customClass}`);
+        if (!element) {
+            return false;
+        }
+        return element.contains(node);
+    }
+
+    focus() {
+        if (!this.el) {
+            return;
+        }
+        this.el.focus();
+    }
+
+    focusout() {
+        if (!this.el) {
+            return;
+        }
+        this.el.blur();
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {FocusEvent} ev
+     */
+    _onAutocompleteFocus(ev) {
+        if (this.props.focus) {
+            this.props.focus(ev);
+        } else {
+            ev.preventDefault();
+        }
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     */
+    _onAutocompleteSelect(ev, ui) {
+        if (this.props.select) {
+            this.props.select(ev, ui);
+        }
+    }
+
+    /**
+     * @private
+     * @param {Object} req
+     * @param {function} res
+     */
+    _onAutocompleteSource(req, res) {
+        if (this.props.source) {
+            this.props.source(req, res);
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onBlur(ev) {
+        this.trigger('o-hide');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onKeydown(ev) {
+        if (ev.key === 'Escape') {
+            this.trigger('o-hide');
+        }
+    }
+
+}
+
+Object.assign(AutocompleteInput, {
+    defaultProps: {
+        isFocusOnMount: false,
+        isHtml: false,
+        placeholder: '',
+    },
+    props: {
+        customClass: {
+            type: String,
+            optional: true,
+        },
+        focus: {
+            type: Function,
+            optional: true,
+        },
+        isFocusOnMount: Boolean,
+        isHtml: Boolean,
+        placeholder: String,
+        select: {
+            type: Function,
+            optional: true,
+        },
+        source: {
+            type: Function,
+            optional: true,
+        },
+    },
+    template: 'mail.AutocompleteInput',
+});
+
+return AutocompleteInput;
+
+});
diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
new file mode 100644
index 00000000..ffa1bc89
--- /dev/null
+++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.AutocompleteInput" owl="1">
+        <input class="o_AutocompleteInput" t-on-blur="_onBlur" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js
new file mode 100644
index 00000000..f9271523
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window/chat_window.js
@@ -0,0 +1,363 @@
+odoo.define('mail/static/src/components/chat_window/chat_window.js', function (require) {
+'use strict';
+
+const components = {
+    AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'),
+    ChatWindowHeader: require('mail/static/src/components/chat_window_header/chat_window_header.js'),
+    ThreadView: require('mail/static/src/components/thread_view/thread_view.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+const { isEventHandled } = require('mail/static/src/utils/utils.js');
+
+const patchMixin = require('web.patchMixin');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ChatWindow extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatWindow = this.env.models['mail.chat_window'].get(props.chatWindowLocalId);
+            const thread = chatWindow ? chatWindow.thread : undefined;
+            return {
+                chatWindow,
+                chatWindowHasNewMessageForm: chatWindow && chatWindow.hasNewMessageForm,
+                chatWindowIsDoFocus: chatWindow && chatWindow.isDoFocus,
+                chatWindowIsFocused: chatWindow && chatWindow.isFocused,
+                chatWindowIsFolded: chatWindow && chatWindow.isFolded,
+                chatWindowThreadView: chatWindow && chatWindow.threadView,
+                chatWindowVisibleIndex: chatWindow && chatWindow.visibleIndex,
+                chatWindowVisibleOffset: chatWindow && chatWindow.visibleOffset,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                localeTextDirection: this.env.messaging.locale.textDirection,
+                thread,
+                threadMassMailing: thread && thread.mass_mailing,
+                threadModel: thread && thread.model,
+            };
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * Reference of the header of the chat window.
+         * Useful to prevent click on header from wrongly focusing the window.
+         */
+        this._chatWindowHeaderRef = useRef('header');
+        /**
+         * Reference of the autocomplete input (new_message chat window only).
+         * Useful when focusing this chat window, which consists of focusing
+         * this input.
+         */
+        this._inputRef = useRef('input');
+        /**
+         * Reference of thread in the chat window (chat window with thread
+         * only). Useful when focusing this chat window, which consists of
+         * focusing this thread. Will likely focus the composer of thread, if
+         * it has one!
+         */
+        this._threadRef = useRef('thread');
+        this._onWillHideHomeMenu = this._onWillHideHomeMenu.bind(this);
+        this._onWillShowHomeMenu = this._onWillShowHomeMenu.bind(this);
+        // the following are passed as props to children
+        this._onAutocompleteSelect = this._onAutocompleteSelect.bind(this);
+        this._onAutocompleteSource = this._onAutocompleteSource.bind(this);
+        this._constructor(...args);
+    }
+
+    /**
+     * Allows patching constructor.
+     */
+    _constructor() {}
+
+    mounted() {
+        this.env.messagingBus.on('will_hide_home_menu', this, this._onWillHideHomeMenu);
+        this.env.messagingBus.on('will_show_home_menu', this, this._onWillShowHomeMenu);
+    }
+
+    willUnmount() {
+        this.env.messagingBus.off('will_hide_home_menu', this, this._onWillHideHomeMenu);
+        this.env.messagingBus.off('will_show_home_menu', this, this._onWillShowHomeMenu);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.chat_window}
+     */
+    get chatWindow() {
+        return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId);
+    }
+
+    /**
+     * Get the content of placeholder for the autocomplete input of
+     * 'new_message' chat window.
+     *
+     * @returns {string}
+     */
+    get newMessageFormInputPlaceholder() {
+        return this.env._t("Search user...");
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Apply visual position of the chat window.
+     *
+     * @private
+     */
+    _applyVisibleOffset() {
+        const textDirection = this.env.messaging.locale.textDirection;
+        const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
+        const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
+        this.el.style[offsetFrom] = this.chatWindow.visibleOffset + 'px';
+        this.el.style[oppositeFrom] = 'auto';
+    }
+
+    /**
+     * Focus this chat window.
+     *
+     * @private
+     */
+    _focus() {
+        this.chatWindow.update({
+            isDoFocus: false,
+            isFocused: true,
+        });
+        if (this._inputRef.comp) {
+            this._inputRef.comp.focus();
+        }
+        if (this._threadRef.comp) {
+            this._threadRef.comp.focus();
+        }
+    }
+
+    /**
+     * Save the scroll positions of the chat window in the store.
+     * This is useful in order to remount chat windows and keep previous
+     * scroll positions. This is necessary because when toggling on/off
+     * home menu, the chat windows have to be remade from scratch.
+     *
+     * @private
+     */
+    _saveThreadScrollTop() {
+        if (
+            !this._threadRef.comp ||
+            !this.chatWindow.threadViewer ||
+            !this.chatWindow.threadViewer.threadView
+        ) {
+            return;
+        }
+        if (this.chatWindow.threadViewer.threadView.componentHintList.length > 0) {
+            // the current scroll position is likely incorrect due to the
+            // presence of hints to adjust it
+            return;
+        }
+        this.chatWindow.threadViewer.saveThreadCacheScrollHeightAsInitial(
+            this._threadRef.comp.getScrollHeight()
+        );
+        this.chatWindow.threadViewer.saveThreadCacheScrollPositionsAsInitial(
+            this._threadRef.comp.getScrollTop()
+        );
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        if (!this.chatWindow) {
+            // chat window is being deleted
+            return;
+        }
+        if (this.chatWindow.isDoFocus) {
+            this._focus();
+        }
+        this._applyVisibleOffset();
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when selecting an item in the autocomplete input of the
+     * 'new_message' chat window.
+     *
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     * @param {Object} ui.item
+     * @param {integer} ui.item.id
+     */
+    async _onAutocompleteSelect(ev, ui) {
+        const chat = await this.env.messaging.getChat({ partnerId: ui.item.id });
+        if (!chat) {
+            return;
+        }
+        this.env.messaging.chatWindowManager.openThread(chat, {
+            makeActive: true,
+            replaceNewMessage: true,
+        });
+    }
+
+    /**
+     * Called when typing in the autocomplete input of the 'new_message' chat
+     * window.
+     *
+     * @private
+     * @param {Object} req
+     * @param {string} req.term
+     * @param {function} res
+     */
+    _onAutocompleteSource(req, res) {
+        this.env.models['mail.partner'].imSearch({
+            callback: (partners) => {
+                const suggestions = partners.map(partner => {
+                    return {
+                        id: partner.id,
+                        value: partner.nameOrDisplayName,
+                        label: partner.nameOrDisplayName,
+                    };
+                });
+                res(_.sortBy(suggestions, 'label'));
+            },
+            keyword: _.escape(req.term),
+            limit: 10,
+        });
+    }
+
+    /**
+     * Called when clicking on header of chat window. Usually folds the chat
+     * window.
+     *
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onClickedHeader(ev) {
+        ev.stopPropagation();
+        if (this.env.messaging.device.isMobile) {
+            return;
+        }
+        if (this.chatWindow.isFolded) {
+            this.chatWindow.unfold();
+            this.chatWindow.focus();
+        } else {
+            this._saveThreadScrollTop();
+            this.chatWindow.fold();
+        }
+    }
+
+    /**
+     * Called when an element in the thread becomes focused.
+     *
+     * @private
+     * @param {FocusEvent} ev
+     */
+    _onFocusinThread(ev) {
+        ev.stopPropagation();
+        if (!this.chatWindow) {
+            // prevent crash on destroy
+            return;
+        }
+        this.chatWindow.update({ isFocused: true });
+    }
+
+    /**
+     * Focus out the chat window.
+     *
+     * @private
+     */
+    _onFocusout() {
+        if (!this.chatWindow) {
+            // ignore focus out due to record being deleted
+            return;
+        }
+        this.chatWindow.update({ isFocused: false });
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        if (!this.chatWindow) {
+            // prevent crash during delete
+            return;
+        }
+        switch (ev.key) {
+            case 'Tab':
+                ev.preventDefault();
+                if (ev.shiftKey) {
+                    this.chatWindow.focusPreviousVisibleUnfoldedChatWindow();
+                } else {
+                    this.chatWindow.focusNextVisibleUnfoldedChatWindow();
+                }
+                break;
+            case 'Escape':
+                if (isEventHandled(ev, 'ComposerTextInput.closeSuggestions')) {
+                    break;
+                }
+                if (isEventHandled(ev, 'Composer.closeEmojisPopover')) {
+                    break;
+                }
+                ev.preventDefault();
+                this.chatWindow.focusNextVisibleUnfoldedChatWindow();
+                this.chatWindow.close();
+                break;
+        }
+    }
+
+    /**
+     * Save the scroll positions of the chat window in the store.
+     * This is useful in order to remount chat windows and keep previous
+     * scroll positions. This is necessary because when toggling on/off
+     * home menu, the chat windows have to be remade from scratch.
+     *
+     * @private
+     */
+    async _onWillHideHomeMenu() {
+        this._saveThreadScrollTop();
+    }
+
+    /**
+     * Save the scroll positions of the chat window in the store.
+     * This is useful in order to remount chat windows and keep previous
+     * scroll positions. This is necessary because when toggling on/off
+     * home menu, the chat windows have to be remade from scratch.
+     *
+     * @private
+     */
+    async _onWillShowHomeMenu() {
+        this._saveThreadScrollTop();
+    }
+
+}
+
+Object.assign(ChatWindow, {
+    components,
+    defaultProps: {
+        hasCloseAsBackButton: false,
+        isExpandable: false,
+        isFullscreen: false,
+    },
+    props: {
+        chatWindowLocalId: String,
+        hasCloseAsBackButton: Boolean,
+        isExpandable: Boolean,
+        isFullscreen: Boolean,
+    },
+    template: 'mail.ChatWindow',
+});
+
+return patchMixin(ChatWindow);
+
+});
diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss
new file mode 100644
index 00000000..7b61cd3b
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window/chat_window.scss
@@ -0,0 +1,93 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatWindow {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-flow: column;
+
+    &:not(.o-mobile) {
+        max-width: 100%;
+        max-height: 100%;
+        width: 325px;
+
+        &.o-folded {
+            height: $o-mail-chat-window-header-height;
+        }
+
+        &:not(.o-folded) {
+            height: 400px;
+        }
+    }
+
+    &.o-mobile {
+        position: fixed;
+    }
+
+    &.o-fullscreen {
+        height: 100%;
+        width: 100%;
+    }
+}
+
+.o_ChatWindow_header {
+    flex: 0 0 auto;
+}
+
+.o_ChatWindow_newMessageForm {
+    padding: 3px;
+    margin-top: 3px;
+    display: flex;
+    align-items: center;
+}
+
+.o_ChatWindow_newMessageFormInput {
+    flex: 1 1 auto;
+}
+
+.o_ChatWindow_newMessageFormLabel {
+    margin-right: 5px;
+    flex: 0 0 auto;
+}
+
+.o_ChatWindow_thread {
+    flex: 1 1 auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ChatWindow {
+    background-color: $o-mail-thread-window-bg;
+    border-radius: 6px 6px 0 0;
+    box-shadow: -5px -5px 10px rgba(black, 0.09);
+    outline: none;
+
+    &:not(.o-mobile) {
+
+        &.o-focused {
+            box-shadow: -5px -5px 10px rgba(black, 0.18);
+        }
+    }
+
+
+    .o_Composer {
+        border: 0;
+    }
+}
+
+.o_ChatWindow_header {
+    border-radius: 3px 3px 0 0;
+}
+
+.o_ChatWindow_newMessageFormInput {
+    outline: none;
+    border: 1px solid gray('300'); // cancel firefox border on input focus
+}
+
+.o_ChatWindow_thread .o_ThreadView_messageList {
+    font-size: 1rem;
+}
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
new file mode 100644
index 00000000..ad4a1096
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatWindow" owl="1">
+        <div class="o_ChatWindow" tabindex="0" t-att-data-visible-index="chatWindow ? chatWindow.visibleIndex : undefined"
+            t-att-class="{
+                'o-focused': chatWindow and chatWindow.isFocused,
+                'o-folded': chatWindow and chatWindow.isFolded,
+                'o-fullscreen': props.isFullscreen,
+                'o-mobile': env.messaging.device.isMobile,
+                'o-new-message': chatWindow and !chatWindow.thread,
+            }" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined"
+        >
+            <t t-if="chatWindow">
+                <ChatWindowHeader
+                    class="o_ChatWindow_header"
+                    chatWindowLocalId="chatWindow.localId"
+                    hasCloseAsBackButton="props.hasCloseAsBackButton"
+                    isExpandable="props.isExpandable"
+                    t-on-o-clicked="_onClickedHeader"
+                    t-ref="header"
+                />
+                <t t-if="chatWindow.threadView">
+                    <ThreadView
+                        class="o_ChatWindow_thread"
+                        composerAttachmentsDetailsMode="'card'"
+                        hasComposer="chatWindow.thread.model !== 'mail.box' and (!chatWindow.thread.mass_mailing or env.messaging.device.isMobile)"
+                        hasComposerCurrentPartnerAvatar="false"
+                        hasComposerSendButton="env.messaging.device.isMobile"
+                        hasSquashCloseMessages="chatWindow.thread.model !== 'mail.box'"
+                        threadViewLocalId="chatWindow.threadView.localId"
+                        t-on-focusin="_onFocusinThread"
+                        t-ref="thread"
+                    />
+                </t>
+                <t t-if="chatWindow.hasNewMessageForm">
+                    <div class="o_ChatWindow_newMessageForm">
+                        <span class="o_ChatWindow_newMessageFormLabel">
+                            To:
+                        </span>
+                        <AutocompleteInput
+                            class="o_ChatWindow_newMessageFormInput"
+                            placeholder="newMessageFormInputPlaceholder"
+                            select="_onAutocompleteSelect"
+                            source="_onAutocompleteSource"
+                            t-ref="input"
+                        />
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.js b/addons/mail/static/src/components/chat_window_header/chat_window_header.js
new file mode 100644
index 00000000..ea560ca2
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.js
@@ -0,0 +1,118 @@
+odoo.define('mail/static/src/components/chat_window_header/chat_window_header.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ChatWindowHeader extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatWindow = this.env.models['mail.chat_window'].get(props.chatWindowLocalId);
+            const thread = chatWindow && chatWindow.thread;
+            return {
+                chatWindow,
+                chatWindowHasShiftLeft: chatWindow && chatWindow.hasShiftLeft,
+                chatWindowHasShiftRight: chatWindow && chatWindow.hasShiftRight,
+                chatWindowName: chatWindow && chatWindow.name,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                thread,
+                threadLocalMessageUnreadCounter: thread && thread.localMessageUnreadCounter,
+                threadMassMailing: thread && thread.mass_mailing,
+                threadModel: thread && thread.model,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.chat_window}
+     */
+    get chatWindow() {
+        return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const chatWindow = this.chatWindow;
+        this.trigger('o-clicked', { chatWindow });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickClose(ev) {
+        ev.stopPropagation();
+        if (!this.chatWindow) {
+            return;
+        }
+        this.chatWindow.close();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickExpand(ev) {
+        ev.stopPropagation();
+        this.chatWindow.expand();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickShiftLeft(ev) {
+        ev.stopPropagation();
+        this.chatWindow.shiftLeft();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickShiftRight(ev) {
+        ev.stopPropagation();
+        this.chatWindow.shiftRight();
+    }
+
+}
+
+Object.assign(ChatWindowHeader, {
+    components,
+    defaultProps: {
+        hasCloseAsBackButton: false,
+        isExpandable: false,
+    },
+    props: {
+        chatWindowLocalId: String,
+        hasCloseAsBackButton: Boolean,
+        isExpandable: Boolean,
+    },
+    template: 'mail.ChatWindowHeader',
+});
+
+return ChatWindowHeader;
+
+});
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
new file mode 100644
index 00000000..c5c23634
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -0,0 +1,95 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatWindowHeader {
+    display: flex;
+    align-items: center;
+    height: $o-mail-chat-window-header-height;
+
+    &.o-mobile {
+        height: $o-mail-chat-window-header-height-mobile;
+    }
+}
+
+.o_ChatWindowHeader_command {
+    padding: 0 8px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.o_ChatWindowHeader_commandBack {
+    margin-right: 5px;
+}
+
+.o_ChatWindowHeader_item {
+    margin: 0 3px;
+
+    &.o_ChatWindowHeader_rightArea {
+        margin-right: 0;
+    }
+
+    &:first-child {
+        margin-left: 10px;
+
+        &.o_ChatWindowHeader_command {
+            margin-left: 0px; // no margin for commands
+        }
+    }
+
+    &.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command {
+        margin-right: 0px; // no margin for commands
+    }
+}
+
+.o_ChatWindowHeader_name {
+    max-height: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o_ChatWindowHeader_rightArea {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ChatWindowHeader {
+    background-color: $o-brand-odoo;
+    color: white;
+    cursor: pointer;
+
+    &:not(.o-mobile) {
+
+        &:hover .o_ChatWindowHeader_command {
+            opacity: 0.7;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        &:not(:hover) .o_ChatWindowHeader_command {
+            opacity: 0.5;
+        }
+    }
+
+}
+
+.o_ChatWindowHeader_command.o-mobile {
+    font-size: 1.3rem;
+}
+
+.o_ChatWindowHeader_name {
+    user-select: none;
+}
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
new file mode 100644
index 00000000..b922da15
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatWindowHeader" owl="1">
+        <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClick">
+            <t t-if="chatWindow">
+                <t t-if="props.hasCloseAsBackButton">
+                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close conversation">
+                        <i class="fa fa-arrow-left"/>
+                    </div>
+                </t>
+                <t t-if="chatWindow.thread and chatWindow.thread.model === 'mail.channel'">
+                    <ThreadIcon
+                        class="o_ChatWindowHeader_icon o_ChatWindowHeader_item"
+                        threadLocalId="chatWindow.thread.localId"
+                    />
+                </t>
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name">
+                    <t t-esc="chatWindow.name"/>
+                </div>
+                <t t-if="chatWindow.thread and chatWindow.thread.mass_mailing">
+                    <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/>
+                </t>
+                <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
+                    <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item">
+                        (<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>)
+                    </div>
+                </t>
+                <div class="o-autogrow"/>
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea">
+                    <t t-if="chatWindow.hasShiftLeft">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftLeft" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftLeft" title="Shift left">
+                            <i class="fa fa-angle-left"/>
+                        </div>
+                    </t>
+                    <t t-if="chatWindow.hasShiftRight">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftRight" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftRight" title="Shift right">
+                            <i class="fa fa-angle-right"/>
+                        </div>
+                    </t>
+                    <t t-if="props.isExpandable">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickExpand" title="Open in Discuss">
+                            <i class="fa fa-expand"/>
+                        </div>
+                    </t>
+                    <t t-if="!props.hasCloseAsBackButton">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close chat window">
+                            <i class="fa fa-close"/>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
new file mode 100644
index 00000000..926ca083
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
@@ -0,0 +1,141 @@
+odoo.define('mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js', function (require) {
+'use strict';
+
+const components = {
+    ChatWindowHeader: require('mail/static/src/components/chat_window_header/chat_window_header.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ChatWindowHiddenMenu extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useStore(props => {
+            const chatWindowManager = this.env.messaging.chatWindowManager;
+            const device = this.env.messaging.device;
+            const locale = this.env.messaging.locale;
+            return {
+                chatWindowManager: chatWindowManager ? chatWindowManager.__state : undefined,
+                device: device ? device.__state : undefined,
+                localeTextDirection: locale ? locale.textDirection : undefined,
+            };
+        });
+        this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this);
+        /**
+         * Reference of the dropup list. Useful to auto-set max height based on
+         * browser screen height.
+         */
+        this._listRef = useRef('list');
+        /**
+         * The intent of the toggle button depends on the last rendered state.
+         */
+        this._wasMenuOpen;
+    }
+
+    mounted() {
+        this._apply();
+        document.addEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    patched() {
+        this._apply();
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _apply() {
+        this._applyListHeight();
+        this._applyOffset();
+        this._wasMenuOpen = this.env.messaging.chatWindowManager.isHiddenMenuOpen;
+    }
+
+    /**
+     * @private
+     */
+    _applyListHeight() {
+        const device = this.env.messaging.device;
+        const height = device.globalWindowInnerHeight / 2;
+        this._listRef.el.style['max-height'] = `${height}px`;
+    }
+
+    /**
+     * @private
+     */
+    _applyOffset() {
+        const textDirection = this.env.messaging.locale.textDirection;
+        const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
+        const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
+        const offset = this.env.messaging.chatWindowManager.visual.hidden.offset;
+        this.el.style[offsetFrom] = `${offset}px`;
+        this.el.style[oppositeFrom] = 'auto';
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Closes the menu when clicking outside.
+     * Must be done as capture to avoid stop propagation.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCaptureGlobal(ev) {
+        if (this.el.contains(ev.target)) {
+            return;
+        }
+        this.env.messaging.chatWindowManager.closeHiddenMenu();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickToggle(ev) {
+        if (this._wasMenuOpen) {
+            this.env.messaging.chatWindowManager.closeHiddenMenu();
+        } else {
+            this.env.messaging.chatWindowManager.openHiddenMenu();
+        }
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {mail.chat_window} ev.detail.chatWindow
+     */
+    _onClickedChatWindow(ev) {
+        const chatWindow = ev.detail.chatWindow;
+        chatWindow.makeActive();
+        this.env.messaging.chatWindowManager.closeHiddenMenu();
+    }
+
+}
+
+Object.assign(ChatWindowHiddenMenu, {
+    components,
+    props: {},
+    template: 'mail.ChatWindowHiddenMenu',
+});
+
+return ChatWindowHiddenMenu;
+
+});
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
new file mode 100644
index 00000000..119d6184
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss
@@ -0,0 +1,90 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatWindowHiddenMenu {
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    width: 50px;
+    height: 28px;
+    align-items: stretch;
+}
+
+.o_ChatWindowHiddenMenu_chatWindowHeader {
+    max-width: 200px;
+}
+
+.o_ChatWindowHiddenMenu_dropdownToggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1 auto;
+    max-width: 100%;
+}
+
+.o_ChatWindowHiddenMenu_dropdownToggleIcon {
+    margin-right: 1px;
+}
+
+.o_ChatWindowHiddenMenu_dropdownToggleItem {
+    margin: 0 3px;
+}
+
+.o_ChatWindowHiddenMenu_list {
+    overflow: auto;
+    margin: 0;
+    padding: 0;
+}
+
+.o_ChatWindowHiddenMenu_listItem {
+
+    &:not(:last-child) {
+        margin-bottom: 1px;
+    }
+}
+
+.o_ChatWindowHiddenMenu_unreadCounter {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+    z-index: 1001; // on top of bootstrap dropup menu
+}
+
+.o_ChatWindowHiddenMenu_windowCounter {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 1px;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ChatWindowHiddenMenu {
+    background-color: gray('900');
+    border-radius: 6px 6px 0 0;
+    color: white;
+    cursor: pointer;
+}
+
+.o_ChatWindowHiddenMenu_chatWindowHeader {
+    opacity: 0.95;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.o_ChatWindowHiddenMenu_dropdownToggle.show {
+    opacity: 0.5;
+}
+
+.o_ChatWindowHiddenMenu_unreadCounter {
+    background-color: $o-brand-primary;
+}
+
+.o_ChatWindowHiddenMenu_windowCounter {
+    user-select: none;
+}
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
new file mode 100644
index 00000000..943fc71d
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatWindowHiddenMenu" owl="1">
+        <div class="dropup o_ChatWindowHiddenMenu">
+            <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
+                <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
+                <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter">
+                    <t t-esc="env.messaging.chatWindowManager.allOrderedHidden.length"/>
+                </div>
+            </div>
+            <ul class="dropdown-menu dropdown-menu-right o_ChatWindowHiddenMenu_list" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list">
+                <t t-foreach="env.messaging.chatWindowManager.allOrderedHidden" t-as="chatWindow" t-key="chatWindow.localId">
+                    <li class="o_ChatWindowHiddenMenu_listItem" role="menuitem">
+                        <ChatWindowHeader
+                            class="o_ChatWindowHiddenMenu_chatWindowHeader"
+                            chatWindowLocalId="chatWindow.localId"
+                            t-on-o-clicked="_onClickedChatWindow"
+                        />
+                    </li>
+                </t>
+            </ul>
+            <t t-if="env.messaging.chatWindowManager.unreadHiddenConversationAmount > 0">
+                <div class="badge badge-pill o_ChatWindowHiddenMenu_unreadCounter">
+                    <t t-esc="env.messaging.chatWindowManager.unreadHiddenConversationAmount"/>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
new file mode 100644
index 00000000..a0c49a96
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js
@@ -0,0 +1,51 @@
+odoo.define('mail/static/src/components/chat_window_manager/chat_window_manager.js', function (require) {
+'use strict';
+
+const components = {
+    ChatWindow: require('mail/static/src/components/chat_window/chat_window.js'),
+    ChatWindowHiddenMenu: require('mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ChatWindowManager extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatWindowManager = this.env.messaging && this.env.messaging.chatWindowManager;
+            const allOrderedVisible = chatWindowManager
+                ? chatWindowManager.allOrderedVisible
+                : [];
+            return {
+                allOrderedVisible,
+                allOrderedVisibleThread: allOrderedVisible.map(chatWindow => chatWindow.thread),
+                chatWindowManager,
+                chatWindowManagerHasHiddenChatWindows: chatWindowManager && chatWindowManager.hasHiddenChatWindows,
+                isMessagingInitialized: this.env.isMessagingInitialized(),
+            };
+        }, {
+            compareDepth: {
+                allOrderedVisible: 1,
+                allOrderedVisibleThread: 1,
+            },
+        });
+    }
+
+}
+
+Object.assign(ChatWindowManager, {
+    components,
+    props: {},
+    template: 'mail.ChatWindowManager',
+});
+
+return ChatWindowManager;
+
+});
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
new file mode 100644
index 00000000..1e8abf54
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss
@@ -0,0 +1,16 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatWindowManager {
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row-reverse;
+    z-index: 1000;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
new file mode 100644
index 00000000..8e2bd6bf
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatWindowManager" owl="1">
+        <div class="o_ChatWindowManager">
+            <t t-if="env.isMessagingInitialized()">
+                <!-- Note: DOM elements are ordered from left to right -->
+                <t t-if="env.messaging.chatWindowManager.hasHiddenChatWindows">
+                    <ChatWindowHiddenMenu class="o_ChatWindowManager_hiddenMenu"/>
+                </t>
+                <t t-foreach="env.messaging.chatWindowManager.allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId">
+                    <ChatWindow
+                        chatWindowLocalId="chatWindow.localId"
+                        hasCloseAsBackButton="env.messaging.device.isMobile"
+                        isExpandable="!env.messaging.device.isMobile and !!chatWindow.thread"
+                        isFullscreen="env.messaging.device.isMobile"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
new file mode 100644
index 00000000..ce82f2bb
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js
@@ -0,0 +1,2423 @@
+odoo.define('mail/static/src/components/chat_window_manager/chat_window_manager_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 {
+    file: { createFile, inputFiles },
+    dom: { triggerEvent },
+} = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('chat_window_manager', {}, function () {
+QUnit.module('chat_window_manager_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign(
+                { hasChatWindow: true, hasMessagingMenu: true },
+                params,
+                { data: this.data }
+            ));
+            this.debug = params && params.debug;
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+
+        /**
+         * Simulates the external behaviours & DOM changes implied by hiding home menu.
+         * Needed to assert validity of tests at technical level (actual code of home menu could not
+         * be used in these tests).
+         */
+        this.hideHomeMenu = async () => {
+            await this.env.bus.trigger('will_hide_home_menu');
+            await this.env.bus.trigger('hide_home_menu');
+        };
+
+        /**
+         * Simulates the external behaviours & DOM changes implied by showing home menu.
+         * Needed to assert validity of tests at technical level (actual code of home menu could not
+         * be used in these tests).
+         */
+        this.showHomeMenu = async () => {
+            await this.env.bus.trigger('will_show_home_menu');
+            const $frag = document.createDocumentFragment();
+            // in real condition, chat window will be removed and put in a fragment then
+            // reinserted into DOM
+            const selector = this.debug ? 'body' : '#qunit-fixture';
+            $(selector).contents().appendTo($frag);
+            await this.env.bus.trigger('show_home_menu');
+            $(selector).append($frag);
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('[technical] messaging 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(2);
+
+    const messagingBeforeCreationDeferred = makeDeferred();
+    await this.start({
+        messagingBeforeCreationDeferred,
+        waitUntilMessagingCondition: 'none',
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowManager',
+        "should have chat window manager even when messaging is not yet created"
+    );
+
+    // simulate messaging being created
+    messagingBeforeCreationDeferred.resolve();
+    await nextAnimationFrame();
+
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowManager',
+        "should still contain chat window manager after messaging has been created"
+    );
+});
+
+QUnit.test('initial mount', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowManager',
+        "should have chat window manager"
+    );
+});
+
+QUnit.test('chat window new message: basic rendering', async function (assert) {
+    assert.expect(10);
+
+    await this.start();
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open a chat window"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_header`).length,
+        1,
+        "should have a header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_name`).length,
+        1,
+        "should have name part in header"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ChatWindow_header .o_ChatWindowHeader_name`).textContent,
+        "New message",
+        "should display 'new message' in the header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_command`).length,
+        1,
+        "should have 1 command in header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_commandClose`).length,
+        1,
+        "should have command to close chat window"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_newMessageForm`).length,
+        1,
+        "should have a new message chat window container"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_newMessageFormLabel`).length,
+        1,
+        "should have a part in selection with label"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ChatWindow_newMessageFormLabel`).textContent.trim(),
+        "To:",
+        "should have label 'To:' in selection"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow_newMessageFormInput`).length,
+        1,
+        "should have an input in selection"
+    );
+});
+
+QUnit.test('chat window new message: focused on open', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatWindow`).classList.contains('o-focused'),
+        "chat window should be focused"
+    );
+    assert.ok(
+        document.activeElement,
+        document.querySelector(`.o_ChatWindow_newMessageFormInput`),
+        "chat window focused = selection input focused"
+    );
+});
+
+QUnit.test('chat window new message: close', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatWindow_header .o_ChatWindowHeader_commandClose`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        0,
+        "chat window should be closed"
+    );
+});
+
+QUnit.test('chat window new message: fold', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
+        "chat window should not be folded by default"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should have new message form"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
+    assert.hasClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
+        "chat window should become folded"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should not have new message form"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
+        "chat window should become unfolded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_newMessageForm',
+        "chat window should have new message form"
+    );
+});
+
+QUnit.test('open chat from "new message" chat window should open chat in place of this "new message" chat window', async function (assert) {
+    /**
+     * InnerWith computation uses following info:
+     * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method)
+     * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1920px
+     *
+     * Enough space for 3 visible chat windows:
+     *  10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 1920
+     */
+    assert.expect(11);
+
+    this.data['res.partner'].records.push({ id: 131, name: "Partner 131" });
+    this.data['res.users'].records.push({ partner_id: 131 });
+    this.data['mail.channel'].records.push(
+        { is_minimized: true },
+        { is_minimized: true },
+    );
+    const imSearchDef = makeDeferred();
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 1920,
+            },
+        },
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'im_search') {
+                imSearchDef.resolve();
+            }
+            return res;
+        }
+    });
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        2,
+        "should have 2 chat windows initially"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow.o-new-message',
+        "should not have any 'new message' chat window initially"
+    );
+
+    // open "new message" chat window
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow.o-new-message',
+        "should have 'new message' chat window after clicking 'new message' in messaging menu"
+    );
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        3,
+        "should have 3 chat window after opening 'new message' chat window",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_newMessageFormInput',
+        "'new message' chat window should have new message form input"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatWindow[data-visible-index="2"]'),
+        'o-new-message',
+        "'new message' chat window should be the last chat window initially",
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindow[data-visible-index="2"] .o_ChatWindowHeader_commandShiftRight').click()
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]'),
+        'o-new-message',
+        "'new message' chat window should have moved to the middle after clicking shift previous",
+    );
+
+    // search for a user in "new message" autocomplete
+    document.execCommand('insertText', false, "131");
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+    // Wait for search RPC to be resolved. The following await lines are
+    // necessary because autocomplete is an external lib therefore it is not
+    // possible to use `afterNextRender`.
+    await imSearchDef;
+    await nextAnimationFrame();
+    const link = document.querySelector('.ui-autocomplete .ui-menu-item a');
+    assert.ok(
+        link,
+        "should have autocomplete suggestion after typing on 'new message' input"
+    );
+    assert.strictEqual(
+        link.textContent,
+        "Partner 131",
+        "autocomplete suggestion should target the partner matching search term"
+    );
+
+    await afterNextRender(() => link.click());
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow.o-new-message',
+        "should have removed the 'new message' chat window after selecting a partner"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"] .o_ChatWindowHeader_name').textContent,
+        "Partner 131",
+        "chat window with selected partner should be opened in position where 'new message' chat window was, which is in the middle"
+    );
+});
+
+QUnit.test('new message chat window should close on selecting the user if chat with the user is already open', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 131, name: "Partner 131"});
+    this.data['res.users'].records.push({ id: 12, partner_id: 131 });
+    this.data['mail.channel'].records.push({
+        channel_type: "chat",
+        id: 20,
+        is_minimized: true,
+        members: [this.data.currentPartnerId, 131],
+        name: "Partner 131",
+        public: 'private',
+        state: 'open',
+    });
+    const imSearchDef = makeDeferred();
+    await this.start({
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'im_search') {
+                imSearchDef.resolve();
+            }
+            return res;
+        },
+    });
+
+    // open "new message" chat window
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_newMessageButton`).click());
+
+    // search for a user in "new message" autocomplete
+    document.execCommand('insertText', false, "131");
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+    // Wait for search RPC to be resolved. The following await lines are
+    // necessary because autocomplete is an external lib therefore it is not
+    // possible to use `afterNextRender`.
+    await imSearchDef;
+    await nextAnimationFrame();
+    const link = document.querySelector('.ui-autocomplete .ui-menu-item a');
+
+    await afterNextRender(() => link.click());
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow_newMessageFormInput',
+        "'new message' chat window should not be there"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have only one chat window after selecting user whose chat is already open",
+    );
+});
+
+QUnit.test('new message autocomplete should automatically select first result', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 131, name: "Partner 131" });
+    this.data['res.users'].records.push({ partner_id: 131 });
+    const imSearchDef = makeDeferred();
+    await this.start({
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'im_search') {
+                imSearchDef.resolve();
+            }
+            return res;
+        },
+    });
+
+    // open "new message" chat window
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+
+    // search for a user in "new message" autocomplete
+    document.execCommand('insertText', false, "131");
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_ChatWindow_newMessageFormInput`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+    // Wait for search RPC to be resolved. The following await lines are
+    // necessary because autocomplete is an external lib therefore it is not
+    // possible to use `afterNextRender`.
+    await imSearchDef;
+    await nextAnimationFrame();
+    assert.hasClass(
+        document.querySelector('.ui-autocomplete .ui-menu-item a'),
+        'ui-state-active',
+        "first autocomplete result should be automatically selected",
+    );
+});
+
+QUnit.test('chat window: basic rendering', async function (assert) {
+    assert.expect(11);
+
+    // channel that is expected to be found in the messaging menu
+    // with random unique id and name that will be asserted during the test
+    this.data['mail.channel'].records.push({ id: 20, name: "General" });
+    await this.start();
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_NotificationList_preview`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open a chat window"
+    );
+    const chatWindow = document.querySelector(`.o_ChatWindow`);
+    assert.strictEqual(
+        chatWindow.dataset.threadLocalId,
+        this.env.models['mail.thread'].findFromIdentifyingData({
+            id: 20,
+            model: 'mail.channel',
+        }).localId,
+        "should have open a chat window of channel"
+    );
+    assert.strictEqual(
+        chatWindow.querySelectorAll(`:scope .o_ChatWindow_header`).length,
+        1,
+        "should have header part"
+    );
+    const chatWindowHeader = chatWindow.querySelector(`:scope .o_ChatWindow_header`);
+    assert.strictEqual(
+        chatWindowHeader.querySelectorAll(`:scope .o_ThreadIcon`).length,
+        1,
+        "should have thread icon in header part"
+    );
+    assert.strictEqual(
+        chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_name`).length,
+        1,
+        "should have thread name in header part"
+    );
+    assert.strictEqual(
+        chatWindowHeader.querySelector(`:scope .o_ChatWindowHeader_name`).textContent,
+        "General",
+        "should have correct thread name in header part"
+    );
+    assert.strictEqual(
+        chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_command`).length,
+        2,
+        "should have 2 commands in header part"
+    );
+    assert.strictEqual(
+        chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_commandExpand`).length,
+        1,
+        "should have command to expand thread in discuss"
+    );
+    assert.strictEqual(
+        chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_commandClose`).length,
+        1,
+        "should have command to close chat window"
+    );
+    assert.strictEqual(
+        chatWindow.querySelectorAll(`:scope .o_ChatWindow_thread`).length,
+        1,
+        "should have part to display thread content inside chat window"
+    );
+    assert.ok(
+        chatWindow.querySelector(`:scope .o_ChatWindow_thread`).classList.contains('o_ThreadView'),
+        "thread part should use component ThreadView"
+    );
+});
+
+QUnit.test('chat window: fold', async function (assert) {
+    assert.expect(9);
+
+    // channel that is expected to be found in the messaging menu
+    // with random UUID, will be asserted during the test
+    this.data['mail.channel'].records.push({ uuid: 'channel-uuid' });
+    await this.start({
+        mockRPC(route, args) {
+            if (args.method === 'channel_fold') {
+                assert.step(`rpc:${args.method}/${args.kwargs.state}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    // Open Thread
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should have a thread"
+    );
+    assert.verifySteps(
+        ['rpc:channel_fold/open'],
+        "should sync fold state 'open' with server after opening chat window"
+    );
+
+    // Fold chat window
+    await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
+    assert.verifySteps(
+        ['rpc:channel_fold/folded'],
+        "should sync fold state 'folded' with server after folding chat window"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should not have any thread"
+    );
+
+    // Unfold chat window
+    await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click());
+    assert.verifySteps(
+        ['rpc:channel_fold/open'],
+        "should sync fold state 'open' with server after unfolding chat window"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window should have a thread"
+    );
+});
+
+QUnit.test('chat window: open / close', async function (assert) {
+    assert.expect(10);
+
+    // channel that is expected to be found in the messaging menu
+    // with random UUID, will be asserted during the test
+    this.data['mail.channel'].records.push({ uuid: 'channel-uuid' });
+    await this.start({
+        mockRPC(route, args) {
+            if (args.method === 'channel_fold') {
+                assert.step(`rpc:channel_fold/${args.kwargs.state}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should not have a chat window initially"
+    );
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have a chat window after clicking on thread preview"
+    );
+    assert.verifySteps(
+        ['rpc:channel_fold/open'],
+        "should sync fold state 'open' with server after opening chat window"
+    );
+
+    // Close chat window
+    await afterNextRender(() => document.querySelector(`.o_ChatWindowHeader_commandClose`).click());
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should not have a chat window after closing it"
+    );
+    assert.verifySteps(
+        ['rpc:channel_fold/closed'],
+        "should sync fold state 'closed' with server after closing chat window"
+    );
+
+    // Reopen chat window
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have a chat window again after clicking on thread preview again"
+    );
+    assert.verifySteps(
+        ['rpc:channel_fold/open'],
+        "should sync fold state 'open' with server after opening chat window again"
+    );
+});
+
+QUnit.test('Mobile: opening a chat window should not update channel state on the server', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        state: 'closed',
+    });
+    await this.start({
+        env: {
+            device: {
+                isMobile: true,
+            },
+        },
+    });
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() => document.querySelector(`.o_NotificationList_preview`).click());
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have a chat window after clicking on thread preview"
+    );
+    const channels = await this.env.services.rpc({
+        model: 'mail.channel',
+        method: 'read',
+        args: [20],
+    }, { shadow: true });
+    assert.strictEqual(
+        channels[0].state,
+        'closed',
+        'opening a chat window in mobile should not update channel state on the server',
+    );
+});
+
+QUnit.test('Mobile: closing a chat window should not update channel state on the server', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        state: 'open',
+    });
+    await this.start({
+        env: {
+            device: {
+                isMobile: true,
+            },
+        },
+    });
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() => document.querySelector(`.o_NotificationList_preview`).click());
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have a chat window after clicking on thread preview"
+    );
+    // Close chat window
+    await afterNextRender(() => document.querySelector(`.o_ChatWindowHeader_commandClose`).click());
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should not have a chat window after closing it"
+    );
+    const channels = await this.env.services.rpc({
+        model: 'mail.channel',
+        method: 'read',
+        args: [20],
+    }, { shadow: true });
+    assert.strictEqual(
+        channels[0].state,
+        'open',
+        'closing the chat window should not update channel state on the server',
+    );
+});
+
+QUnit.test("Mobile: chat window shouldn't open automatically after receiving a new message", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 10, name: "Demo" });
+    this.data['res.users'].records.push({
+        id: 42,
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records = [
+        {
+            channel_type: "chat",
+            id: 10,
+            members: [this.data.currentPartnerId, 10],
+            uuid: 'channel-10-uuid',
+        },
+    ];
+    await this.start({
+        env: {
+            device: {
+                isMobile: true,
+            },
+        },
+    });
+
+    // simulate receiving a message
+    await afterNextRender(() => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "hu",
+            uuid: 'channel-10-uuid',
+        },
+    }));
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "On mobile, the chat window shouldn't open automatically after receiving a new message"
+    );
+});
+
+QUnit.test('chat window: close on ESCAPE', async function (assert) {
+    assert.expect(10);
+
+    // expected partner to be found by mention during the test
+    this.data['res.partner'].records.push({ name: "TestPartner" });
+    // a chat window with thread is expected to be initially open for this test
+    this.data['mail.channel'].records.push({ is_minimized: true });
+    await this.start({
+        mockRPC(route, args) {
+            if (args.method === 'channel_fold') {
+                assert.step(`rpc:channel_fold/${args.kwargs.state}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "chat window should be opened initially"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Composer_buttonEmojis`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be opened after click on emojis button"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_Composer_buttonEmojis`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be closed after pressing escape on emojis button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "chat window should still be opened after pressing escape on emojis button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestionList_list'),
+        'show',
+        "should display mention suggestions on typing '@'"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "mention suggestion should be closed after pressing escape on mention suggestion"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "chat window should still be opened after pressing escape on mention suggestion"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "chat window should be closed after pressing escape if there was no other priority escape handler"
+    );
+    assert.verifySteps(['rpc:channel_fold/closed']);
+});
+
+QUnit.test('focus next visible chat window when closing current chat window with ESCAPE', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method)
+     * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1920px
+     *
+     * Enough space for 2 visible chat windows:
+     *  10 + 325 + 5 + 325 + 10 = 670 < 1920
+     */
+    assert.expect(4);
+
+    // 2 chat windows with thread are expected to be initially open for this test
+    this.data['mail.channel'].records.push(
+        { is_minimized: true, state: 'open' },
+        { is_minimized: true, state: 'open' }
+    );
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 1920,
+            },
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow .o_ComposerTextInput_textarea',
+        2,
+        "2 chat windows should be present initially"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow.o-folded',
+        "both chat windows should be open"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: 'Escape' });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(ev);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "only one chat window should remain after pressing escape on first chat window"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatWindow'),
+        'o-focused',
+        "next visible chat window should be focused after pressing escape on first chat window"
+    );
+});
+
+QUnit.test('[technical] chat window: composer state conservation on toggle home menu', async function (assert) {
+    // technical as show/hide home menu simulation are involved and home menu implementation
+    // have side-effects on DOM that may make chat window components not work
+    assert.expect(7);
+
+    // channel that is expected to be found in the messaging menu
+    // with random unique id that is needed to link messages
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    // Set content of the composer of the chat window
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, 'XDU for the win !');
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Composer .o_Attachment',
+        "composer should have no attachment initially"
+    );
+    // Set attachments of the composer
+    const files = [
+        await createFile({
+            name: 'text state conservation on toggle home menu.txt',
+            content: 'hello, world',
+            contentType: 'text/plain',
+        }),
+        await createFile({
+            name: 'text2 state conservation on toggle home menu.txt',
+            content: 'hello, xdu is da best man',
+            contentType: 'text/plain',
+        })
+    ];
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            files
+        )
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "chat window composer initial text input should contain 'XDU for the win !'"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "composer should have 2 total attachments after adding 2 attachments"
+    );
+
+    await this.hideHomeMenu();
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "Chat window composer should still have the same input after hiding home menu"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "Chat window composer should have 2 attachments after hiding home menu"
+    );
+
+    // Show home menu
+    await this.showHomeMenu();
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "chat window composer should still have the same input showing home menu"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "Chat window composer should have 2 attachments showing home menu"
+    );
+});
+
+QUnit.test('[technical] chat window: scroll conservation on toggle home menu', async function (assert) {
+    // technical as show/hide home menu simulation are involved and home menu implementation
+    // have side-effects on DOM that may make chat window components not work
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i < 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_NotificationList_preview').click(),
+        message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    // Set a scroll position to chat window
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142;
+        },
+        message: "should wait until channel 20 scrolled to 142 after setting this value manually",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    await afterNextRender(() => this.hideHomeMenu());
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "chat window scrollTop should still be the same after home menu is hidden"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => this.showHomeMenu(),
+        message: "should wait until channel 20 restored its scroll to 142 after showing the home menu",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "chat window scrollTop should still be the same after home menu is shown"
+    );
+});
+
+QUnit.test('open 2 different chat windows: enough screen width [REQUIRE FOCUS]', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method)
+     * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1920px
+     *
+     * Enough space for 2 visible chat windows:
+     *  10 + 325 + 5 + 325 + 10 = 670 < 1920
+     */
+    assert.expect(8);
+
+    // 2 channels are expected to be found in the messaging menu, each with a
+    // random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 10 }, { id: 20 });
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 1920, // enough to fit at least 2 chat windows
+            },
+        },
+    });
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open a chat window"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "chat window of chat should be open"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).classList.contains('o-focused'),
+        "chat window of chat should have focus"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        2,
+        "should have open a new chat window"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "chat window of channel should be open"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "chat window of chat should still be open"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).classList.contains('o-focused'),
+        "chat window of channel should have focus"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).classList.contains('o-focused'),
+        "chat window of chat should no longer have focus"
+    );
+});
+
+QUnit.test('open 2 chat windows: check shift operations are available', async function (assert) {
+    assert.expect(9);
+
+    // 2 channels are expected to be found in the messaging menu
+    // only their existence matters, data are irrelevant
+    this.data['mail.channel'].records.push({}, {});
+    await this.start();
+
+    await afterNextRender(() => {
+        document.querySelector('.o_MessagingMenu_toggler').click();
+    });
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_MessagingMenu_dropdownMenu .o_NotificationList_preview')[0].click();
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_MessagingMenu_toggler').click();
+    });
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_MessagingMenu_dropdownMenu .o_NotificationList_preview')[1].click();
+    });
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        2,
+        "should have opened 2 chat windows"
+    );
+    assert.containsOnce(
+        document.querySelectorAll('.o_ChatWindow')[0],
+        '.o_ChatWindowHeader_commandShiftLeft',
+        "first chat window should be allowed to shift left"
+    );
+    assert.containsNone(
+        document.querySelectorAll('.o_ChatWindow')[0],
+        '.o_ChatWindowHeader_commandShiftRight',
+        "first chat window should not be allowed to shift right"
+    );
+    assert.containsNone(
+        document.querySelectorAll('.o_ChatWindow')[1],
+        '.o_ChatWindowHeader_commandShiftLeft',
+        "second chat window should not be allowed to shift left"
+    );
+    assert.containsOnce(
+        document.querySelectorAll('.o_ChatWindow')[1],
+        '.o_ChatWindowHeader_commandShiftRight',
+        "second chat window should be allowed to shift right"
+    );
+
+    const initialFirstChatWindowThreadLocalId =
+        document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId;
+    const initialSecondChatWindowThreadLocalId =
+        document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId;
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_ChatWindow')[0]
+            .querySelector(':scope .o_ChatWindowHeader_commandShiftLeft')
+            .click();
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "First chat window should be second after it has been shift left"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "Second chat window should be first after the first has been shifted left"
+    );
+
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_ChatWindow')[1]
+            .querySelector(':scope .o_ChatWindowHeader_commandShiftRight')
+            .click();
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "First chat window should be back at first place after being shifted left then right"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "Second chat window should be back at second place after first one has been shifted left then right"
+    );
+});
+
+QUnit.test('open 2 folded chat windows: check shift operations are available', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: 900px)
+     * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - global width: 900px
+     *
+     * 2 visible chat windows + hidden menu:
+     *  10 + 325 + 5 + 325 + 10 = 675 < 900
+     */
+    assert.expect(13);
+
+    this.data['res.partner'].records.push({ id: 7, name: "Demo" });
+    const channel = {
+        channel_type: "channel",
+        is_minimized: true,
+        is_pinned: true,
+        state: 'folded',
+    };
+    const chat = {
+        channel_type: "chat",
+        is_minimized: true,
+        is_pinned: true,
+        members: [this.data.currentPartnerId, 7],
+        state: 'folded',
+    };
+    this.data['mail.channel'].records.push(channel, chat);
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 900,
+            },
+        },
+    });
+
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        2,
+        "should have opened 2 chat windows initially"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]'),
+        'o-folded',
+        "first chat window should be folded"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]'),
+        'o-folded',
+        "second chat window should be folded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow .o_ChatWindowHeader_commandShiftLeft',
+        "there should be only one chat window allowed to shift left even if folded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow .o_ChatWindowHeader_commandShiftRight',
+        "there should be only one chat window allowed to shift right even if folded"
+    );
+
+    const initialFirstChatWindowThreadLocalId =
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId;
+    const initialSecondChatWindowThreadLocalId =
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId;
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "First chat window should be second after it has been shift left"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "Second chat window should be first after the first has been shifted left"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "First chat window should be back at first place"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "Second chat window should be back at second place"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHeader_commandShiftRight').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "First chat window should be second after it has been shift right"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "Second chat window should be first after the first has been shifted right"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHeader_commandShiftRight').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId,
+        initialFirstChatWindowThreadLocalId,
+        "First chat window should be back at first place"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId,
+        initialSecondChatWindowThreadLocalId,
+        "Second chat window should be back at second place"
+    );
+});
+
+QUnit.test('open 3 different chat windows: not enough screen width', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: 900px)
+     * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1080px
+     *
+     * Enough space for 2 visible chat windows, and one hidden chat window:
+     * 3 visible chat windows:
+     *  10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 900
+     * 2 visible chat windows + hidden menu:
+     *  10 + 325 + 5 + 325 + 10 + 200 + 5 = 875 < 900
+     */
+    assert.expect(12);
+
+    // 3 channels are expected to be found in the messaging menu, each with a
+    // random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 1 }, { id: 2 }, { id: 3 });
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 900, // enough to fit 2 chat windows but not 3
+            },
+        },
+    });
+
+    // open, from systray menu, chat windows of channels with Id 1, 2, then 3
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 1,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open 1 visible chat window"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length,
+        0,
+        "should not have hidden menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
+        0,
+        "messaging menu should be hidden"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 2,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        2,
+        "should have open 2 visible chat windows"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length,
+        0,
+        "should not have hidden menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
+        0,
+        "messaging menu should be hidden"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 3,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        2,
+        "should have open 2 visible chat windows"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length,
+        1,
+        "should have hidden menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
+        0,
+        "messaging menu should be hidden"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 1,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "chat window of channel 1 should be open"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 3,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "chat window of channel 3 should be open"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_ChatWindow[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 3,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).classList.contains('o-focused'),
+        "chat window of channel 3 should have focus"
+    );
+});
+
+QUnit.test('chat window: switch on TAB', async function (assert) {
+    assert.expect(10);
+
+    // 2 channels are expected to be found in the messaging menu
+    // with random unique id and name that will be asserted during the test
+    this.data['mail.channel'].records.push(
+        { id: 1, name: "channel1" },
+        { id: 2, name: "channel2" }
+    );
+    await this.start();
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 1,
+                    model: 'mail.channel',
+                }).localId
+            }"]`
+        ).click()
+    );
+
+    assert.containsOnce(document.body, '.o_ChatWindow', "Only 1 chatWindow must be opened");
+    const chatWindow = document.querySelector('.o_ChatWindow');
+    assert.strictEqual(
+        chatWindow.querySelector('.o_ChatWindowHeader_name').textContent,
+        'channel1',
+        "The name of the only chatWindow should be 'channel1' (channel with ID 1)"
+    );
+    assert.strictEqual(
+        chatWindow.querySelector('.o_ComposerTextInput_textarea'),
+        document.activeElement,
+        "The chatWindow composer must have focus"
+    );
+
+    await afterNextRender(() =>
+        triggerEvent(
+            chatWindow.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'),
+            'keydown',
+            { key: 'Tab' },
+        )
+    );
+    assert.strictEqual(
+        chatWindow.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'),
+        document.activeElement,
+        "The chatWindow composer still has focus"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_preview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 2,
+                    model: 'mail.channel',
+                }).localId
+            }"]`
+        ).click()
+    );
+
+    assert.containsN(document.body, '.o_ChatWindow', 2, "2 chatWindows must be opened");
+    const chatWindows = document.querySelectorAll('.o_ChatWindow');
+    assert.strictEqual(
+        chatWindows[0].querySelector('.o_ChatWindowHeader_name').textContent,
+        'channel1',
+        "The name of the 1st chatWindow should be 'channel1' (channel with ID 1)"
+    );
+    assert.strictEqual(
+        chatWindows[1].querySelector('.o_ChatWindowHeader_name').textContent,
+        'channel2',
+        "The name of the 2nd chatWindow should be 'channel2' (channel with ID 2)"
+    );
+    assert.strictEqual(
+        chatWindows[1].querySelector('.o_ComposerTextInput_textarea'),
+        document.activeElement,
+        "The 2nd chatWindow composer must have focus (channel with ID 2)"
+    );
+
+    await afterNextRender(() =>
+        triggerEvent(
+            chatWindows[1].querySelector('.o_ComposerTextInput_textarea'),
+            'keydown',
+            { key: 'Tab' },
+        )
+    );
+    assert.containsN(document.body, '.o_ChatWindow', 2, "2 chatWindows should still be opened");
+    assert.strictEqual(
+        chatWindows[0].querySelector('.o_ComposerTextInput_textarea'),
+        document.activeElement,
+        "The 1st chatWindow composer must have focus (channel with ID 1)"
+    );
+});
+
+QUnit.test('chat window: TAB cycle with 3 open chat windows [REQUIRE FOCUS]', async function (assert) {
+    /**
+     * InnerWith computation uses following info:
+     * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method)
+     * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1920px
+     *
+     * Enough space for 3 visible chat windows:
+     *  10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 1920
+     */
+    assert.expect(6);
+
+    this.data['mail.channel'].records.push(
+        {
+            is_minimized: true,
+            is_pinned: true,
+            state: 'open',
+        },
+        {
+            is_minimized: true,
+            is_pinned: true,
+            state: 'open',
+        },
+        {
+            is_minimized: true,
+            is_pinned: true,
+            state: 'open',
+        }
+    );
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 1920,
+            },
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow .o_ComposerTextInput_textarea',
+        3,
+        "initialy, 3 chat windows should be present"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow.o-folded',
+        "all 3 chat windows should be open"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea").focus();
+    });
+    assert.strictEqual(
+        document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"),
+        document.activeElement,
+        "The chatWindow with visible-index 2 should have the focus"
+    );
+
+    await afterNextRender(() =>
+        triggerEvent(
+            document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"),
+            'keydown',
+            { key: 'Tab' },
+        )
+    );
+    assert.strictEqual(
+        document.querySelector(".o_ChatWindow[data-visible-index='1'] .o_ComposerTextInput_textarea"),
+        document.activeElement,
+        "after pressing tab on the chatWindow with visible-index 2, the chatWindow with visible-index 1 should have focus"
+    );
+
+    await afterNextRender(() =>
+        triggerEvent(
+            document.querySelector(".o_ChatWindow[data-visible-index='1'] .o_ComposerTextInput_textarea"),
+            'keydown',
+            { key: 'Tab' },
+        )
+    );
+    assert.strictEqual(
+        document.querySelector(".o_ChatWindow[data-visible-index='0'] .o_ComposerTextInput_textarea"),
+        document.activeElement,
+        "after pressing tab on the chat window with visible-index 1, the chatWindow with visible-index 0 should have focus"
+    );
+
+    await afterNextRender(() =>
+        triggerEvent(
+            document.querySelector(".o_ChatWindow[data-visible-index='0'] .o_ComposerTextInput_textarea"),
+            'keydown',
+            { key: 'Tab' },
+        )
+    );
+    assert.strictEqual(
+        document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"),
+        document.activeElement,
+        "the chatWindow with visible-index 2 should have the focus after pressing tab on the chatWindow with visible-index 0"
+    );
+});
+
+QUnit.test('chat window with a thread: keep scroll position in message list on folded', async function (assert) {
+    assert.expect(3);
+
+    // channel that is expected to be found in the messaging menu
+    // with a random unique id, needed to link messages
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i < 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_NotificationList_preview').click(),
+        message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    // Set a scroll position to chat window
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142;
+        },
+        message: "should wait until channel 20 scrolled to 142 after setting this value manually",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "verify chat window initial scrollTop"
+    );
+
+    // fold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    assert.containsNone(
+        document.body,
+        ".o_ThreadView",
+        "chat window should be folded so no ThreadView should be present"
+    );
+
+    // unfold chat window
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_ChatWindow_header').click(),
+        message: "should wait until channel 20 restored its scroll position to 142",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+
+            );
+        },
+    }));
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "chat window scrollTop should still be the same when chat window is unfolded"
+    );
+});
+
+QUnit.test('chat window should scroll to the newly posted message just after posting it', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        is_minimized: true,
+        state: 'open',
+    });
+    for (let i = 0; i < 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+
+    // Set content of the composer of the chat window
+    await afterNextRender(() => {
+        document.querySelector('.o_ComposerTextInput_textarea').focus();
+        document.execCommand('insertText', false, 'WOLOLO');
+    });
+    // Send a new message in the chatwindow to trigger the scroll
+    await afterNextRender(() =>
+        triggerEvent(
+            document.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'),
+            'keydown',
+            { key: 'Enter' },
+        )
+    );
+    const messageList = document.querySelector('.o_MessageList');
+    assert.strictEqual(
+        messageList.scrollHeight - messageList.scrollTop,
+        messageList.clientHeight,
+        "chat window should scroll to the newly posted message just after posting it"
+    );
+});
+
+QUnit.test('chat window: post message on non-mailing channel with "CTRL-Enter" keyboard shortcut for small screen size', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        is_minimized: true,
+        mass_mailing: false,
+    });
+    await this.start({
+        env: {
+            device: {
+                isMobile: true, // here isMobile is used for the small screen size, not actually for the mobile devices
+            },
+        },
+    });
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in channel after posting message from pressing 'CTRL-Enter' in text input of composer for small screen"
+    );
+});
+
+QUnit.test('[technical] chat window: composer state conservation on toggle home menu when folded', async function (assert) {
+    // technical as show/hide home menu simulation are involved and home menu implementation
+    // have side-effects on DOM that may make chat window components not work
+    assert.expect(6);
+
+    // channel that is expected to be found in the messaging menu
+    // only its existence matters, data are irrelevant
+    this.data['mail.channel'].records.push({});
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click()
+    );
+    // Set content of the composer of the chat window
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, 'XDU for the win !');
+    });
+    // Set attachments of the composer
+    const files = [
+        await createFile({
+            name: 'text state conservation on toggle home menu.txt',
+            content: 'hello, world',
+            contentType: 'text/plain',
+        }),
+        await createFile({
+            name: 'text2 state conservation on toggle home menu.txt',
+            content: 'hello, xdu is da best man',
+            contentType: 'text/plain',
+        })
+    ];
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            files
+        )
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "verify chat window composer initial html input"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "verify chat window composer initial attachment count"
+    );
+
+    // fold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    await this.hideHomeMenu();
+    // unfold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "Chat window composer should still have the same input after hiding home menu"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "Chat window composer should have 2 attachments after hiding home menu"
+    );
+
+    // fold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    await this.showHomeMenu();
+    // unfold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "XDU for the win !",
+        "chat window composer should still have the same input after showing home menu"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Composer .o_Attachment',
+        2,
+        "Chat window composer should have 2 attachments after showing home menu"
+    );
+});
+
+QUnit.test('[technical] chat window with a thread: keep scroll position in message list on toggle home menu when folded', async function (assert) {
+    // technical as show/hide home menu simulation are involved and home menu implementation
+    // have side-effects on DOM that may make chat window components not work
+    assert.expect(2);
+
+    // channel that is expected to be found in the messaging menu
+    // with random unique id, needed to link messages
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i < 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_NotificationList_preview').click(),
+        message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    // Set a scroll position to chat window
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142,
+        message: "should wait until channel 20 scrolled to 142 after setting this value manually",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    // fold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    await this.hideHomeMenu();
+    // unfold chat window
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_ChatWindow_header').click(),
+        message: "should wait until channel 20 restored its scroll to 142 after unfolding it",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "chat window scrollTop should still be the same after home menu is hidden"
+    );
+
+    // fold chat window
+    await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click());
+    // Show home menu
+    await this.showHomeMenu();
+    // unfold chat window
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector('.o_ChatWindow_header').click(),
+        message: "should wait until channel 20 restored its scroll position to the last saved value (142)",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 142
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop,
+        142,
+        "chat window scrollTop should still be the same after home menu is shown"
+    );
+});
+
+QUnit.test('chat window does not fetch messages if hidden', async function (assert) {
+    /**
+     * computation uses following info:
+     * ([mocked] global window width: 900px)
+     * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`)
+     *
+     * - chat window width: 325px
+     * - start/end/between gap width: 10px/10px/5px
+     * - hidden menu width: 200px
+     * - global width: 1080px
+     *
+     * Enough space for 2 visible chat windows, and one hidden chat window:
+     * 3 visible chat windows:
+     *  10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 > 900
+     * 2 visible chat windows + hidden menu:
+     *  10 + 325 + 5 + 325 + 10 + 200 + 5 = 875 < 900
+     */
+    assert.expect(14);
+
+    // 3 channels are expected to be found in the messaging menu, each with a
+    // random unique id that will be referenced in the test
+    this.data['mail.channel'].records = [
+        {
+            id: 10,
+            is_minimized: true,
+            name: "Channel #10",
+            state: 'open',
+        },
+        {
+            id: 11,
+            is_minimized: true,
+            name: "Channel #11",
+            state: 'open',
+        },
+        {
+            id: 12,
+            is_minimized: true,
+            name: "Channel #12",
+            state: 'open',
+        },
+    ];
+    await this.start({
+        env: {
+            browser: {
+                innerWidth: 900,
+            },
+        },
+        mockRPC(route, args) {
+            if (args.method === 'message_fetch') {
+                // domain should be like [['channel_id', 'in', [X]]] with X the channel id
+                const channel_ids = args.kwargs.domain[0][2];
+                assert.strictEqual(channel_ids.length, 1, "messages should be fetched channel per channel");
+                assert.step(`rpc:message_fetch:${channel_ids[0]}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        2,
+        "2 chat windows should be visible"
+    );
+    assert.containsNone(
+        document.body,
+        `.o_ChatWindow[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 12,
+                model: 'mail.channel',
+            }).localId
+        }"]`,
+        "chat window for Channel #12 should be hidden"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowHiddenMenu',
+        "chat window hidden menu should be displayed"
+    );
+    assert.verifySteps(
+        ['rpc:message_fetch:10', 'rpc:message_fetch:11'],
+        "messages should be fetched for the two visible chat windows"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHiddenMenu_dropdownToggle').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowHiddenMenu_chatWindowHeader',
+        "1 hidden chat window should be listed in hidden menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHiddenMenu_chatWindowHeader').click()
+    );
+    assert.containsN(
+        document.body,
+        '.o_ChatWindow',
+        2,
+        "2 chat windows should still be visible"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_ChatWindow[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 12,
+                model: 'mail.channel',
+            }).localId
+        }"]`,
+        "chat window for Channel #12 should now be visible"
+    );
+    assert.verifySteps(
+        ['rpc:message_fetch:12'],
+        "messages should now be fetched for Channel #12"
+    );
+});
+
+QUnit.test('new message separator is shown in a chat window of a chat on receiving new message if there is a history of conversation', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({ id: 10, name: "Demo" });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records = [
+        {
+            channel_type: "chat",
+            id: 10,
+            is_minimized: true,
+            is_pinned: false,
+            members: [this.data.currentPartnerId, 10],
+            uuid: 'channel-10-uuid',
+        },
+    ];
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [10],
+        model: 'mail.channel',
+        res_id: 10,
+    });
+    await this.start();
+
+    // simulate receiving a message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "hu",
+            uuid: 'channel-10-uuid',
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "a chat window should be visible after receiving a new message from a chat"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "chat window should have 2 messages"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should display 'new messages' separator in the conversation, from reception of new messages"
+    );
+});
+
+QUnit.test('new message separator is not shown in a chat window of a chat on receiving new message if there is no history of conversation', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 10, name: "Demo" });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records = [{
+        channel_type: "chat",
+        id: 10,
+        members: [this.data.currentPartnerId, 10],
+        uuid: 'channel-10-uuid',
+    }];
+    await this.start();
+
+    // simulate receiving a message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "hu",
+            uuid: 'channel-10-uuid',
+        },
+    }));
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator in the conversation of a chat on receiving new message if there is no history of conversation"
+    );
+});
+
+QUnit.test('focusing a chat window of a chat should make new message separator disappear [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 10, name: "Demo" });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records.push(
+        {
+            channel_type: "chat",
+            id: 10,
+            is_minimized: true,
+            is_pinned: false,
+            members: [this.data.currentPartnerId, 10],
+            message_unread_counter: 0,
+            uuid: 'channel-10-uuid',
+        },
+    );
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [10],
+        model: 'mail.channel',
+        res_id: 10,
+    });
+    await this.start();
+
+    // simulate receiving a message
+    await afterNextRender(() => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "hu",
+            uuid: 'channel-10-uuid',
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should display 'new messages' separator in the conversation, from reception of new messages"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(),
+        message: "should wait until last seen by current partner message id changed",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 10 &&
+                thread.model === 'mail.channel'
+            );
+        },
+    }));
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "new message separator should no longer be shown, after focus on composer text input of chat window"
+    );
+});
+
+QUnit.test('chat window should remain folded when new message is received', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 10, name: "Demo" });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records = [
+        {
+            channel_type: "chat",
+            id: 10,
+            is_minimized: true,
+            is_pinned: false,
+            members: [this.data.currentPartnerId, 10],
+            state: 'folded',
+            uuid: 'channel-10-uuid',
+        },
+    ];
+
+    await this.start();
+    // simulate receiving a new message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "New Message 2",
+            uuid: 'channel-10-uuid',
+        },
+    }));
+    assert.hasClass(
+        document.querySelector(`.o_ChatWindow`),
+        'o-folded',
+        "chat window should remain folded"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js
new file mode 100644
index 00000000..3f6ca7dc
--- /dev/null
+++ b/addons/mail/static/src/components/chatter/chatter.js
@@ -0,0 +1,150 @@
+odoo.define('mail/static/src/components/chatter/chatter.js', function (require) {
+'use strict';
+
+const components = {
+    ActivityBox: require('mail/static/src/components/activity_box/activity_box.js'),
+    AttachmentBox: require('mail/static/src/components/attachment_box/attachment_box.js'),
+    ChatterTopbar: require('mail/static/src/components/chatter_topbar/chatter_topbar.js'),
+    Composer: require('mail/static/src/components/composer/composer.js'),
+    ThreadView: require('mail/static/src/components/thread_view/thread_view.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class Chatter extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId);
+            const thread = chatter ? chatter.thread : undefined;
+            let attachments = [];
+            if (thread) {
+                attachments = thread.allAttachments;
+            }
+            return {
+                attachments: attachments.map(attachment => attachment.__state),
+                chatter: chatter ? chatter.__state : undefined,
+                composer: thread && thread.composer,
+                thread,
+                threadActivitiesLength: thread && thread.activities.length,
+            };
+        }, {
+            compareDepth: {
+                attachments: 1,
+            },
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * Reference of the composer. Useful to focus it.
+         */
+        this._composerRef = useRef('composer');
+        /**
+         * Reference of the scroll Panel (Real scroll element). Useful to pass the Scroll element to
+         * child component to handle proper scrollable element.
+         */
+        this._scrollPanelRef = useRef('scrollPanel');
+        /**
+         * Reference of the message list. Useful to trigger the scroll event on it.
+         */
+        this._threadRef = useRef('thread');
+        this.getScrollableElement = this.getScrollableElement.bind(this);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.chatter}
+     */
+    get chatter() {
+        return this.env.models['mail.chatter'].get(this.props.chatterLocalId);
+    }
+
+    /**
+     * @returns {Element|undefined} Scrollable Element
+     */
+    getScrollableElement() {
+        if (!this._scrollPanelRef.el) {
+            return;
+        }
+        return this._scrollPanelRef.el;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _notifyRendered() {
+        this.trigger('o-chatter-rendered', {
+            attachments: this.chatter.thread.allAttachments,
+            thread: this.chatter.thread.localId,
+        });
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        if (!this.chatter) {
+            return;
+        }
+        if (this.chatter.thread) {
+            this._notifyRendered();
+        }
+        if (this.chatter.isDoFocus) {
+            this.chatter.update({ isDoFocus: false });
+            const composer = this._composerRef.comp;
+            if (composer) {
+                composer.focus();
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onComposerMessagePosted() {
+        this.chatter.update({ isComposerVisible: false });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onScrollPanelScroll(ev) {
+        if (!this._threadRef.comp) {
+            return;
+        }
+        this._threadRef.comp.onScroll(ev);
+    }
+
+}
+
+Object.assign(Chatter, {
+    components,
+    props: {
+        chatterLocalId: String,
+    },
+    template: 'mail.Chatter',
+});
+
+return Chatter;
+
+});
diff --git a/addons/mail/static/src/components/chatter/chatter.scss b/addons/mail/static/src/components/chatter/chatter.scss
new file mode 100644
index 00000000..d722e03b
--- /dev/null
+++ b/addons/mail/static/src/components/chatter/chatter.scss
@@ -0,0 +1,42 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Chatter {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: map-get($sizes, 100);
+}
+
+.o_Chatter_composer {
+    border-bottom: $border-width solid;
+
+    &.o-bordered {
+        border-left: $border-width solid;
+        border-right: $border-width solid;
+    }
+}
+
+.o_Chatter_scrollPanel {
+    overflow-y: auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Chatter {
+    background-color: white;
+    border-color: $border-color;
+}
+
+.o_Chatter_composer {
+    border-bottom-color: $border-color;
+
+    &.o-bordered {
+        border-left-color: $border-color;
+        border-right-color: $border-color;
+    }
+}
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
new file mode 100644
index 00000000..d9cf20b4
--- /dev/null
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Chatter" owl="1">
+        <div class="o_Chatter">
+            <t t-if="chatter">
+                <div class="o_Chatter_fixedPanel">
+                    <ChatterTopbar
+                        class="o_Chatter_topbar"
+                        chatterLocalId="chatter.localId"
+                    />
+                    <t t-if="chatter.threadView and chatter.isComposerVisible">
+                        <Composer
+                            class="o_Chatter_composer"
+                            t-att-class="{ 'o-bordered': chatter.hasExternalBorder }"
+                            composerLocalId="chatter.thread.composer.localId"
+                            hasFollowers="true"
+                            hasMentionSuggestionsBelowPosition="true"
+                            isCompact="false"
+                            isExpandable="true"
+                            textInputSendShortcuts="['ctrl-enter', 'meta-enter']"
+                            t-on-o-message-posted="_onComposerMessagePosted"
+                            t-ref="composer"
+                        />
+                    </t>
+                </div>
+                <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll" t-ref="scrollPanel">
+                    <t t-if="chatter.isAttachmentBoxVisible">
+                        <AttachmentBox
+                            class="o_Chatter_attachmentBox"
+                            threadLocalId="chatter.thread.localId"
+                        />
+                    </t>
+                    <t t-if="chatter.thread and chatter.hasActivities and chatter.thread.activities.length > 0">
+                        <ActivityBox
+                            class="o_Chatter_activityBox"
+                            chatterLocalId="chatter.localId"
+                        />
+                    </t>
+                    <t t-if="chatter.threadView">
+                        <ThreadView
+                            class="o_Chatter_thread"
+                            getScrollableElement="getScrollableElement"
+                            hasComposer="false"
+                            hasScrollAdjust="chatter.hasMessageListScrollAdjust"
+                            order="'desc'"
+                            threadViewLocalId="chatter.threadView.localId"
+                            t-ref="thread"
+                        />
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js b/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js
new file mode 100644
index 00000000..9cb57d83
--- /dev/null
+++ b/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js
@@ -0,0 +1,420 @@
+odoo.define('mail/static/src/components/chatter/chatter_suggested_recipient_tests', function (require) {
+'use strict';
+
+const components = {
+    Chatter: require('mail/static/src/components/chatter/chatter.js'),
+    Composer: require('mail/static/src/components/composer/composer.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('chatter', {}, function () {
+QUnit.module('chatter_suggested_recipients_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createChatterComponent = async ({ chatter }, otherProps) => {
+            const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps);
+            await createRootComponent(this, components.Chatter, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test("suggest recipient on 'Send message' composer", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        email_cc: "john@test.be",
+        partner_ids: [100],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestedRecipientList',
+        "Should display a list of suggested recipients after opening the composer from 'Send message' button"
+    );
+});
+
+QUnit.test("with 3 or less suggested recipients: no 'show more' button", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        email_cc: "john@test.be",
+        partner_ids: [100],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestedRecipientList_showMore',
+        "should not display 'show more' button with 3 or less suggested recipients"
+    );
+});
+
+QUnit.test("display reason for suggested recipient on mouse over", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100],
+    });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    const partnerTitle = document.querySelector('.o_ComposerSuggestedRecipient[data-partner-id="100"]').getAttribute('title');
+    assert.strictEqual(
+        partnerTitle,
+        "Add as recipient and follower (reason: Email partner)",
+        "must display reason for suggested recipient on mouse over",
+    );
+});
+
+QUnit.test("suggested recipient without partner are unchecked by default", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.fake'].records.push({
+        id: 10,
+        email_cc: "john@test.be",
+    });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    const checkboxUnchecked = document.querySelector('.o_ComposerSuggestedRecipient:not([data-partner-id]) input[type=checkbox]');
+    assert.notOk(
+        checkboxUnchecked.checked,
+        "suggested recipient without partner must be unchecked by default",
+    );
+});
+
+QUnit.test("suggested recipient with partner are checked by default", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100],
+    });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    const checkboxChecked = document.querySelector('.o_ComposerSuggestedRecipient[data-partner-id="100"] input[type=checkbox]');
+    assert.ok(
+        checkboxChecked.checked,
+        "suggested recipient with partner must be checked by default",
+    );
+});
+
+QUnit.test("more than 3 suggested recipients: display only 3 and 'show more' button", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "Jack Jone",
+        email: "jack@jone.be",
+        id: 1000,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jolly Roger",
+        email: "Roger@skullflag.com",
+        id: 1001,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jack sparrow",
+        email: "jsparrow@blackpearl.bb",
+        id: 1002,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100, 1000, 1001, 1002],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestedRecipientList_showMore',
+        "more than 3 suggested recipients display 'show more' button"
+    );
+});
+
+QUnit.test("more than 3 suggested recipients: show all of them on click 'show more' button", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "Jack Jone",
+        email: "jack@jone.be",
+        id: 1000,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jolly Roger",
+        email: "Roger@skullflag.com",
+        id: 1001,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jack sparrow",
+        email: "jsparrow@blackpearl.bb",
+        id: 1002,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100, 1000, 1001, 1002],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click()
+    );
+    assert.containsN(
+        document.body,
+        '.o_ComposerSuggestedRecipient',
+        4,
+        "more than 3 suggested recipients: show all of them on click 'show more' button"
+    );
+});
+
+QUnit.test("more than 3 suggested recipients -> click 'show more' -> 'show less' button", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "Jack Jone",
+        email: "jack@jone.be",
+        id: 1000,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jolly Roger",
+        email: "Roger@skullflag.com",
+        id: 1001,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jack sparrow",
+        email: "jsparrow@blackpearl.bb",
+        id: 1002,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100, 1000, 1001, 1002],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestedRecipientList_showLess',
+        "more than 3 suggested recipients -> click 'show more' -> 'show less' button"
+    );
+});
+
+QUnit.test("suggested recipients list display 3 suggested recipient and 'show more' button when 'show less' button is clicked", async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "Jack Jone",
+        email: "jack@jone.be",
+        id: 1000,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jolly Roger",
+        email: "Roger@skullflag.com",
+        id: 1001,
+    });
+    this.data['res.partner'].records.push({
+        display_name: "jack sparrow",
+        email: "jsparrow@blackpearl.bb",
+        id: 1002,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100, 1000, 1001, 1002],
+    });
+    await this.start ();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerSuggestedRecipientList_showLess`).click()
+    );
+    assert.containsN(
+        document.body,
+        '.o_ComposerSuggestedRecipient',
+        3,
+        "suggested recipient list should display 3 suggested recipients after clicking on 'show less'."
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestedRecipientList_showMore',
+        "suggested recipient list should containt a 'show More' button after clicking on 'show less'."
+    );
+});
+
+QUnit.test("suggested recipients should not be notified when posting an internal note", async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({
+        display_name: "John Jane",
+        email: "john@jane.be",
+        id: 100,
+    });
+    this.data['res.fake'].records.push({
+        id: 10,
+        partner_ids: [100],
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.model === 'res.fake' && args.method === 'message_post') {
+                assert.strictEqual(
+                    args.kwargs.partner_ids.length,
+                    0,
+                    "message_post should not contain suggested recipients when posting an internal note"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 10,
+        threadModel: 'res.fake',
+    });
+    await this.createChatterComponent({ chatter });
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "Dummy Message"));
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/chatter/chatter_tests.js b/addons/mail/static/src/components/chatter/chatter_tests.js
new file mode 100644
index 00000000..15163e85
--- /dev/null
+++ b/addons/mail/static/src/components/chatter/chatter_tests.js
@@ -0,0 +1,469 @@
+odoo.define('mail/static/src/components/chatter/chatter_tests', function (require) {
+'use strict';
+
+const components = {
+    Chatter: require('mail/static/src/components/chatter/chatter.js'),
+    Composer: require('mail/static/src/components/composer/composer.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('chatter', {}, function () {
+QUnit.module('chatter_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createChatterComponent = async ({ chatter }, otherProps) => {
+            const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps);
+            await createRootComponent(this, components.Chatter, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.createComposerComponent = async (composer, otherProps) => {
+            const props = Object.assign({ composerLocalId: composer.localId }, otherProps);
+            await createRootComponent(this, components.Composer, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base rendering when chatter has no attachment', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    for (let i = 0; i < 60; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            model: 'res.partner',
+            res_id: 100,
+        });
+    }
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter`).length,
+        1,
+        "should have a chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_attachmentBox`).length,
+        0,
+        "should not have an attachment box in the chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_thread`).length,
+        1,
+        "should have a thread in the chatter"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Chatter_thread`).dataset.threadLocalId,
+        this.env.models['mail.thread'].findFromIdentifyingData({
+            id: 100,
+            model: 'res.partner',
+        }).localId,
+        "thread should have the right thread local id"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        30,
+        "the first 30 messages of thread should be loaded"
+    );
+});
+
+QUnit.test('base rendering when chatter has no record', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter`).length,
+        1,
+        "should have a chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_attachmentBox`).length,
+        0,
+        "should not have an attachment box in the chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_thread`).length,
+        1,
+        "should have a thread in the chatter"
+    );
+    assert.ok(
+        chatter.thread.isTemporary,
+        "thread should have a temporary thread linked to chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        1,
+        "should have a message"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Message_content`).textContent,
+        "Creating a new record...",
+        "should have the 'Creating a new record ...' message"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_loadMore',
+        "should not have the 'load more' button"
+    );
+});
+
+QUnit.test('base rendering when chatter has attachments', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['ir.attachment'].records.push(
+        {
+            mimetype: 'text/plain',
+            name: 'Blah.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+        {
+            mimetype: 'text/plain',
+            name: 'Blu.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        }
+    );
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter`).length,
+        1,
+        "should have a chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_attachmentBox`).length,
+        0,
+        "should not have an attachment box in the chatter"
+    );
+});
+
+QUnit.test('show attachment box', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['ir.attachment'].records.push(
+        {
+            mimetype: 'text/plain',
+            name: 'Blah.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+        {
+            mimetype: 'text/plain',
+            name: 'Blu.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        }
+    );
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter`).length,
+        1,
+        "should have a chatter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_attachmentBox`).length,
+        0,
+        "should not have an attachment box in the chatter"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonAttachments`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_attachmentBox`).length,
+        1,
+        "should have an attachment box in the chatter"
+    );
+});
+
+QUnit.test('composer show/hide on log note/send message [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(10);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonSendMessage`).length,
+        1,
+        "should have a send message button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonLogNote`).length,
+        1,
+        "should have a log note button"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        0,
+        "should not have a composer"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        1,
+        "should have a composer"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Chatter_composer'),
+        'o-focused',
+        "composer 'send message' in chatter should have focus just after being displayed"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        1,
+        "should still have a composer"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Chatter_composer'),
+        'o-focused',
+        "composer 'log note' in chatter should have focus just after being displayed"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        0,
+        "should have no composer anymore"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        1,
+        "should have a composer"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Chatter_composer`).length,
+        0,
+        "should have no composer anymore"
+    );
+});
+
+QUnit.test('should not display user notification messages in chatter', async function (assert) {
+    assert.expect(1);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['mail.message'].records.push({
+        id: 102,
+        message_type: 'user_notification',
+        model: 'res.partner',
+        res_id: 100,
+    });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should display no messages"
+    );
+});
+
+QUnit.test('post message with "CTRL-Enter" keyboard shortcut', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in chatter"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in chatter after posting message from pressing 'CTRL-Enter' in text input of composer"
+    );
+});
+
+QUnit.test('post message with "META-Enter" keyboard shortcut', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in chatter"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { key: "Enter", metaKey: true });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in channel after posting message from pressing 'META-Enter' in text input of composer"
+    );
+});
+
+QUnit.test('do not post message with "Enter" keyboard shortcut', async function (assert) {
+    // Note that test doesn't assert Enter makes a newline, because this
+    // default browser cannot be simulated with just dispatching
+    // programmatically crafted events...
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterComponent({ chatter });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in chatter"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    const kevt = new window.KeyboardEvent('keydown', { key: "Enter" });
+    document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    await nextAnimationFrame();
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should still not have any message in mailing channel after pressing 'Enter' in text input of composer"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js
new file mode 100644
index 00000000..2b186e62
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.js
@@ -0,0 +1,139 @@
+odoo.define('mail/static/src/components/chatter_container/chatter_container.js', function (require) {
+'use strict';
+
+const components = {
+    Chatter: require('mail/static/src/components/chatter/chatter.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+const { clear } = require('mail/static/src/model/model_field_command.js');
+
+const { Component } = owl;
+
+/**
+ * This component abstracts chatter component to its parent, so that it can be
+ * mounted and receive chatter data even when a chatter component cannot be
+ * created. Indeed, in order to create a chatter component, we must create
+ * a chatter record, the latter requiring messaging to be initialized. The view
+ * may attempt to create a chatter before messaging has been initialized, so
+ * this component delays the mounting of chatter until it becomes initialized.
+ */
+class ChatterContainer extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.chatter = undefined;
+        this._wasMessagingInitialized = false;
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const isMessagingInitialized = this.env.isMessagingInitialized();
+            // Delay creation of chatter record until messaging is initialized.
+            // Ideally should observe models directly to detect change instead
+            // of using `useStore`.
+            if (!this._wasMessagingInitialized && isMessagingInitialized) {
+                this._wasMessagingInitialized = true;
+                this._insertFromProps(props);
+            }
+            return { chatter: this.chatter };
+        });
+        useUpdate({ func: () => this._update() });
+    }
+
+    /**
+     * @override
+     */
+    willUpdateProps(nextProps) {
+        if (this.env.isMessagingInitialized()) {
+            this._insertFromProps(nextProps);
+        }
+        return super.willUpdateProps(...arguments);
+    }
+
+    /**
+     * @override
+     */
+    destroy() {
+        super.destroy();
+        if (this.chatter) {
+            this.chatter.delete();
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _insertFromProps(props) {
+        const values = Object.assign({}, props);
+        if (values.threadId === undefined) {
+            values.threadId = clear();
+        }
+        if (!this.chatter) {
+            this.chatter = this.env.models['mail.chatter'].create(values);
+        } else {
+            this.chatter.update(values);
+        }
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        if (this.chatter) {
+            this.chatter.refresh();
+        }
+    }
+
+}
+
+Object.assign(ChatterContainer, {
+    components,
+    props: {
+        hasActivities: {
+            type: Boolean,
+            optional: true,
+        },
+        hasExternalBorder: {
+            type: Boolean,
+            optional: true,
+        },
+        hasFollowers: {
+            type: Boolean,
+            optional: true,
+        },
+        hasMessageList: {
+            type: Boolean,
+            optional: true,
+        },
+        hasMessageListScrollAdjust: {
+            type: Boolean,
+            optional: true,
+        },
+        hasTopbarCloseButton: {
+            type: Boolean,
+            optional: true,
+        },
+        isAttachmentBoxVisibleInitially: {
+            type: Boolean,
+            optional: true,
+        },
+        threadId: {
+            type: Number,
+            optional: true,
+        },
+        threadModel: String,
+    },
+    template: 'mail.ChatterContainer',
+});
+
+
+return ChatterContainer;
+
+});
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.scss b/addons/mail/static/src/components/chatter_container/chatter_container.scss
new file mode 100644
index 00000000..8cd51580
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.scss
@@ -0,0 +1,25 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatterContainer {
+    display: flex;
+    flex: 1 1 auto;
+    width: map-get($sizes, 100);
+}
+
+.o_ChatterContainer_noChatter {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_ChatterContainer_noChatterIcon {
+    margin-right: map-get($spacers, 2);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml
new file mode 100644
index 00000000..c1d8d220
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatterContainer" owl="1">
+        <div class="o_ChatterContainer">
+            <t t-if="chatter">
+                <Chatter chatterLocalId="chatter.localId"/>
+            </t>
+            <t t-else="">
+                <div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-spinner fa-spin"/>Please wait...</div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
new file mode 100644
index 00000000..41d2a461
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
@@ -0,0 +1,137 @@
+odoo.define('mail/static/src/components/chatter_topbar/chatter_topbar.js', function (require) {
+'use strict';
+
+const components = {
+    FollowButton: require('mail/static/src/components/follow_button/follow_button.js'),
+    FollowerListMenu: require('mail/static/src/components/follower_list_menu/follower_list_menu.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ChatterTopbar extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId);
+            const thread = chatter ? chatter.thread : undefined;
+            const threadAttachments = thread ? thread.allAttachments : [];
+            return {
+                areThreadAttachmentsLoaded: thread && thread.areAttachmentsLoaded,
+                chatter: chatter ? chatter.__state : undefined,
+                composerIsLog: chatter && chatter.composer && chatter.composer.isLog,
+                threadAttachmentsAmount: threadAttachments.length,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.chatter}
+     */
+    get chatter() {
+        return this.env.models['mail.chatter'].get(this.props.chatterLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAttachments(ev) {
+        this.chatter.update({
+            isAttachmentBoxVisible: !this.chatter.isAttachmentBoxVisible,
+        });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickClose(ev) {
+        this.trigger('o-close-chatter');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickLogNote(ev) {
+        if (!this.chatter.composer) {
+            return;
+        }
+        if (this.chatter.isComposerVisible && this.chatter.composer.isLog) {
+            this.chatter.update({ isComposerVisible: false });
+        } else {
+            this.chatter.showLogNote();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickScheduleActivity(ev) {
+        const action = {
+            type: 'ir.actions.act_window',
+            name: this.env._t("Schedule Activity"),
+            res_model: 'mail.activity',
+            view_mode: 'form',
+            views: [[false, 'form']],
+            target: 'new',
+            context: {
+                default_res_id: this.chatter.thread.id,
+                default_res_model: this.chatter.thread.model,
+            },
+            res_id: false,
+        };
+        return this.env.bus.trigger('do-action', {
+            action,
+            options: {
+                on_close: () => {
+                    this.trigger('reload', { keepChanges: true });
+                },
+            },
+        });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickSendMessage(ev) {
+        if (!this.chatter.composer) {
+            return;
+        }
+        if (this.chatter.isComposerVisible && !this.chatter.composer.isLog) {
+            this.chatter.update({ isComposerVisible: false });
+        } else {
+            this.chatter.showSendMessage();
+        }
+    }
+
+}
+
+Object.assign(ChatterTopbar, {
+    components,
+    props: {
+        chatterLocalId: String,
+    },
+    template: 'mail.ChatterTopbar',
+});
+
+return ChatterTopbar;
+
+});
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
new file mode 100644
index 00000000..062e5219
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss
@@ -0,0 +1,106 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatterTopbar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    // We need the +1 to handle the status bar border-bottom.
+    // The var is called `$o-statusbar-height`, but is used on button, therefore
+    // doesn't include the border-bottom.
+    // We use min-height to allow multiples buttons lines on mobile.
+    min-height: $o-statusbar-height + 1;
+}
+
+.o_ChatterTopbar_actions {
+    border-bottom: $border-width solid;
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: wrap-reverse; // reverse to ensure send buttons are directly above composer
+}
+
+.o_ChatterTopbar_button {
+    margin-bottom: -$border-width; /* Needed to allow "overriding" of the bottom border */
+}
+
+.o_ChatterTopbar_buttonAttachmentsCountLoader {
+    margin-left: 2px;
+}
+
+.o_ChatterTopbar_buttonCount {
+    padding-left: 0.25rem;
+}
+
+.o_ChatterTopbar_buttonClose {
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 34px;
+    height: 34px;
+}
+
+.o_ChatterTopbar_followerListMenu {
+    display: flex;
+}
+
+.o_ChatterTopbar_rightSection {
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: flex-end;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ChatterTopbar_actions {
+    border-color: transparent;
+
+    &.o-has-active-button {
+        border-color: $border-color;
+    }
+}
+
+.o_ChatterTopbar_button {
+    border-radius: 0;
+
+    &:hover {
+        background-color: gray('300');
+    }
+
+    &.o-active {
+        color: $o-brand-odoo;
+        background-color: lighten(gray('300'), 7%);
+        border-right-color: $border-color;
+
+        &:not(:first-of-type),
+        &:first-of-type.o-bordered {
+            border-left-color: $border-color;
+        }
+
+        &.o-bordered {
+            border-top-color: $border-color;
+        }
+
+        &:hover {
+            background-color: gray('300');
+            color: $link-hover-color;
+        }
+    }
+}
+
+.o_ChatterTopbar_buttonClose {
+    border-radius: 0 0 10px 10px;
+    font-size: $font-size-lg;
+    background-color: gray('700');
+    color: gray('100');
+    cursor: pointer;
+
+    &:hover {
+        background-color: gray('600');
+        color: $white;
+    }
+}
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
new file mode 100644
index 00000000..5d4029e6
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatterTopbar" owl="1">
+        <div class="o_ChatterTopbar">
+            <t t-if="chatter">
+                <div class="o_ChatterTopbar_actions" t-att-class="{'o-has-active-button': chatter.isComposerVisible }">
+                    <t t-if="chatter.threadView">
+                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage"
+                            type="button"
+                            t-att-class="{
+                                'o-active': chatter.isComposerVisible and chatter.composer and !chatter.composer.isLog,
+                                'o-bordered': chatter.hasExternalBorder,
+                            }"
+                            t-att-disabled="chatter.isDisabled"
+                            t-on-click="_onClickSendMessage"
+                        >
+                            Send message
+                        </button>
+                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonLogNote"
+                            type="button"
+                            t-att-class="{
+                                'o-active': chatter.isComposerVisible and chatter.composer and chatter.composer.isLog,
+                                'o-bordered': chatter.hasExternalBorder,
+                            }"
+                            t-att-disabled="chatter.isDisabled"
+                            t-on-click="_onClickLogNote"
+                        >
+                            Log note
+                        </button>
+                    </t>
+                    <t t-if="chatter.hasActivities">
+                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonScheduleActivity" type="button" t-att-disabled="chatter.isDisabled" t-on-click="_onClickScheduleActivity">
+                            <i class="fa fa-clock-o"/>
+                            Schedule activity
+                        </button>
+                    </t>
+                    <div class="o-autogrow"/>
+                        <div class="o_ChatterTopbar_rightSection">
+                            <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments" type="button" t-att-disabled="chatter.isDisabled" t-on-click="_onClickAttachments">
+                                <i class="fa fa-paperclip"/>
+                                <t t-if="chatter.isDisabled or !chatter.isShowingAttachmentsLoading">
+                                    <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/>
+                                </t>
+                                <t t-else="">
+                                    <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-spinner fa-spin" aria-label="Attachment counter loading..."/>
+                                </t>
+                            </button>
+                            <t t-if="chatter.hasFollowers and chatter.thread">
+                                <t t-if="chatter.thread.channel_type !== 'chat'">
+                                    <FollowButton
+                                        class="o_ChatterTopbar_button o_ChatterTopbar_followButton"
+                                        isDisabled="chatter.isDisabled"
+                                        threadLocalId="chatter.thread.localId"
+                                    />
+                                </t>
+                                <FollowerListMenu
+                                    class="o_ChatterTopbar_button o_ChatterTopbar_followerListMenu"
+                                    isDisabled="chatter.isDisabled"
+                                    threadLocalId="chatter.thread.localId"
+                                />
+                            </t>
+                        </div>
+                </div>
+                <t t-if="chatter.hasTopbarCloseButton">
+                    <div class="o_ChatterTopbar_buttonClose" title="Close" t-on-click="_onClickClose">
+                        <i class="fa fa-times"/>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js b/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js
new file mode 100644
index 00000000..3063b389
--- /dev/null
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js
@@ -0,0 +1,730 @@
+odoo.define('mail/static/src/components/chatter_topbar/chatter_topbar_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ChatterTopBar: require('mail/static/src/components/chatter_topbar/chatter_topbar.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const { makeTestPromise } = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('chatter_topbar', {}, function () {
+QUnit.module('chatter_topbar_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createChatterTopbarComponent = async (chatter, otherProps) => {
+            const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps);
+            await createRootComponent(this, components.ChatterTopBar, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base rendering', async function (assert) {
+    assert.expect(8);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonSendMessage`).length,
+        1,
+        "should have a send message button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonLogNote`).length,
+        1,
+        "should have a log note button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonScheduleActivity`).length,
+        1,
+        "should have a schedule activity button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        0,
+        "attachments button should not have a loader"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_followerListMenu`).length,
+        1,
+        "should have a follower menu"
+    );
+});
+
+QUnit.test('base disabled rendering', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    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_buttonScheduleActivity`).disabled,
+        "schedule activity should be disabled"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachments`).disabled,
+        "attachments button should be disabled"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        0,
+        "attachments button should not have a loader"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent,
+        '0',
+        "attachments button counter should be 0"
+    );
+});
+
+QUnit.test('attachment loading is delayed', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start({
+        hasTimeControl: true,
+        loadingBaseDelayDuration: 100,
+        async mockRPC(route) {
+            if (route.includes('ir.attachment/search_read')) {
+                await makeTestPromise(); // simulate long loading
+            }
+            return this._super(...arguments);
+        }
+    });
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        0,
+        "attachments button should not have a loader yet"
+    );
+
+    await afterNextRender(async () => this.env.testUtils.advanceTime(100));
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        1,
+        "attachments button should now have a loader"
+    );
+});
+
+QUnit.test('attachment counter while loading attachments', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start({
+        async mockRPC(route) {
+            if (route.includes('ir.attachment/search_read')) {
+                await makeTestPromise(); // simulate long loading
+            }
+            return this._super(...arguments);
+        }
+    });
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        1,
+        "attachments button should have a loader"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        0,
+        "attachments button should not have a counter"
+    );
+});
+
+QUnit.test('attachment counter transition when attachments become loaded)', async function (assert) {
+    assert.expect(7);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    const attachmentPromise = makeTestPromise();
+    await this.start({
+        async mockRPC(route) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route.includes('ir.attachment/search_read')) {
+                await attachmentPromise;
+            }
+            return _super();
+        },
+    });
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        1,
+        "attachments button should have a loader"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        0,
+        "attachments button should not have a counter"
+    );
+
+    await afterNextRender(() => attachmentPromise.resolve());
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length,
+        0,
+        "attachments button should not have a loader"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+});
+
+QUnit.test('attachment counter without attachments', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent,
+        '0',
+        'attachment counter should contain "0"'
+    );
+});
+
+QUnit.test('attachment counter with attachments', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['ir.attachment'].records.push(
+        {
+            mimetype: 'text/plain',
+            name: 'Blah.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+        {
+            mimetype: 'text/plain',
+            name: 'Blu.txt',
+            res_id: 100,
+            res_model: 'res.partner',
+        }
+    );
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar`).length,
+        1,
+        "should have a chatter topbar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length,
+        1,
+        "should have an attachments button in chatter menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length,
+        1,
+        "attachments button should have a counter"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent,
+        '2',
+        'attachment counter should contain "2"'
+    );
+});
+
+QUnit.test('composer state conserved when clicking on another topbar button', async function (assert) {
+    assert.expect(8);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar`,
+        "should have a chatter topbar"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar_buttonSendMessage`,
+        "should have a send message button in chatter menu"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar_buttonLogNote`,
+        "should have a log note button in chatter menu"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar_buttonAttachments`,
+        "should have an attachments button in chatter menu"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click();
+    });
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar_buttonLogNote.o-active`,
+        "log button should now be active"
+    );
+    assert.containsNone(
+        document.body,
+        `.o_ChatterTopbar_buttonSendMessage.o-active`,
+        "send message button should not be active"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ChatterTopbar_buttonAttachments`).click();
+    });
+    assert.containsOnce(
+        document.body,
+        `.o_ChatterTopbar_buttonLogNote.o-active`,
+        "log button should still be active"
+    );
+    assert.containsNone(
+        document.body,
+        `.o_ChatterTopbar_buttonSendMessage.o-active`,
+        "send message button should still be not active"
+    );
+});
+
+QUnit.test('rendering with multiple partner followers', async function (assert) {
+    assert.expect(7);
+
+    await this.start();
+    this.data['res.partner'].records.push({
+        id: 100,
+        message_follower_ids: [1, 2],
+    });
+    this.data['mail.followers'].records.push(
+        {
+            // simulate real return from RPC
+            // (the presence of the key and the falsy value need to be handled correctly)
+            channel_id: false,
+            id: 1,
+            name: "Jean Michang",
+            partner_id: 12,
+            res_id: 100,
+            res_model: 'res.partner',
+        }, {
+            // simulate real return from RPC
+            // (the presence of the key and the falsy value need to be handled correctly)
+            channel_id: false,
+            id: 2,
+            name: "Eden Hazard",
+            partner_id: 11,
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+    );
+    const chatter = this.env.models['mail.chatter'].create({
+        followerIds: [1, 2],
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be opened"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Follower',
+        2,
+        "exactly two followers should be listed"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Follower_name',
+        2,
+        "exactly two follower names should be listed"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Follower_name')[0].textContent.trim(),
+        "Jean Michang",
+        "first follower is 'Jean Michang'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Follower_name')[1].textContent.trim(),
+        "Eden Hazard",
+        "second follower is 'Eden Hazard'"
+    );
+});
+
+QUnit.test('rendering with multiple channel followers', async function (assert) {
+    assert.expect(7);
+
+    this.data['res.partner'].records.push({
+        id: 100,
+        message_follower_ids: [1, 2],
+    });
+    await this.start();
+    this.data['mail.followers'].records.push(
+        {
+            channel_id: 11,
+            id: 1,
+            name: "channel numero 5",
+            // simulate real return from RPC
+            // (the presence of the key and the falsy value need to be handled correctly)
+            partner_id: false,
+            res_id: 100,
+            res_model: 'res.partner',
+        }, {
+            channel_id: 12,
+            id: 2,
+            name: "channel armstrong",
+            // simulate real return from RPC
+            // (the presence of the key and the falsy value need to be handled correctly)
+            partner_id: false,
+            res_id: 100,
+            res_model: 'res.partner',
+        },
+    );
+    const chatter = this.env.models['mail.chatter'].create({
+        followerIds: [1, 2],
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be opened"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Follower',
+        2,
+        "exactly two followers should be listed"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Follower_name',
+        2,
+        "exactly two follower names should be listed"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Follower_name')[0].textContent.trim(),
+        "channel numero 5",
+        "first follower is 'channel numero 5'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Follower_name')[1].textContent.trim(),
+        "channel armstrong",
+        "second follower is 'channel armstrong'"
+    );
+});
+
+QUnit.test('log note/send message switching', async function (assert) {
+    assert.expect(8);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonSendMessage',
+        "should have a 'Send Message' button"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should not be active"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonLogNote',
+        "should have a 'Log Note' button"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should not be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should be active"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should not be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should not be active"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should be active"
+    );
+});
+
+QUnit.test('log note toggling', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonLogNote',
+        "should have a 'Log Note' button"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should not be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click()
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonLogNote'),
+        'o-active',
+        "'Log Note' button should not be active"
+    );
+});
+
+QUnit.test('send message toggling', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start();
+    const chatter = this.env.models['mail.chatter'].create({
+        threadId: 100,
+        threadModel: 'res.partner',
+    });
+    await this.createChatterTopbarComponent(chatter);
+    assert.containsOnce(
+        document.body,
+        '.o_ChatterTopbar_buttonSendMessage',
+        "should have a 'Send Message' button"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should not be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.hasClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click()
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_ChatterTopbar_buttonSendMessage'),
+        'o-active',
+        "'Send Message' button should not be active"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js
new file mode 100644
index 00000000..31654a4f
--- /dev/null
+++ b/addons/mail/static/src/components/composer/composer.js
@@ -0,0 +1,444 @@
+odoo.define('mail/static/src/components/composer/composer.js', function (require) {
+'use strict';
+
+const components = {
+    AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'),
+    ComposerSuggestedRecipientList: require('mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js'),
+    DropZone: require('mail/static/src/components/drop_zone/drop_zone.js'),
+    EmojisPopover: require('mail/static/src/components/emojis_popover/emojis_popover.js'),
+    FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'),
+    TextInput: require('mail/static/src/components/composer_text_input/composer_text_input.js'),
+    ThreadTextualTypingStatus: require('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js'),
+};
+const useDragVisibleDropZone = require('mail/static/src/component_hooks/use_drag_visible_dropzone/use_drag_visible_dropzone.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+const {
+    isEventHandled,
+    markEventHandled,
+} = require('mail/static/src/utils/utils.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class Composer extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.isDropZoneVisible = useDragVisibleDropZone();
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                textInputSendShortcuts: 1,
+            },
+        });
+        useStore(props => {
+            const composer = this.env.models['mail.composer'].get(props.composerLocalId);
+            const thread = composer && composer.thread;
+            return {
+                composer,
+                composerAttachments: composer ? composer.attachments : [],
+                composerCanPostMessage: composer && composer.canPostMessage,
+                composerHasFocus: composer && composer.hasFocus,
+                composerIsLog: composer && composer.isLog,
+                composerSubjectContent: composer && composer.subjectContent,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                thread,
+                threadChannelType: thread && thread.channel_type, // for livechat override
+                threadDisplayName: thread && thread.displayName,
+                threadMassMailing: thread && thread.mass_mailing,
+                threadModel: thread && thread.model,
+                threadName: thread && thread.name,
+            };
+        }, {
+            compareDepth: {
+                composerAttachments: 1,
+            },
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * Reference of the emoji popover. Useful to include emoji popover as
+         * contained "inside" the composer.
+         */
+        this._emojisPopoverRef = useRef('emojisPopover');
+        /**
+         * Reference of the file uploader.
+         * Useful to programmatically prompts the browser file uploader.
+         */
+        this._fileUploaderRef = useRef('fileUploader');
+        /**
+         * Reference of the text input component.
+         */
+        this._textInputRef = useRef('textInput');
+        /**
+         * Reference of the subject input. Useful to set content.
+         */
+        this._subjectRef = useRef('subject');
+        this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this);
+    }
+
+    mounted() {
+        document.addEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.composer}
+     */
+    get composer() {
+        return this.env.models['mail.composer'].get(this.props.composerLocalId);
+    }
+
+    /**
+     * Returns whether the given node is self or a children of self, including
+     * the emoji popover.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        // emoji popover is outside but should be considered inside
+        const emojisPopover = this._emojisPopoverRef.comp;
+        if (emojisPopover && emojisPopover.contains(node)) {
+            return true;
+        }
+        return this.el.contains(node);
+    }
+
+    /**
+     * Get the current partner image URL.
+     *
+     * @returns {string}
+     */
+    get currentPartnerAvatar() {
+        const avatar = this.env.messaging.currentUser
+            ? this.env.session.url('/web/image', {
+                    field: 'image_128',
+                    id: this.env.messaging.currentUser.id,
+                    model: 'res.users',
+                })
+            : '/web/static/src/img/user_menu_avatar.png';
+        return avatar;
+    }
+
+    /**
+     * Focus the composer.
+     */
+    focus() {
+        if (this.env.messaging.device.isMobile) {
+            this.el.scrollIntoView();
+        }
+        this._textInputRef.comp.focus();
+    }
+
+    /**
+     * Focusout the composer.
+     */
+    focusout() {
+        this._textInputRef.comp.focusout();
+    }
+
+    /**
+     * Determine whether composer should display a footer.
+     *
+     * @returns {boolean}
+     */
+    get hasFooter() {
+        return (
+            this.props.hasThreadTyping ||
+            this.composer.attachments.length > 0 ||
+            !this.props.isCompact
+        );
+    }
+
+    /**
+     * Determine whether the composer should display a header.
+     *
+     * @returns {boolean}
+     */
+    get hasHeader() {
+        return (
+            (this.props.hasThreadName && this.composer.thread) ||
+            (this.props.hasFollowers && !this.composer.isLog)
+        );
+    }
+
+    /**
+     * Get an object which is passed to FileUploader component to be used when
+     * creating attachment.
+     *
+     * @returns {Object}
+     */
+    get newAttachmentExtraData() {
+        return {
+            composers: [['replace', this.composer]],
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Post a message in the composer on related thread.
+     *
+     * Posting of the message could be aborted if it cannot be posted like if there are attachments
+     * currently uploading or if there is no text content and no attachments.
+     *
+     * @private
+     */
+    async _postMessage() {
+        if (!this.composer.canPostMessage) {
+            if (this.composer.hasUploadingAttachment) {
+                this.env.services['notification'].notify({
+                    message: this.env._t("Please wait while the file is uploading."),
+                    type: 'warning',
+                });
+            }
+            return;
+        }
+        await this.composer.postMessage();
+        // TODO: we might need to remove trigger and use the store to wait for the post rpc to be done
+        // task-2252858
+        this.trigger('o-message-posted');
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        if (this.props.isDoFocus) {
+            this.focus();
+        }
+        if (!this.composer) {
+            return;
+        }
+        if (this._subjectRef.el) {
+            this._subjectRef.el.value = this.composer.subjectContent;
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on attachment button.
+     *
+     * @private
+     */
+    _onClickAddAttachment() {
+        this._fileUploaderRef.comp.openBrowserFileUploader();
+        if (!this.env.device.isMobile) {
+            this.focus();
+        }
+    }
+
+    /**
+     * Discards the composer when clicking away.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCaptureGlobal(ev) {
+        if (this.contains(ev.target)) {
+            return;
+        }
+        this.composer.discard();
+    }
+
+    /**
+     * Called when clicking on "expand" button.
+     *
+     * @private
+     */
+    _onClickFullComposer() {
+        this.composer.openFullComposer();
+    }
+
+    /**
+     * Called when clicking on "discard" button.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDiscard(ev) {
+        this.composer.discard();
+    }
+
+    /**
+     * Called when clicking on "send" button.
+     *
+     * @private
+     */
+    _onClickSend() {
+        this._postMessage();
+        this.focus();
+    }
+
+    /**
+     * @private
+     */
+    _onComposerSuggestionClicked() {
+        this.focus();
+    }
+
+    /**
+     * @private
+     */
+    _onComposerTextInputSendShortcut() {
+        this._postMessage();
+    }
+
+    /**
+     * Called when some files have been dropped in the dropzone.
+     *
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {FileList} ev.detail.files
+     */
+    async _onDropZoneFilesDropped(ev) {
+        ev.stopPropagation();
+        await this._fileUploaderRef.comp.uploadFiles(ev.detail.files);
+        this.isDropZoneVisible.value = false;
+    }
+
+    /**
+     * Called when selection an emoji from the emoji popover (from the emoji
+     * button).
+     *
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {string} ev.detail.unicode
+     */
+    _onEmojiSelection(ev) {
+        ev.stopPropagation();
+        this._textInputRef.comp.saveStateInStore();
+        this.composer.insertIntoTextInput(ev.detail.unicode);
+        if (!this.env.device.isMobile) {
+            this.focus();
+        }
+    }
+
+    /**
+     * @private
+     */
+    _onInputSubject() {
+        this.composer.update({ subjectContent: this._subjectRef.el.value });
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        if (ev.key === 'Escape') {
+            if (isEventHandled(ev, 'ComposerTextInput.closeSuggestions')) {
+                return;
+            }
+            if (isEventHandled(ev, 'Composer.closeEmojisPopover')) {
+                return;
+            }
+            ev.preventDefault();
+            this.composer.discard();
+        }
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownEmojiButton(ev) {
+        if (ev.key === 'Escape') {
+            if (this._emojisPopoverRef.comp) {
+                this._emojisPopoverRef.comp.close();
+                this.focus();
+                markEventHandled(ev, 'Composer.closeEmojisPopover');
+            }
+        }
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    async _onPasteTextInput(ev) {
+        if (!ev.clipboardData || !ev.clipboardData.files) {
+            return;
+        }
+        await this._fileUploaderRef.comp.uploadFiles(ev.clipboardData.files);
+    }
+
+}
+
+Object.assign(Composer, {
+    components,
+    defaultProps: {
+        hasCurrentPartnerAvatar: true,
+        hasDiscardButton: false,
+        hasFollowers: false,
+        hasSendButton: true,
+        hasThreadName: false,
+        hasThreadTyping: false,
+        isCompact: true,
+        isDoFocus: false,
+        isExpandable: false,
+    },
+    props: {
+        attachmentsDetailsMode: {
+            type: String,
+            optional: true,
+        },
+        composerLocalId: String,
+        hasCurrentPartnerAvatar: Boolean,
+        hasDiscardButton: Boolean,
+        hasFollowers: Boolean,
+        hasMentionSuggestionsBelowPosition: {
+            type: Boolean,
+            optional: true,
+        },
+        hasSendButton: Boolean,
+        hasThreadName: Boolean,
+        hasThreadTyping: Boolean,
+        /**
+         * Determines whether this should become focused.
+         */
+        isDoFocus: Boolean,
+        showAttachmentsExtensions: {
+            type: Boolean,
+            optional: true,
+        },
+        showAttachmentsFilenames: {
+            type: Boolean,
+            optional: true,
+        },
+        isCompact: Boolean,
+        isExpandable: Boolean,
+        /**
+         * If set, keyboard shortcuts from text input to send message.
+         * If not set, will use default values from `ComposerTextInput`.
+         */
+        textInputSendShortcuts: {
+            type: Array,
+            element: String,
+            optional: true,
+        },
+    },
+    template: 'mail.Composer',
+});
+
+return Composer;
+
+});
diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss
new file mode 100644
index 00000000..df695cce
--- /dev/null
+++ b/addons/mail/static/src/components/composer/composer.scss
@@ -0,0 +1,273 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Composer {
+    display: grid;
+    grid-template-areas:
+        "sidebar-header core-header"
+        "sidebar-main core-main"
+        "sidebar-footer core-footer";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+
+    &.o-has-current-partner-avatar {
+        grid-template-columns: 50px 1fr;
+        padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 1);
+
+        &:not(.o-has-footer) {
+            padding-bottom: 20px;
+        }
+
+        &:not(.o-has-header) {
+            padding-top: 20px;
+        }
+    }
+}
+
+.o_Composer_actionButtons {
+    &.o-composer-is-compact {
+        display: flex;
+    }
+    &:not(.o-composer-is-compact) {
+        margin-top: 10px;
+    }
+}
+
+.o_Composer_attachmentList {
+    flex: 1 1 auto;
+
+    &.o-composer-is-compact {
+        max-height: 100px;
+    }
+
+    &:not(.o-composer-is-compact) {
+        overflow-y: auto;
+        max-height: 300px;
+    }
+}
+
+.o_Composer_buttons {
+    display: flex;
+    align-items: stretch;
+    align-self: stretch;
+    flex: 0 0 auto;
+    min-height: 41px; // match minimal-height of input, including border width
+
+    &:not(.o-composer-is-compact) {
+        border: 0;
+        height: auto;
+        padding: 0 10px;
+        width: 100%;
+    }
+}
+
+.o_Composer_coreFooter {
+    grid-area: core-footer;
+    overflow-x: hidden;
+
+    &:not(.o-composer-is-compact) {
+        margin-left: 0;
+    }
+}
+
+.o_Composer_coreHeader {
+    grid-area: core-header;
+}
+
+.o_Composer_coreMain {
+    grid-area: core-main;
+    min-width: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    flex: 1 1 auto;
+
+    &:not(.o-composer-is-compact) {
+        flex-direction: column;
+    }
+}
+
+.o_Composer_currentPartnerAvatar {
+    width: 36px;
+    height: 36px;
+}
+
+.o_Composer_followers,
+.o_Composer_suggestedPartners {
+    flex: 0 0 100%;
+    margin-bottom: $o-mail-chatter-gap * 0.5;
+}
+
+.o_Composer_primaryToolButtons {
+    display: flex;
+    align-items: center;
+
+    &.o-composer-is-compact {
+        padding-left: map-get($spacers, 2);
+        padding-right: map-get($spacers, 2);
+    }
+}
+
+.o_Composer_sidebarMain {
+    grid-area: sidebar-main;
+    justify-self: center;
+}
+
+.o_Composer_subject {
+    border-top: $border-width solid $border-color;
+    border-right: $border-width solid $border-color;
+    border-left: $border-width solid $border-color;
+    border-radius: $o-mail-rounded-rectangle-border-radius-sm $o-mail-rounded-rectangle-border-radius-sm 0 0;
+}
+
+.o_Composer_subjectInput {
+    display: flex;
+    flex: 1;
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    border: 0;
+}
+
+.o_Composer_textInput {
+    flex: 1 1 auto;
+    align-self: stretch;
+
+    &:not(.o-composer-is-compact) {
+        border: 0;
+        min-height: 40px;
+    }
+}
+
+.o_Composer_threadTextualTypingStatus {
+    font-size: $font-size-sm;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:before {
+        // invisible character so that typing status bar has constant height, regardless of text content.
+        content: "\200b"; /* unicode zero width space character */
+    }
+}
+
+.o_Composer_toolButton {
+    // keep a margin between the buttons to prevent their focus shadow from overlapping
+    margin-left: map-get($spacers, 1);
+    margin-right: map-get($spacers, 1);
+}
+
+.o_Composer_toolButtons {
+    display: flex;
+    padding-top: map-get($spacers, 1);
+    padding-bottom: map-get($spacers, 1);
+
+    &:not(.o-composer-is-compact) {
+        flex-direction: row;
+        justify-content: space-between;
+        flex: 100%;
+    }
+}
+
+.o_Composer_toolButtonSeparator {
+    flex: 0 0 auto;
+    margin-top: map-get($spacers, 2);
+    margin-bottom: map-get($spacers, 2);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+// TODO FIXME o-open on the button should be enough.
+// Style of button when popover is "open" comes from web.Popover, and we can't
+// define a modifier on .o_Composer_button due to not being aware of Popover's
+// state in context of template. https://github.com/odoo/owl/issues/693
+.o_is_open .o_Composer_toolButton {
+    background-color: gray('200');
+}
+
+.o_Composer {
+    background-color: lighten(gray('300'), 7%);
+}
+
+.o_Composer_actionButton.o-last.o-has-current-partner-avatar.o-composer-is-compact {
+    border-radius: 0 $o-mail-rounded-rectangle-border-radius-lg $o-mail-rounded-rectangle-border-radius-lg 0;
+}
+
+.o_Composer_button.o-composer-is-compact {
+    border-left: none; // overrides bootstrap button style
+
+    :last-child {
+        border-radius: 0 3px 3px 0;
+    }
+}
+
+.o_Composer_buttonDiscard {
+    border: 1px solid lighten(gray('400'), 5%);
+}
+
+.o_Composer_buttons {
+    border: 0;
+}
+
+.o_Composer_coreMain:not(.o-composer-is-compact) {
+    background: white;
+    border: 1px solid lighten(gray('400'), 5%);
+
+    // textarea should be all rounded but only when there is no subject field above
+    &:not(.o-composer-is-extended) {
+        border-radius: $o-mail-rounded-rectangle-border-radius-lg;
+    }
+}
+
+.o_Composer_currentPartnerAvatar {
+    object-fit: cover;
+}
+
+.o_Composer_textInput {
+    appearance: none;
+    outline: none;
+    background-color: white;
+    border: 0;
+    border-top: 1px solid lighten(gray('400'), 5%);
+    border-bottom: 1px solid lighten(gray('400'), 5%);
+    border-left: 1px solid lighten(gray('400'), 5%);
+
+    &:not(.o-composer-is-compact) {
+        border: 0;
+        border-radius: $o-mail-rounded-rectangle-border-radius-lg;
+    }
+
+    &.o-has-current-partner-avatar.o-composer-is-compact {
+        border-radius: $o-mail-rounded-rectangle-border-radius-lg 0 0 $o-mail-rounded-rectangle-border-radius-lg;
+    }
+}
+
+.o_Composer_toolButton {
+    border: 0; // overrides bootstrap btn
+    background-color: white; // overrides bootstrap btn-light
+    color: gray('600'); // overrides bootstrap btn-light
+    border-radius: 50%;
+
+    &.o-open {
+        background-color: gray('200');
+    }
+}
+
+.o_Composer_toolButtons {
+    background-color: white;
+    border-top: 1px solid lighten(gray('400'), 5%);
+    border-bottom: 1px solid lighten(gray('400'), 5%);
+
+    &:not(.o-composer-is-compact) {
+        border-bottom: 0;
+        border-radius: initial;
+    }
+
+    &:last-child:not(.o-composer-has-current-partner-avatar) {
+        border-right: 1px solid lighten(gray('400'), 5%);
+    }
+}
+
+.o_Composer_toolButtonSeparator {
+    border-left: 1px solid lighten(gray('400'), 5%);
+}
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
new file mode 100644
index 00000000..cc7038d3
--- /dev/null
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -0,0 +1,179 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Composer" owl="1">
+        <div class="o_Composer"
+            t-att-class="{
+                'o-focused': composer and composer.hasFocus,
+                'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                'o-has-footer': hasFooter,
+                'o-has-header': hasHeader,
+                'o-is-compact': props.isCompact,
+            }"
+            t-on-keydown="_onKeydown"
+        >
+            <t t-if="composer">
+                <t t-if="isDropZoneVisible.value">
+                    <DropZone
+                        class="o_Composer_dropZone"
+                        t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped"
+                        t-ref="dropzone"
+                    />
+                </t>
+                <FileUploader
+                    attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)"
+                    newAttachmentExtraData="newAttachmentExtraData"
+                    t-ref="fileUploader"
+                />
+                <t t-if="hasHeader">
+                    <div class="o_Composer_coreHeader">
+                        <t t-if="props.hasThreadName and composer.thread">
+                            <span class="o_Composer_threadName">
+                                on: <b><t t-esc="composer.thread.displayName"/></b>
+                            </span>
+                        </t>
+                        <t t-if="props.hasFollowers and !composer.isLog">
+                            <!-- Text for followers -->
+                            <small class="o_Composer_followers">
+                                <b class="text-muted">To: </b>
+                                <em class="text-muted">Followers of </em>
+                                <b>
+                                    <t t-if="composer.thread and composer.thread.name">
+                                        &#32;&quot;<t t-esc="composer.thread.name"/>&quot;
+                                    </t>
+                                    <t t-else="">
+                                        this document
+                                    </t>
+                                </b>
+                            </small>
+                            <ComposerSuggestedRecipientList
+                                threadLocalId="composer.thread.localId"
+                            />
+                        </t>
+                    </div>
+                </t>
+                <t t-if="composer.thread and composer.thread.model === 'mail.channel' and composer.thread.mass_mailing">
+                    <div class="o_Composer_subject">
+                        <input class="o_Composer_subjectInput" type="text" placeholder="Subject" t-on-input="_onInputSubject" t-ref="subject"/>
+                    </div>
+                </t>
+                <t t-if="props.hasCurrentPartnerAvatar">
+                    <div class="o_Composer_sidebarMain">
+                        <img class="o_Composer_currentPartnerAvatar rounded-circle" t-att-src="currentPartnerAvatar" alt=""/>
+                    </div>
+                </t>
+                <div
+                    class="o_Composer_coreMain"
+                    t-att-class="{
+                        'o-composer-is-compact': props.isCompact,
+                        'o-composer-is-extended': composer.thread and composer.thread.mass_mailing,
+                    }"
+                >
+                    <TextInput
+                        class="o_Composer_textInput"
+                        t-att-class="{
+                            'o-composer-is-compact': props.isCompact,
+                            'o_Composer_textInput-mobile': env.messaging.device.isMobile,
+                            'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                        }"
+                        composerLocalId="composer.localId"
+                        hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition"
+                        isCompact="props.isCompact"
+                        sendShortcuts="props.textInputSendShortcuts"
+                        t-on-o-composer-suggestion-clicked="_onComposerSuggestionClicked"
+                        t-on-o-composer-text-input-send-shortcut="_onComposerTextInputSendShortcut"
+                        t-on-paste="_onPasteTextInput"
+                        t-key="composer.localId"
+                        t-ref="textInput"
+                    />
+                    <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-mobile': env.messaging.device.isMobile }">
+                        <div class="o_Composer_toolButtons"
+                            t-att-class="{
+                                'o-composer-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                                'o-composer-is-compact': props.isCompact,
+                            }">
+                            <t t-if="props.isCompact">
+                                <div class="o_Composer_toolButtonSeparator"/>
+                            </t>
+                            <div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                                <Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection">
+                                    <!-- TODO FIXME o-open not possible to code due to https://github.com/odoo/owl/issues/693 -->
+                                    <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light"
+                                        t-att-class="{
+                                            'o-open': false and state.displayed,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }"
+                                        t-on-keydown="_onKeydownEmojiButton"
+                                    >
+                                        <i class="fa fa-smile-o"/>
+                                    </button>
+                                    <t t-set="opened">
+                                        <EmojisPopover t-ref="emojisPopover"/>
+                                    </t>
+                                </Popover>
+                                <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/>
+                            </div>
+                            <t t-if="props.isExpandable">
+                                <div class="o_Composer_secondaryToolButtons">
+                                    <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/>
+                                </div>
+                            </t>
+                        </div>
+                        <t t-if="props.isCompact">
+                            <t t-call="mail.Composer.actionButtons"/>
+                        </t>
+                    </div>
+                </div>
+                <t t-if="hasFooter">
+                    <div class="o_Composer_coreFooter" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+                        <t t-if="props.hasThreadTyping">
+                            <ThreadTextualTypingStatus class="o_Composer_threadTextualTypingStatus" threadLocalId="composer.thread.localId"/>
+                        </t>
+                        <t t-if="composer.attachments.length > 0">
+                            <AttachmentList
+                                class="o_Composer_attachmentList"
+                                t-att-class="{ 'o-composer-is-compact': props.isCompact }"
+                                areAttachmentsEditable="true"
+                                attachmentsDetailsMode="props.attachmentsDetailsMode"
+                                attachmentsImageSize="'small'"
+                                attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)"
+                                showAttachmentsExtensions="props.showAttachmentsExtensions"
+                                showAttachmentsFilenames="props.showAttachmentsFilenames"
+                            />
+                        </t>
+                        <t t-if="!props.isCompact">
+                            <t t-call="mail.Composer.actionButtons"/>
+                        </t>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.Composer.actionButtons" owl="1">
+        <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }">
+            <t t-if="props.hasSendButton">
+                <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary"
+                    t-att-class="{
+                        'fa': env.messaging.device.isMobile,
+                        'fa-paper-plane-o': env.messaging.device.isMobile,
+                        'o-last': env.messaging.device.isMobile or !props.hasDiscardButton,
+                        'o-composer-is-compact': props.isCompact,
+                        'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar,
+                    }"
+                    t-att-disabled="!composer.canPostMessage ? 'disabled' : ''"
+                    type="button"
+                    t-on-click="_onClickSend"
+                >
+                    <t t-if="!env.messaging.device.isMobile"><t t-if="composer.isLog">Log</t><t t-else="">Send</t></t>
+                </button>
+            </t>
+            <t t-if="!env.messaging.device.isMobile and props.hasDiscardButton">
+                <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar }" type="button" t-on-click="_onClickDiscard">
+                    Discard
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/composer/composer_tests.js b/addons/mail/static/src/components/composer/composer_tests.js
new file mode 100644
index 00000000..a4ff5978
--- /dev/null
+++ b/addons/mail/static/src/components/composer/composer_tests.js
@@ -0,0 +1,2153 @@
+odoo.define('mail/static/src/components/composer/composer_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Composer: require('mail/static/src/components/composer/composer.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    dragenterFiles,
+    dropFiles,
+    nextAnimationFrame,
+    pasteFiles,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const {
+    file: {
+        createFile,
+        inputFiles,
+    },
+    makeTestPromise,
+} = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('composer', {}, function () {
+QUnit.module('composer_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createComposerComponent = async (composer, otherProps) => {
+            const props = Object.assign({ composerLocalId: composer.localId }, otherProps);
+            await createRootComponent(this, components.Composer, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('composer text input: basic rendering when posting a message', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        composer: [['create', { isLog: false }]],
+        id: 20,
+        model: 'res.partner',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer').length,
+        1,
+        "should have composer in discuss thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer_textInput').length,
+        1,
+        "should have text input inside discuss thread composer"
+    );
+    assert.ok(
+        document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'),
+        "composer text input of composer should be a ComposerTextIput component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ComposerTextInput_textarea`).length,
+        1,
+        "should have editable part inside composer text input"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).placeholder,
+        "Send a message to followers...",
+        "should have 'Send a message to followers...' as placeholder composer text input"
+    );
+});
+
+QUnit.test('composer text input: basic rendering when logging note', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        composer: [['create', { isLog: true }]],
+        id: 20,
+        model: 'res.partner',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer').length,
+        1,
+        "should have composer in discuss thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer_textInput').length,
+        1,
+        "should have text input inside discuss thread composer"
+    );
+    assert.ok(
+        document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'),
+        "composer text input of composer should be a ComposerTextIput component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ComposerTextInput_textarea`).length,
+        1,
+        "should have editable part inside composer text input"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).placeholder,
+        "Log an internal note...",
+        "should have 'Log an internal note...' as placeholder in composer text input if composer is log"
+    );
+});
+
+QUnit.test('composer text input: basic rendering when linked thread is a mail.channel', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer').length,
+        1,
+        "should have composer in discuss thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Composer_textInput').length,
+        1,
+        "should have text input inside discuss thread composer"
+    );
+    assert.ok(
+        document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'),
+        "composer text input of composer should be a ComposerTextIput component"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ComposerTextInput_textarea`).length,
+        1,
+        "should have editable part inside composer text input"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).placeholder,
+        "Write something...",
+        "should have 'Write something...' as placeholder in composer text input if composer is for a 'mail.channel'"
+    );
+});
+
+QUnit.test('mailing channel composer: basic rendering', async function (assert) {
+    assert.expect(2);
+
+    // channel that is expected to be rendered, with proper mass_mailing
+    // value and a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerTextInput',
+        "Composer should have a text input"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_subjectInput',
+        "Composer should have a subject input"
+    );
+});
+
+QUnit.test('add an emoji', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonEmojis').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "😊",
+        "emoji should be inserted in the composer text input"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+});
+
+QUnit.test('add an emoji after some text', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Blabla");
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "Blabla",
+        "composer text input should have text only initially"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Composer_buttonEmojis').click());
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "Blabla😊",
+        "emoji should be inserted after the text"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+});
+
+QUnit.test('add emoji replaces (keyboard) text selection', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const composerTextInputTextArea = document.querySelector(`.o_ComposerTextInput_textarea`);
+    await afterNextRender(() => {
+        composerTextInputTextArea.focus();
+        document.execCommand('insertText', false, "Blabla");
+    });
+    assert.strictEqual(
+        composerTextInputTextArea.value,
+        "Blabla",
+        "composer text input should have text only initially"
+    );
+
+    // simulate selection of all the content by keyboard
+    composerTextInputTextArea.setSelectionRange(0, composerTextInputTextArea.value.length);
+
+    // select emoji
+    await afterNextRender(() => document.querySelector('.o_Composer_buttonEmojis').click());
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "😊",
+        "whole text selection should have been replaced by emoji"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+    await nextAnimationFrame();
+});
+
+QUnit.test('display canned response suggestions on typing ":"', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.shortcode'].records.push({
+        id: 11,
+        source: "hello",
+        substitution: "Hello! How are you?",
+    });
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "Canned responses suggestions list should not be present"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, ":");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestionList_list'),
+        'show',
+        "should display canned response suggestions on typing ':'"
+    );
+});
+
+QUnit.test('use a canned response', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.shortcode'].records.push({
+        id: 11,
+        source: "hello",
+        substitution: "Hello! How are you?",
+    });
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "canned response suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, ":");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a canned response suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "Hello! How are you? ",
+        "text content of composer should have canned response + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('use a canned response some text', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.shortcode'].records.push({
+        id: 11,
+        source: "hello",
+        substitution: "Hello! How are you?",
+    });
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "canned response suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "bluhbluh ")
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "bluhbluh ",
+        "text content of composer should have content"
+    );
+    await afterNextRender(() => {
+        document.execCommand('insertText', false, ":");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a canned response suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "bluhbluh Hello! How are you? ",
+        "text content of composer should have previous content + canned response substitution + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('add an emoji after a canned response', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.shortcode'].records.push({
+        id: 11,
+        source: "hello",
+        substitution: "Hello! How are you?",
+    });
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "canned response suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, ":");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a canned response suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "Hello! How are you? ",
+        "text content of composer should have previous content + canned response substitution + additional whitespace afterwards"
+    );
+
+    // select emoji
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonEmojis').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "Hello! How are you? 😊",
+        "text content of composer should have previous canned response substitution and selected emoji just after"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+});
+
+QUnit.test('display channel mention suggestions on typing "#"', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General",
+        public: "groups",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "channel mention suggestions list should not be present"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestionList_list'),
+        'show',
+        "should display channel mention suggestions on typing '#'"
+    );
+});
+
+QUnit.test('mention a channel', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General",
+        public: "groups",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "channel mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a channel mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "#General ",
+        "text content of composer should have mentioned channel + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('mention a channel after some text', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General",
+        public: "groups",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "channel mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "bluhbluh ")
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "bluhbluh ",
+        "text content of composer should have content"
+    );
+    await afterNextRender(() => {
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a channel mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "bluhbluh #General ",
+        "text content of composer should have previous content + mentioned channel + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('add an emoji after a channel mention', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General",
+        public: "groups",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a channel mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "#General ",
+        "text content of composer should have previous content + mentioned channel + additional whitespace afterwards"
+    );
+
+    // select emoji
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonEmojis').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "#General 😊",
+        "text content of composer should have previous channel mention and selected emoji just after"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+});
+
+QUnit.test('display command suggestions on typing "/"', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 });
+    this.data['mail.channel_command'].records.push(
+        {
+            channel_types: ['channel'],
+            help: "List users in the current channel",
+            name: "who",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "command suggestions list should not be present"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestionList_list'),
+        'show',
+        "should display command suggestions on typing '/'"
+    );
+});
+
+QUnit.test('do not send typing notification on typing "/" command', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.channel_command'].records.push({
+        channel_types: ['channel'],
+        help: "List users in the current channel",
+        name: "who",
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.verifySteps([], "No rpc done");
+});
+
+QUnit.test('do not send typing notification on typing after selecting suggestion from "/" command', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.channel_command'].records.push({
+        channel_types: ['channel'],
+        help: "List users in the current channel",
+        name: "who",
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, " is user?");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.verifySteps([], "No rpc done");
+});
+
+QUnit.test('use a command for a specific channel type', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 });
+    this.data['mail.channel_command'].records.push(
+        {
+            channel_types: ['channel'],
+            help: "List users in the current channel",
+            name: "who",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "command suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a command suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "/who ",
+        "text content of composer should have used command + additional whitespace afterwards"
+    );
+});
+
+QUnit.test("channel with no commands should not prompt any command suggestions on typing /", async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ channel_type: 'chat', id: 20 });
+    this.data['mail.channel_command'].records.push(
+        {
+            channel_types: ['channel'],
+            help: "bla bla bla",
+            name: "who",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    await afterNextRender(() => {
+        document.querySelector('.o_ComposerTextInput_textarea').focus();
+        document.execCommand('insertText', false, "/");
+        const composer_text_input = document.querySelector('.o_ComposerTextInput_textarea');
+        composer_text_input.dispatchEvent(new window.KeyboardEvent('keydown'));
+        composer_text_input.dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should not prompt (command) suggestion after typing / (reason: no channel commands in chat channels)"
+    );
+});
+
+QUnit.test('command suggestion should only open if command is the first character', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 });
+    this.data['mail.channel_command'].records.push(
+        {
+            channel_types: ['channel'],
+            help: "List users in the current channel",
+            name: "who",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "command suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "bluhbluh ")
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "bluhbluh ",
+        "text content of composer should have content"
+    );
+    await afterNextRender(() => {
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should not have a command suggestion"
+    );
+});
+
+QUnit.test('add an emoji after a command', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 });
+    this.data['mail.channel_command'].records.push(
+        {
+            channel_types: ['channel'],
+            help: "List users in the current channel",
+            name: "who",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "command suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "/");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a command suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "/who ",
+        "text content of composer should have previous content + used command + additional whitespace afterwards"
+    );
+
+    // select emoji
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonEmojis').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "/who 😊",
+        "text content of composer should have previous command and selected emoji just after"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+});
+
+QUnit.test('display partner mention suggestions on typing "@"', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({
+        id: 11,
+        email: "testpartner@odoo.com",
+        name: "TestPartner",
+    });
+    this.data['res.partner'].records.push({
+        id: 12,
+        email: "testpartner2@odoo.com",
+        name: "TestPartner2",
+    });
+    this.data['res.users'].records.push({
+        partner_id: 11,
+    });
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "mention suggestions list should not be present"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestionList_list'),
+        'show',
+        "should display mention suggestions on typing '@'"
+    );
+    assert.containsOnce(
+        document.body,
+        '.dropdown-divider',
+        "should have a separator"
+    );
+});
+
+QUnit.test('mention a partner', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({
+        email: "testpartner@odoo.com",
+        name: "TestPartner",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestionList_list',
+        "mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "T");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "e");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "@TestPartner ",
+        "text content of composer should have mentioned partner + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('mention a partner after some text', async function (assert) {
+    assert.expect(5);
+
+    this.data['res.partner'].records.push({
+        email: "testpartner@odoo.com",
+        name: "TestPartner",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "bluhbluh ")
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "bluhbluh ",
+        "text content of composer should have content"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "T");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "e");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "bluhbluh @TestPartner ",
+        "text content of composer should have previous content + mentioned partner + additional whitespace afterwards"
+    );
+});
+
+QUnit.test('add an emoji after a partner mention', async function (assert) {
+    assert.expect(5);
+
+    this.data['res.partner'].records.push({
+        email: "testpartner@odoo.com",
+        name: "TestPartner",
+    });
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "mention suggestions list should not be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "text content of composer should be empty initially"
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "T");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "e");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "should have a mention suggestion"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "@TestPartner ",
+        "text content of composer should have previous content + mentioned partner + additional whitespace afterwards"
+    );
+
+    // select emoji
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonEmojis').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "),
+        "@TestPartner 😊",
+        "text content of composer should have previous mention and selected emoji just after"
+    );
+    // ensure popover is closed
+    await nextAnimationFrame();
+});
+
+QUnit.test('composer: add an attachment', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer, { attachmentsDetailsMode: 'card' });
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.ok(
+        document.querySelector('.o_Composer_attachmentList'),
+        "should have an attachment list"
+    );
+    assert.ok(
+        document.querySelector(`.o_Composer .o_Attachment`),
+        "should have an attachment"
+    );
+});
+
+QUnit.test('composer: drop attachments', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const files = [
+        await createFile({
+            content: 'hello, world',
+            contentType: 'text/plain',
+            name: 'text.txt',
+        }),
+        await createFile({
+            content: 'hello, worlduh',
+            contentType: 'text/plain',
+            name: 'text2.txt',
+        }),
+    ];
+    await afterNextRender(() => dragenterFiles(document.querySelector('.o_Composer')));
+    assert.ok(
+        document.querySelector('.o_Composer_dropZone'),
+        "should have a drop zone"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        0,
+        "should have no attachment before files are dropped"
+    );
+
+    await afterNextRender(() =>
+        dropFiles(
+            document.querySelector('.o_Composer_dropZone'),
+            files
+        )
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        2,
+        "should have 2 attachments in the composer after files dropped"
+    );
+
+    await afterNextRender(() => dragenterFiles(document.querySelector('.o_Composer')));
+    await afterNextRender(async () =>
+        dropFiles(
+            document.querySelector('.o_Composer_dropZone'),
+            [
+                await createFile({
+                    content: 'hello, world',
+                    contentType: 'text/plain',
+                    name: 'text3.txt',
+                })
+            ]
+        )
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        3,
+        "should have 3 attachments in the box after files dropped"
+    );
+});
+
+QUnit.test('composer: paste attachments', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const files = [
+        await createFile({
+            content: 'hello, world',
+            contentType: 'text/plain',
+            name: 'text.txt',
+        })
+    ];
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        0,
+        "should not have any attachment in the composer before paste"
+    );
+
+    await afterNextRender(() =>
+        pasteFiles(document.querySelector('.o_ComposerTextInput'), files)
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        1,
+        "should have 1 attachment in the composer after paste"
+    );
+});
+
+QUnit.test('send message when enter is pressed while holding ctrl key (this shortcut is available)', async function (assert) {
+    // Note that test doesn't assert ENTER makes no newline, because this
+    // default browser cannot be simulated with just dispatching
+    // programmatically crafted events...
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, {
+        textInputSendShortcuts: ['ctrl-enter'],
+    });
+    // Type message
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "test message");
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable"
+    );
+
+    await afterNextRender(() => {
+        const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' });
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(enterEvent);
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable as message has not been posted"
+    );
+
+    // Send message with ctrl+enter
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown', { ctrlKey: true, key: 'Enter' }))
+    );
+    assert.verifySteps(['message_post']);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have no content in composer input as message has been posted"
+    );
+});
+
+QUnit.test('send message when enter is pressed while holding meta key (this shortcut is available)', async function (assert) {
+    // Note that test doesn't assert ENTER makes no newline, because this
+    // default browser cannot be simulated with just dispatching
+    // programmatically crafted events...
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, {
+        textInputSendShortcuts: ['meta-enter'],
+    });
+    // Type message
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "test message");
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable"
+    );
+
+    await afterNextRender(() => {
+        const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' });
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(enterEvent);
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable as message has not been posted"
+    );
+
+    // Send message with meta+enter
+    await afterNextRender(() =>
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', metaKey: true }))
+    );
+    assert.verifySteps(['message_post']);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have no content in composer input as message has been posted"
+    );
+});
+
+QUnit.test('composer text input cleared on message post', async function (assert) {
+    assert.expect(4);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    // Type message
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "test message");
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable"
+    );
+
+    // Send message
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have no content in composer input after posting message"
+    );
+});
+
+QUnit.test('composer inputs cleared on message post in composer of a mailing channel', async function (assert) {
+    assert.expect(10);
+
+    // channel that is expected to be rendered, with proper mass_mailing
+    // value and a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+                assert.ok(
+                    'body' in args.kwargs,
+                    "body should be posted with the message"
+                );
+                assert.strictEqual(
+                    args.kwargs.body,
+                    "test message",
+                    "posted body should be the one typed in text input"
+                );
+                assert.ok(
+                    'subject' in args.kwargs,
+                    "subject should be posted with the message"
+                );
+                assert.strictEqual(
+                    args.kwargs.subject,
+                    "test subject",
+                    "posted subject should be the one typed in subject input"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    // Type message
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "test message");
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "test message",
+        "should have inserted text content in editable"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_Composer_subjectInput`).focus();
+        document.execCommand('insertText', false, "test subject");
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_Composer_subjectInput`).value,
+        "test subject",
+        "should have inserted text content in input"
+    );
+
+    // Send message
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have no content in composer input after posting message"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Composer_subjectInput`).value,
+        "",
+        "should have no content in composer subject input after posting message"
+    );
+});
+
+QUnit.test('composer with thread typing notification status', async function (assert) {
+    assert.expect(2);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_threadTextualTypingStatus',
+        "Composer should have a thread textual typing status bar"
+    );
+    assert.strictEqual(
+        document.body.querySelector('.o_Composer_threadTextualTypingStatus').textContent,
+        "",
+        "By default, thread textual typing status bar should be empty"
+    );
+});
+
+QUnit.test('current partner notify is typing to other thread members', async function (assert) {
+    assert.expect(2);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "a");
+    document.querySelector(`.o_ComposerTextInput_textarea`)
+        .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' }));
+
+    assert.verifySteps(
+        ['notify_typing:true'],
+        "should have notified current partner typing status"
+    );
+});
+
+QUnit.test('current partner is typing should not translate on textual typing status', async function (assert) {
+    assert.expect(3);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        hasTimeControl: true,
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "a");
+    document.querySelector(`.o_ComposerTextInput_textarea`)
+        .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' }));
+
+    assert.verifySteps(
+        ['notify_typing:true'],
+        "should have notified current partner typing status"
+    );
+
+    await nextAnimationFrame();
+    assert.strictEqual(
+        document.body.querySelector('.o_Composer_threadTextualTypingStatus').textContent,
+        "",
+        "Thread textual typing status bar should not display current partner is typing"
+    );
+});
+
+QUnit.test('current partner notify no longer is typing to thread members after 5 seconds inactivity', async function (assert) {
+    assert.expect(4);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        hasTimeControl: true,
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "a");
+    document.querySelector(`.o_ComposerTextInput_textarea`)
+        .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' }));
+
+    assert.verifySteps(
+        ['notify_typing:true'],
+        "should have notified current partner is typing"
+    );
+
+    await this.env.testUtils.advanceTime(5 * 1000);
+    assert.verifySteps(
+        ['notify_typing:false'],
+        "should have notified current partner no longer is typing (inactive for 5 seconds)"
+    );
+});
+
+QUnit.test('current partner notify is typing again to other members every 50s of long continuous typing', async function (assert) {
+    assert.expect(4);
+
+    // channel that is expected to be rendered
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        hasTimeControl: true,
+        async mockRPC(route, args) {
+            if (args.method === 'notify_typing') {
+                assert.step(`notify_typing:${args.kwargs.is_typing}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, { hasThreadTyping: true });
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+    document.execCommand('insertText', false, "a");
+    document.querySelector(`.o_ComposerTextInput_textarea`)
+        .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' }));
+    assert.verifySteps(
+        ['notify_typing:true'],
+        "should have notified current partner is typing"
+    );
+
+    // simulate current partner typing a character every 2.5 seconds for 50 seconds straight.
+    let totalTimeElapsed = 0;
+    const elapseTickTime = 2.5 * 1000;
+    while (totalTimeElapsed < 50 * 1000) {
+        document.execCommand('insertText', false, "a");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' }));
+        totalTimeElapsed += elapseTickTime;
+        await this.env.testUtils.advanceTime(elapseTickTime);
+    }
+
+    assert.verifySteps(
+        ['notify_typing:true'],
+        "should have notified current partner is still typing after 50s of straight typing"
+    );
+});
+
+QUnit.test('composer: send button is disabled if attachment upload is not finished', async function (assert) {
+    assert.expect(8);
+
+    const attachmentUploadedPromise = makeTestPromise();
+    await this.start({
+        async mockFetch(resource, init) {
+            const res = this._super(...arguments);
+            if (resource === '/web/binary/upload_attachment') {
+                await attachmentUploadedPromise;
+            }
+            return res;
+        }
+    });
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have an attachment after a file has been input"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment.o-temporary',
+        "attachment displayed is being uploaded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_buttonSend',
+        "composer send button should be displayed"
+    );
+    assert.ok(
+        !!document.querySelector('.o_Composer_buttonSend').attributes.disabled,
+        "composer send button should be disabled as attachment is not yet uploaded"
+    );
+
+    // simulates attachment finishes uploading
+    await afterNextRender(() => attachmentUploadedPromise.resolve());
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have only one attachment"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Attachment.o-temporary',
+        "attachment displayed should be uploaded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_buttonSend',
+        "composer send button should still be present"
+    );
+    assert.ok(
+        !document.querySelector('.o_Composer_buttonSend').attributes.disabled,
+        "composer send button should be enabled as attachment is now uploaded"
+    );
+});
+
+QUnit.test('warning on send with shortcut when attempting to post message with still-uploading attachments', async function (assert) {
+    assert.expect(7);
+
+    await this.start({
+        async mockFetch(resource, init) {
+            const res = this._super(...arguments);
+            if (resource === '/web/binary/upload_attachment') {
+                // simulates attachment is never finished uploading
+                await new Promise(() => {});
+            }
+            return res;
+        },
+        services: {
+            notification: {
+                notify(params) {
+                    assert.strictEqual(
+                        params.message,
+                        "Please wait while the file is uploading.",
+                        "notification content should be about the uploading file"
+                    );
+                    assert.strictEqual(
+                        params.type,
+                        'warning',
+                        "notification should be a warning"
+                    );
+                    assert.step('notification');
+                }
+            }
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        composer: [['create', { isLog: false }]],
+        id: 20,
+        model: 'res.partner',
+    });
+    await this.createComposerComponent(thread.composer, {
+        textInputSendShortcuts: ['enter'],
+    });
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have only one attachment"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment.o-temporary',
+        "attachment displayed is being uploaded"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_buttonSend',
+        "composer send button should be displayed"
+    );
+
+    // Try to send message
+    document
+        .querySelector(`.o_ComposerTextInput_textarea`)
+        .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+    assert.verifySteps(
+        ['notification'],
+        "should have triggered a notification for inability to post message at the moment (some attachments are still being uploaded)"
+    );
+});
+
+QUnit.test('remove an attachment from composer does not need any confirmation', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_attachmentList',
+        "should have an attachment list"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer .o_Attachment',
+        "should have only one attachment"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Attachment_asideItemUnlink').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Composer .o_Attachment',
+        "should not have any attachment left after unlinking the only one"
+    );
+});
+
+QUnit.test('remove an uploading attachment', async function (assert) {
+    assert.expect(4);
+
+    await this.start({
+        async mockFetch(resource, init) {
+            const res = this._super(...arguments);
+            if (resource === '/web/binary/upload_attachment') {
+                // simulates uploading indefinitely
+                await new Promise(() => {});
+            }
+            return res;
+        }
+    });
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_attachmentList',
+        "should have an attachment list"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer .o_Attachment',
+        "should have only one attachment"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer .o_Attachment.o-temporary',
+        "should have an uploading attachment"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Attachment_asideItemUnlink').click());
+    assert.containsNone(
+        document.body,
+        '.o_Composer .o_Attachment',
+        "should not have any attachment left after unlinking temporary one"
+    );
+});
+
+QUnit.test('remove an uploading attachment aborts upload', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        async mockFetch(resource, init) {
+            const res = this._super(...arguments);
+            if (resource === '/web/binary/upload_attachment') {
+                // simulates uploading indefinitely
+                await new Promise(() => {});
+            }
+            return res;
+        }
+    });
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const file = await createFile({
+        content: 'hello, world',
+        contentType: 'text/plain',
+        name: 'text.txt',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        )
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should contain an attachment"
+    );
+    const attachmentLocalId = document.querySelector('.o_Attachment').dataset.attachmentLocalId;
+
+    await this.afterEvent({
+        eventName: 'o-attachment-upload-abort',
+        func: () => {
+            document.querySelector('.o_Attachment_asideItemUnlink').click();
+        },
+        message: "attachment upload request should have been aborted",
+        predicate: ({ attachment }) => {
+            return attachment.localId === attachmentLocalId;
+        },
+    });
+});
+
+QUnit.test("basic rendering when sending a message to the followers and thread doesn't have a name", async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        composer: [['create', { isLog: false }]],
+        id: 20,
+        model: 'res.partner',
+    });
+    await this.createComposerComponent(thread.composer, { hasFollowers: true });
+    assert.strictEqual(
+        document.querySelector('.o_Composer_followers').textContent.replace(/\s+/g, ''),
+        "To:Followersofthisdocument",
+        "Composer should display \"To: Followers of this document\" if the thread as no name."
+    );
+});
+
+QUnit.test('send message only once when button send is clicked twice quickly', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer);
+    // Type message
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "test message");
+    });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_Composer_buttonSend`).click();
+        document.querySelector(`.o_Composer_buttonSend`).click();
+    });
+    assert.verifySteps(
+        ['message_post'],
+        "The message has been posted only once"
+    );
+});
+
+QUnit.test('send message only once when enter is pressed twice quickly', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createComposerComponent(thread.composer, {
+        textInputSendShortcuts: ['enter'],
+    });
+    // Type message
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "test message");
+    });
+    await afterNextRender(() => {
+        const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' });
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(enterEvent);
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(enterEvent);
+    });
+    assert.verifySteps(
+        ['message_post'],
+        "The message has been posted only once"
+    );
+});
+
+QUnit.test('[technical] does not crash when an attachment is removed before its upload starts', async function (assert) {
+    // Uploading multiple files uploads attachments one at a time, this test
+    // ensures that there is no crash when an attachment is destroyed before its
+    // upload started.
+    assert.expect(1);
+
+    // Promise to block attachment uploading
+    const uploadPromise = makeTestPromise();
+    await this.start({
+        async mockFetch(resource) {
+            const _super = this._super.bind(this, ...arguments);
+            if (resource === '/web/binary/upload_attachment') {
+                await uploadPromise;
+            }
+            return _super();
+        },
+    });
+    const composer = this.env.models['mail.composer'].create();
+    await this.createComposerComponent(composer);
+    const file1 = await createFile({
+        name: 'text1.txt',
+        content: 'hello, world',
+        contentType: 'text/plain',
+    });
+    const file2 = await createFile({
+        name: 'text2.txt',
+        content: 'hello, world',
+        contentType: 'text/plain',
+    });
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file1, file2]
+        )
+    );
+    await afterNextRender(() => {
+            Array.from(document.querySelectorAll('div'))
+            .find(el => el.textContent === 'text2.txt')
+            .closest('.o_Attachment')
+            .querySelector('.o_Attachment_asideItemUnlink')
+            .click();
+        }
+    );
+    // Simulates the completion of the upload of the first attachment
+    uploadPromise.resolve();
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment:contains("text1.txt")',
+        "should only have the first attachment after cancelling the second attachment"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js
new file mode 100644
index 00000000..efedf662
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js
@@ -0,0 +1,158 @@
+odoo.define('mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { FormViewDialog } = require('web.view_dialogs');
+const { ComponentAdapter } = require('web.OwlCompatibility');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class FormViewDialogComponentAdapter extends ComponentAdapter {
+
+    renderWidget() {
+        // Ensure the dialog is properly reconstructed. Without this line, it is
+        // impossible to open the dialog again after having it closed a first
+        // time, because the DOM of the dialog has disappeared.
+        return this.willStart();
+    }
+
+}
+
+const components = {
+    FormViewDialogComponentAdapter,
+};
+
+class ComposerSuggestedRecipient extends Component {
+
+    constructor(...args) {
+        super(...args);
+        this.id = _.uniqueId('o_ComposerSuggestedRecipient_');
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const suggestedRecipientInfo = this.env.models['mail.suggested_recipient_info'].get(props.suggestedRecipientLocalId);
+            const partner = suggestedRecipientInfo && suggestedRecipientInfo.partner;
+            return {
+                partner: partner && partner.__state,
+                suggestedRecipientInfo: suggestedRecipientInfo && suggestedRecipientInfo.__state,
+            };
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * Form view dialog class. Useful to reference it in the template.
+         */
+        this.FormViewDialog = FormViewDialog;
+        /**
+         * Reference of the checkbox. Useful to know whether it was checked or
+         * not, to properly update the corresponding state in the record or to
+         * prompt the user with the partner creation dialog.
+         */
+        this._checkboxRef = useRef('checkbox');
+        /**
+         * Reference of the partner creation dialog. Useful to open it, for
+         * compatibility with old code.
+         */
+        this._dialogRef = useRef('dialog');
+        /**
+         * Whether the dialog is currently open. `_dialogRef` cannot be trusted
+         * to know if the dialog is open due to manually calling `open` and
+         * potential out of sync with component adapter.
+         */
+        this._isDialogOpen = false;
+        this._onDialogSaved = this._onDialogSaved.bind(this);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string|undefined}
+     */
+    get ADD_AS_RECIPIENT_AND_FOLLOWER_REASON() {
+        if (!this.suggestedRecipientInfo) {
+            return undefined;
+        }
+        return this.env._t(_.str.sprintf(
+            "Add as recipient and follower (reason: %s)",
+            this.suggestedRecipientInfo.reason
+        ));
+    }
+
+    /**
+     * @returns {string}
+     */
+    get PLEASE_COMPLETE_CUSTOMER_S_INFORMATION() {
+        return this.env._t("Please complete customer's information");
+    }
+
+    /**
+     * @returns {mail.suggested_recipient_info}
+     */
+    get suggestedRecipientInfo() {
+        return this.env.models['mail.suggested_recipient_info'].get(this.props.suggestedRecipientInfoLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        if (this._checkboxRef.el && this.suggestedRecipientInfo) {
+            this._checkboxRef.el.checked = this.suggestedRecipientInfo.isSelected;
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handler
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onChangeCheckbox() {
+        const isChecked = this._checkboxRef.el.checked;
+        this.suggestedRecipientInfo.update({ isSelected: isChecked });
+        if (!this.suggestedRecipientInfo.partner) {
+            // Recipients must always be partners. On selecting a suggested
+            // recipient that does not have a partner, the partner creation form
+            // should be opened.
+            if (isChecked && this._dialogRef && !this._isDialogOpen) {
+                this._isDialogOpen = true;
+                this._dialogRef.comp.widget.on('closed', this, () => {
+                    this._isDialogOpen = false;
+                });
+                this._dialogRef.comp.widget.open();
+            }
+        }
+    }
+
+    /**
+     * @private
+     */
+    _onDialogSaved() {
+        const thread = this.suggestedRecipientInfo && this.suggestedRecipientInfo.thread;
+        if (!thread) {
+            return;
+        }
+        thread.fetchAndUpdateSuggestedRecipients();
+    }
+}
+
+Object.assign(ComposerSuggestedRecipient, {
+    components,
+    props: {
+        suggestedRecipientInfoLocalId: String,
+    },
+    template: 'mail.ComposerSuggestedRecipient',
+});
+
+return ComposerSuggestedRecipient;
+
+});
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
new file mode 100644
index 00000000..c8b6b5ad
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss
@@ -0,0 +1,5 @@
+// Dirty fix: clear modal-body padding, otherwise it create space inside the
+// suggested_recipient list.
+.o_ComposerSuggestedRecipient .modal-body {
+    padding: 0;
+}
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
new file mode 100644
index 00000000..4e754359
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ComposerSuggestedRecipient" owl="1">
+        <div class="o_ComposerSuggestedRecipient" t-att-data-partner-id="suggestedRecipientInfo.partner and suggestedRecipientInfo.partner.id ? suggestedRecipientInfo.partner.id : false" t-att-title="ADD_AS_RECIPIENT_AND_FOLLOWER_REASON">
+            <t t-if="suggestedRecipientInfo">
+                <div class="custom-control custom-checkbox">
+                    <input t-attf-id="{{ id }}_checkbox" class="custom-control-input" type="checkbox" t-att-checked="suggestedRecipientInfo.isSelected ? 'checked' : undefined" t-on-change="_onChangeCheckbox" t-ref="checkbox" />
+                    <label class="custom-control-label" t-attf-for="{{ id }}_checkbox">
+                        <t t-if="suggestedRecipientInfo.name">
+                            <t t-esc="suggestedRecipientInfo.name"/>
+                        </t>
+                        <t t-if="suggestedRecipientInfo.email">
+                            (<t t-esc="suggestedRecipientInfo.email"/>)
+                        </t>
+                    </label>
+                </div>
+                <t t-if="!suggestedRecipientInfo.partner">
+                    <FormViewDialogComponentAdapter
+                        Component="FormViewDialog"
+                        params="{
+                            context: {
+                                active_id: suggestedRecipientInfo.thread.id,
+                                active_model: 'mail.compose.message',
+                                default_email: suggestedRecipientInfo.email,
+                                default_name: suggestedRecipientInfo.name,
+                                force_email: true,
+                                ref: 'compound_context',
+                            },
+                            disable_multiple_selection: true,
+                            on_saved: _onDialogSaved,
+                            res_id: false,
+                            res_model: 'res.partner',
+                            title: PLEASE_COMPLETE_CUSTOMER_S_INFORMATION,
+                        }"
+                        t-ref="dialog"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js
new file mode 100644
index 00000000..61da098c
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js
@@ -0,0 +1,77 @@
+odoo.define('mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useState } = owl.hooks;
+
+const components = {
+    ComposerSuggestedRecipient: require('mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js'),
+};
+
+class ComposerSuggestedRecipientList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.state = useState({
+            hasShowMoreButton: false,
+        });
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            return {
+                threadSuggestedRecipientInfoList: thread ? thread.suggestedRecipientInfoList : [],
+            };
+        }, {
+            compareDepth: {
+                threadSuggestedRecipientInfoList: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickShowLess(ev) {
+        this.state.hasShowMoreButton = false;
+    }
+
+    /**
+     * @private
+     */
+    _onClickShowMore(ev) {
+        this.state.hasShowMoreButton = true;
+    }
+
+}
+
+Object.assign(ComposerSuggestedRecipientList, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.ComposerSuggestedRecipientList',
+});
+
+return ComposerSuggestedRecipientList;
+});
diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss
new file mode 100644
index 00000000..4e1b4dd7
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss
@@ -0,0 +1,3 @@
+.o_ComposerSuggestedRecipientList {
+    margin-bottom: map-get($spacers, 2);
+}
diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
new file mode 100644
index 00000000..c78570db
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ComposerSuggestedRecipientList" owl="1">
+        <div class="o_ComposerSuggestedRecipientList">
+            <t t-if="thread">
+                <t t-foreach="state.hasShowMoreButton ? thread.suggestedRecipientInfoList : thread.suggestedRecipientInfoList.slice(0,3)" t-as="recipientInfo" t-key="recipientInfo.localId">
+                    <ComposerSuggestedRecipient
+                        suggestedRecipientInfoLocalId="recipientInfo.localId"
+                    />
+                </t>
+                <t t-if="thread.suggestedRecipientInfoList.length > 3">
+                    <t t-if="!state.hasShowMoreButton" >
+                        <button class="o_ComposerSuggestedRecipientList_showMore btn btn-sm btn-link" t-on-click="_onClickShowMore">
+                            Show more
+                        </button>
+                    </t>
+                    <t t-else="">
+                        <button class="o_ComposerSuggestedRecipientList_showLess btn btn-sm btn-link" t-on-click="_onClickShowLess">
+                            Show less
+                        </button>
+                    </t>
+                </t>
+            </t>
+        </div>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
new file mode 100644
index 00000000..da54ab54
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
@@ -0,0 +1,143 @@
+odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const components = {
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+
+const { Component } = owl;
+
+class ComposerSuggestion extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const composer = this.env.models['mail.composer'].get(this.props.composerLocalId);
+            const record = this.env.models[props.modelName].get(props.recordLocalId);
+            return {
+                composerHasToScrollToActiveSuggestion: composer && composer.hasToScrollToActiveSuggestion,
+                record: record ? record.__state : undefined,
+            };
+        });
+        useUpdate({ func: () => this._update() });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.composer}
+     */
+    get composer() {
+        return this.env.models['mail.composer'].get(this.props.composerLocalId);
+    }
+
+    get isCannedResponse() {
+        return this.props.modelName === "mail.canned_response";
+    }
+
+    get isChannel() {
+        return this.props.modelName === "mail.thread";
+    }
+
+    get isCommand() {
+        return this.props.modelName === "mail.channel_command";
+    }
+
+    get isPartner() {
+        return this.props.modelName === "mail.partner";
+    }
+
+    get record() {
+        return this.env.models[this.props.modelName].get(this.props.recordLocalId);
+    }
+
+    /**
+     * Returns a descriptive title for this suggestion. Useful to be able to
+     * read both parts when they are overflowing the UI.
+     *
+     * @returns {string}
+     */
+    title() {
+        if (this.isCannedResponse) {
+            return _.str.sprintf("%s: %s", this.record.source, this.record.substitution);
+        }
+        if (this.isChannel) {
+            return this.record.name;
+        }
+        if (this.isCommand) {
+            return _.str.sprintf("%s: %s", this.record.name, this.record.help);
+        }
+        if (this.isPartner) {
+            if (this.record.email) {
+                return _.str.sprintf("%s (%s)", this.record.nameOrDisplayName, this.record.email);
+            }
+            return this.record.nameOrDisplayName;
+        }
+        return "";
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        if (
+            this.composer &&
+            this.composer.hasToScrollToActiveSuggestion &&
+            this.props.isActive
+        ) {
+            this.el.scrollIntoView({
+                block: 'center',
+            });
+            this.composer.update({ hasToScrollToActiveSuggestion: false });
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onClick(ev) {
+        ev.preventDefault();
+        this.composer.update({ activeSuggestedRecord: [['link', this.record]] });
+        this.composer.insertSuggestion();
+        this.composer.closeSuggestions();
+        this.trigger('o-composer-suggestion-clicked');
+    }
+
+}
+
+Object.assign(ComposerSuggestion, {
+    components,
+    defaultProps: {
+        isActive: false,
+    },
+    props: {
+        composerLocalId: String,
+        isActive: Boolean,
+        modelName: String,
+        recordLocalId: String,
+    },
+    template: 'mail.ComposerSuggestion',
+});
+
+return ComposerSuggestion;
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
new file mode 100644
index 00000000..4083c149
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss
@@ -0,0 +1,43 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ComposerSuggestion {
+    display: flex;
+    width: map-get($sizes, 100);
+    padding: map-get($spacers, 2) map-get($spacers, 4);
+}
+
+.o_ComposerSuggestion_part1 {
+    // avoid shrinking part 1 because it is more important than part 2
+    // because no shrink, ensure it cannot overflow with a max-width
+    flex: 0 0 auto;
+    max-width: 100%;
+    overflow: hidden;
+    padding-inline-end: map-get($spacers, 2);
+    text-overflow: ellipsis;
+}
+
+.o_ComposerSuggestion_part2 {
+    // shrink part 2 to properly ensure it cannot overflow
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o_ComposerSuggestion_partnerImStatusIcon {
+    flex: 0 0 auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ComposerSuggestion_part1 {
+    font-weight: $font-weight-bold;
+}
+
+.o_ComposerSuggestion_part2 {
+    font-style: italic;
+    color: $gray-600;
+}
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
new file mode 100644
index 00000000..787b5aed
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ComposerSuggestion" owl="1">
+        <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick">
+            <t t-if="record">
+                <t t-if="isCannedResponse">
+                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span>
+                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.substitution"/></span>
+                </t>
+                <t t-if="isChannel">
+                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
+                </t>
+                <t t-if="isCommand">
+                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span>
+                    <span class="o_ComposerSuggestion_part2"><t t-esc="record.help"/></span>
+                </t>
+                <t t-if="isPartner">
+                    <PartnerImStatusIcon
+                        class="o_ComposerSuggestion_partnerImStatusIcon"
+                        hasBackground="false"
+                        partnerLocalId="record.localId"
+                    />
+                    <span class="o_ComposerSuggestion_part1"><t t-esc="record.nameOrDisplayName"/></span>
+                    <t t-if="record.email">
+                        <span class="o_ComposerSuggestion_part2">(<t t-esc="record.email"/>)</span>
+                    </t>
+                </t>
+            </t>
+        </a>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js
new file mode 100644
index 00000000..0e0f8685
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js
@@ -0,0 +1,154 @@
+odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('composer_suggestion', {}, function () {
+QUnit.module('composer_suggestion_canned_response_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createComposerSuggestion = async props => {
+            await createRootComponent(this, components.ComposerSuggestion, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('canned response suggestion displayed', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const cannedResponse = this.env.models['mail.canned_response'].create({
+        id: 7,
+        source: 'hello',
+        substitution: "Hello, how are you?",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.canned_response',
+        recordLocalId: cannedResponse.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        `.o_ComposerSuggestion`,
+        "Canned response suggestion should be present"
+    );
+});
+
+QUnit.test('canned response suggestion correct data', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const cannedResponse = this.env.models['mail.canned_response'].create({
+        id: 7,
+        source: 'hello',
+        substitution: "Hello, how are you?",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.canned_response',
+        recordLocalId: cannedResponse.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Canned response suggestion should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part1',
+        "Canned response source should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part1`).textContent,
+        "hello",
+        "Canned response source should be displayed"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part2',
+        "Canned response substitution should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part2`).textContent,
+        "Hello, how are you?",
+        "Canned response substitution should be displayed"
+    );
+});
+
+QUnit.test('canned response suggestion active', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const cannedResponse = this.env.models['mail.canned_response'].create({
+        id: 7,
+        source: 'hello',
+        substitution: "Hello, how are you?",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.canned_response',
+        recordLocalId: cannedResponse.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Canned response suggestion should be displayed"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestion'),
+        'active',
+        "should be active initially"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js
new file mode 100644
index 00000000..7a211483
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js
@@ -0,0 +1,144 @@
+odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('composer_suggestion', {}, function () {
+QUnit.module('composer_suggestion_channel_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createComposerSuggestion = async props => {
+            await createRootComponent(this, components.ComposerSuggestion, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('channel mention suggestion displayed', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const channel = this.env.models['mail.thread'].create({
+        id: 7,
+        name: "General",
+        model: 'mail.channel',
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.thread',
+        recordLocalId: channel.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        `.o_ComposerSuggestion`,
+        "Channel mention suggestion should be present"
+    );
+});
+
+QUnit.test('channel mention suggestion correct data', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const channel = this.env.models['mail.thread'].create({
+        id: 7,
+        name: "General",
+        model: 'mail.channel',
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.thread',
+        recordLocalId: channel.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Channel mention suggestion should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part1',
+        "Channel name should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part1`).textContent,
+        "General",
+        "Channel name should be displayed"
+    );
+});
+
+QUnit.test('channel mention suggestion active', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const channel = this.env.models['mail.thread'].create({
+        id: 7,
+        name: "General",
+        model: 'mail.channel',
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.thread',
+        recordLocalId: channel.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Channel mention suggestion should be displayed"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestion'),
+        'active',
+        "should be active initially"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js
new file mode 100644
index 00000000..8bbb3d45
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js
@@ -0,0 +1,151 @@
+odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('composer_suggestion', {}, function () {
+QUnit.module('composer_suggestion_command_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createComposerSuggestion = async props => {
+            await createRootComponent(this, components.ComposerSuggestion, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('command suggestion displayed', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const command = this.env.models['mail.channel_command'].create({
+        name: 'whois',
+        help: "Displays who it is",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.channel_command',
+        recordLocalId: command.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        `.o_ComposerSuggestion`,
+        "Command suggestion should be present"
+    );
+});
+
+QUnit.test('command suggestion correct data', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const command = this.env.models['mail.channel_command'].create({
+        name: 'whois',
+        help: "Displays who it is",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.channel_command',
+        recordLocalId: command.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Command suggestion should be present"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part1',
+        "Command name should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part1`).textContent,
+        "whois",
+        "Command name should be displayed"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part2',
+        "Command help should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part2`).textContent,
+        "Displays who it is",
+        "Command help should be displayed"
+    );
+});
+
+QUnit.test('command suggestion active', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const command = this.env.models['mail.channel_command'].create({
+        name: 'whois',
+        help: "Displays who it is",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.channel_command',
+        recordLocalId: command.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Command suggestion should be displayed"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestion'),
+        'active',
+        "should be active initially"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js
new file mode 100644
index 00000000..548fd6d7
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js
@@ -0,0 +1,160 @@
+odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('composer_suggestion', {}, function () {
+QUnit.module('composer_suggestion_partner_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createComposerSuggestion = async props => {
+            await createRootComponent(this, components.ComposerSuggestion, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('partner mention suggestion displayed', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        im_status: 'online',
+        name: "Demo User",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.partner',
+        recordLocalId: partner.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        `.o_ComposerSuggestion`,
+        "Partner mention suggestion should be present"
+    );
+});
+
+QUnit.test('partner mention suggestion correct data', async function (assert) {
+    assert.expect(6);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const partner = this.env.models['mail.partner'].create({
+        email: "demo_user@odoo.com",
+        id: 7,
+        im_status: 'online',
+        name: "Demo User",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.partner',
+        recordLocalId: partner.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Partner mention suggestion should be present"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon`).length,
+        1,
+        "Partner's im_status should be displayed"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part1',
+        "Partner's name should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part1`).textContent,
+        "Demo User",
+        "Partner's name should be displayed"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion_part2',
+        "Partner's email should be present"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerSuggestion_part2`).textContent,
+        "(demo_user@odoo.com)",
+        "Partner's email should be displayed"
+    );
+});
+
+QUnit.test('partner mention suggestion active', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        im_status: 'online',
+        name: "Demo User",
+    });
+    await this.createComposerSuggestion({
+        composerLocalId: thread.composer.localId,
+        isActive: true,
+        modelName: 'mail.partner',
+        recordLocalId: partner.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "Partner mention suggestion should be displayed"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ComposerSuggestion'),
+        'active',
+        "should be active initially"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js
new file mode 100644
index 00000000..23f08399
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js
@@ -0,0 +1,73 @@
+odoo.define('mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js', function (require) {
+'use strict';
+
+const components = {
+    ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ComposerSuggestionList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const composer = this.env.models['mail.composer'].get(props.composerLocalId);
+            const activeSuggestedRecord = composer
+                ? composer.activeSuggestedRecord
+                : undefined;
+            const extraSuggestedRecords = composer
+                ? composer.extraSuggestedRecords
+                : [];
+            const mainSuggestedRecords = composer
+                ? composer.mainSuggestedRecords
+                : [];
+            return {
+                activeSuggestedRecord,
+                composer,
+                composerSuggestionModelName: composer && composer.suggestionModelName,
+                extraSuggestedRecords,
+                mainSuggestedRecords,
+            };
+        }, {
+            compareDepth: {
+                extraSuggestedRecords: 1,
+                mainSuggestedRecords: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.composer}
+     */
+    get composer() {
+        return this.env.models['mail.composer'].get(this.props.composerLocalId);
+    }
+
+}
+
+Object.assign(ComposerSuggestionList, {
+    components,
+    defaultProps: {
+        isBelow: false,
+    },
+    props: {
+        composerLocalId: String,
+        isBelow: Boolean,
+    },
+    template: 'mail.ComposerSuggestionList',
+});
+
+return ComposerSuggestionList;
+
+});
diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
new file mode 100644
index 00000000..fa8d375e
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss
@@ -0,0 +1,27 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ComposerSuggestionList {
+    position: absolute;
+    // prevent suggestion items from overflowing
+    width: 100%;
+
+    &.o-lowPosition {
+        bottom: 0;
+    }
+}
+
+.o_ComposerSuggestionList_drop {
+    // prevent suggestion items from overflowing
+    width: 100%;
+}
+
+.o_ComposerSuggestionList_list {
+    // prevent suggestion items from overflowing
+    width: 100%;
+    // prevent from overflowing chat window, must be smaller than its height
+    // minus the max height taken by composer and attachment list
+    max-height: 150px;
+    overflow: auto;
+}
diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
new file mode 100644
index 00000000..9747109a
--- /dev/null
+++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ComposerSuggestionList" owl="1">
+        <div class="o_ComposerSuggestionList" t-att-class="{ 'o-lowPosition': props.isBelow }">
+            <div class="o_ComposerSuggestionList_drop" t-att-class="{ 'dropdown': props.isBelow, 'dropup': !props.isBelow }">
+                <div class="o_ComposerSuggestionList_list dropdown-menu show">
+                    <t t-foreach="composer.mainSuggestedRecords" t-as="record" t-key="record.localId">
+                        <ComposerSuggestion
+                            composerLocalId="props.composerLocalId"
+                            isActive="record === composer.activeSuggestedRecord"
+                            modelName="composer.suggestionModelName"
+                            recordLocalId="record.localId"
+                        />
+                    </t>
+                    <t t-if="composer.mainSuggestedRecords.length > 0 and composer.extraSuggestedRecords.length > 0">
+                        <div role="separator" class="dropdown-divider"/>
+                    </t>
+                    <t t-foreach="composer.extraSuggestedRecords" t-as="record" t-key="record.localId">
+                        <ComposerSuggestion
+                            composerLocalId="props.composerLocalId"
+                            isActive="record === composer.activeSuggestedRecord"
+                            modelName="composer.suggestionModelName"
+                            recordLocalId="record.localId"
+                        />
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
new file mode 100644
index 00000000..2bdd34da
--- /dev/null
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
@@ -0,0 +1,419 @@
+odoo.define('mail/static/src/components/composer_text_input/composer_text_input.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const components = {
+    ComposerSuggestionList: require('mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js'),
+};
+const { markEventHandled } = require('mail/static/src/utils/utils.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ComposerTextInput extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                sendShortcuts: 1,
+            },
+        });
+        useStore(props => {
+            const composer = this.env.models['mail.composer'].get(props.composerLocalId);
+            const thread = composer && composer.thread;
+            return {
+                composerHasFocus: composer && composer.hasFocus,
+                composerHasSuggestions: composer && composer.hasSuggestions,
+                composerIsLog: composer && composer.isLog,
+                composerTextInputContent: composer && composer.textInputContent,
+                composerTextInputCursorEnd: composer && composer.textInputCursorEnd,
+                composerTextInputCursorStart: composer && composer.textInputCursorStart,
+                composerTextInputSelectionDirection: composer && composer.textInputSelectionDirection,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                threadModel: thread && thread.model,
+            };
+        });
+        /**
+         * Updates the composer text input content when composer is mounted
+         * as textarea content can't be changed from the DOM.
+         */
+        useUpdate({ func: () => this._update() });
+        /**
+         * Last content of textarea from input event. Useful to determine
+         * whether the current partner is typing something.
+         */
+        this._textareaLastInputValue = "";
+        /**
+         * Reference of the textarea. Useful to set height, selection and content.
+         */
+        this._textareaRef = useRef('textarea');
+        /**
+         * This is the invisible textarea used to compute the composer height
+         * based on the text content. We need it to downsize the textarea
+         * properly without flicker.
+         */
+        this._mirroredTextareaRef = useRef('mirroredTextarea');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.composer}
+     */
+    get composer() {
+        return this.env.models['mail.composer'].get(this.props.composerLocalId);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get textareaPlaceholder() {
+        if (!this.composer) {
+            return "";
+        }
+        if (this.composer.thread && this.composer.thread.model !== 'mail.channel') {
+            if (this.composer.isLog) {
+                return this.env._t("Log an internal note...");
+            }
+            return this.env._t("Send a message to followers...");
+        }
+        return this.env._t("Write something...");
+    }
+
+    focus() {
+        this._textareaRef.el.focus();
+    }
+
+    focusout() {
+        this.saveStateInStore();
+        this._textareaRef.el.blur();
+    }
+
+    /**
+     * Saves the composer text input state in store
+     */
+    saveStateInStore() {
+        this.composer.update({
+            textInputContent: this._getContent(),
+            textInputCursorEnd: this._getSelectionEnd(),
+            textInputCursorStart: this._getSelectionStart(),
+            textInputSelectionDirection: this._textareaRef.el.selectionDirection,
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns textarea current content.
+     *
+     * @private
+     * @returns {string}
+     */
+    _getContent() {
+        return this._textareaRef.el.value;
+    }
+
+    /**
+     * Returns selection end position.
+     *
+     * @private
+     * @returns {integer}
+     */
+    _getSelectionEnd() {
+        return this._textareaRef.el.selectionEnd;
+    }
+
+    /**
+     * Returns selection start position.
+     *
+     * @private
+     * @returns {integer}
+     *
+     */
+    _getSelectionStart() {
+        return this._textareaRef.el.selectionStart;
+    }
+
+    /**
+     * Determines whether the textarea is empty or not.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _isEmpty() {
+        return this._getContent() === "";
+    }
+
+    /**
+     * Updates the content and height of a textarea
+     *
+     * @private
+     */
+    _update() {
+        if (!this.composer) {
+            return;
+        }
+        if (this.composer.isLastStateChangeProgrammatic) {
+            this._textareaRef.el.value = this.composer.textInputContent;
+            if (this.composer.hasFocus) {
+                this._textareaRef.el.setSelectionRange(
+                    this.composer.textInputCursorStart,
+                    this.composer.textInputCursorEnd,
+                    this.composer.textInputSelectionDirection,
+                );
+            }
+            this.composer.update({ isLastStateChangeProgrammatic: false });
+        }
+        this._updateHeight();
+    }
+
+    /**
+     * Updates the textarea height.
+     *
+     * @private
+     */
+    _updateHeight() {
+        this._mirroredTextareaRef.el.value = this.composer.textInputContent;
+        this._textareaRef.el.style.height = (this._mirroredTextareaRef.el.scrollHeight) + "px";
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickTextarea() {
+        // clicking might change the cursor position
+        this.saveStateInStore();
+    }
+
+    /**
+     * @private
+     */
+    _onFocusinTextarea() {
+        this.composer.focus();
+        this.trigger('o-focusin-composer');
+    }
+
+    /**
+     * @private
+     */
+    _onFocusoutTextarea() {
+        this.saveStateInStore();
+        this.composer.update({ hasFocus: false });
+    }
+
+    /**
+     * @private
+     */
+    _onInputTextarea() {
+        this.saveStateInStore();
+        if (this._textareaLastInputValue !== this._textareaRef.el.value) {
+            this.composer.handleCurrentPartnerIsTyping();
+        }
+        this._textareaLastInputValue = this._textareaRef.el.value;
+        this._updateHeight();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownTextarea(ev) {
+        switch (ev.key) {
+            case 'Escape':
+                if (this.composer.hasSuggestions) {
+                    ev.preventDefault();
+                    this.composer.closeSuggestions();
+                    markEventHandled(ev, 'ComposerTextInput.closeSuggestions');
+                }
+                break;
+            // UP, DOWN, TAB: prevent moving cursor if navigation in mention suggestions
+            case 'ArrowUp':
+            case 'PageUp':
+            case 'ArrowDown':
+            case 'PageDown':
+            case 'Home':
+            case 'End':
+            case 'Tab':
+                if (this.composer.hasSuggestions) {
+                    // We use preventDefault here to avoid keys native actions but actions are handled in keyUp
+                    ev.preventDefault();
+                }
+                break;
+            // ENTER: submit the message only if the dropdown mention proposition is not displayed
+            case 'Enter':
+                this._onKeydownTextareaEnter(ev);
+                break;
+        }
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownTextareaEnter(ev) {
+        if (this.composer.hasSuggestions) {
+            ev.preventDefault();
+            return;
+        }
+        if (
+            this.props.sendShortcuts.includes('ctrl-enter') &&
+            !ev.altKey &&
+            ev.ctrlKey &&
+            !ev.metaKey &&
+            !ev.shiftKey
+        ) {
+            this.trigger('o-composer-text-input-send-shortcut');
+            ev.preventDefault();
+            return;
+        }
+        if (
+            this.props.sendShortcuts.includes('enter') &&
+            !ev.altKey &&
+            !ev.ctrlKey &&
+            !ev.metaKey &&
+            !ev.shiftKey
+        ) {
+            this.trigger('o-composer-text-input-send-shortcut');
+            ev.preventDefault();
+            return;
+        }
+        if (
+            this.props.sendShortcuts.includes('meta-enter') &&
+            !ev.altKey &&
+            !ev.ctrlKey &&
+            ev.metaKey &&
+            !ev.shiftKey
+        ) {
+            this.trigger('o-composer-text-input-send-shortcut');
+            ev.preventDefault();
+            return;
+        }
+    }
+
+    /**
+     * Key events management is performed in a Keyup to avoid intempestive RPC calls
+     *
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeyupTextarea(ev) {
+        switch (ev.key) {
+            case 'Escape':
+                // already handled in _onKeydownTextarea, break to avoid default
+                break;
+            // ENTER, HOME, END, UP, DOWN, PAGE UP, PAGE DOWN, TAB: check if navigation in mention suggestions
+            case 'Enter':
+                if (this.composer.hasSuggestions) {
+                    this.composer.insertSuggestion();
+                    this.composer.closeSuggestions();
+                    this.focus();
+                }
+                break;
+            case 'ArrowUp':
+            case 'PageUp':
+                if (this.composer.hasSuggestions) {
+                    this.composer.setPreviousSuggestionActive();
+                    this.composer.update({ hasToScrollToActiveSuggestion: true });
+                }
+                break;
+            case 'ArrowDown':
+            case 'PageDown':
+                if (this.composer.hasSuggestions) {
+                    this.composer.setNextSuggestionActive();
+                    this.composer.update({ hasToScrollToActiveSuggestion: true });
+                }
+                break;
+            case 'Home':
+                if (this.composer.hasSuggestions) {
+                    this.composer.setFirstSuggestionActive();
+                    this.composer.update({ hasToScrollToActiveSuggestion: true });
+                }
+                break;
+            case 'End':
+                if (this.composer.hasSuggestions) {
+                    this.composer.setLastSuggestionActive();
+                    this.composer.update({ hasToScrollToActiveSuggestion: true });
+                }
+                break;
+            case 'Tab':
+                if (this.composer.hasSuggestions) {
+                    if (ev.shiftKey) {
+                        this.composer.setPreviousSuggestionActive();
+                        this.composer.update({ hasToScrollToActiveSuggestion: true });
+                    } else {
+                        this.composer.setNextSuggestionActive();
+                        this.composer.update({ hasToScrollToActiveSuggestion: true });
+                    }
+                }
+                break;
+            case 'Alt':
+            case 'AltGraph':
+            case 'CapsLock':
+            case 'Control':
+            case 'Fn':
+            case 'FnLock':
+            case 'Hyper':
+            case 'Meta':
+            case 'NumLock':
+            case 'ScrollLock':
+            case 'Shift':
+            case 'ShiftSuper':
+            case 'Symbol':
+            case 'SymbolLock':
+                // prevent modifier keys from resetting the suggestion state
+                break;
+            // Otherwise, check if a mention is typed
+            default:
+                this.saveStateInStore();
+        }
+    }
+
+}
+
+Object.assign(ComposerTextInput, {
+    components,
+    defaultProps: {
+        hasMentionSuggestionsBelowPosition: false,
+        sendShortcuts: [],
+    },
+    props: {
+        composerLocalId: String,
+        hasMentionSuggestionsBelowPosition: Boolean,
+        isCompact: Boolean,
+        /**
+         * Keyboard shortcuts from text input to send message.
+         */
+        sendShortcuts: {
+            type: Array,
+            element: String,
+            validate: prop => {
+                for (const shortcut of prop) {
+                    if (!['ctrl-enter', 'enter', 'meta-enter'].includes(shortcut)) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+        },
+    },
+    template: 'mail.ComposerTextInput',
+});
+
+return ComposerTextInput;
+
+});
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
new file mode 100644
index 00000000..b9119a71
--- /dev/null
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -0,0 +1,40 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ComposerTextInput {
+    min-width: 0;
+    position: relative;
+}
+
+.o_ComposerTextInput_mirroredTextarea {
+    height: 0;
+    position: absolute;
+    opacity: 0;
+    overflow: hidden;
+    top: -10000px;
+}
+
+.o_ComposerTextInput_textareaStyle {
+    padding: 10px;
+    resize: none;
+    border-radius: $o-mail-rounded-rectangle-border-radius-lg;
+    border: none;
+    overflow: auto;
+
+    &.o-composer-is-compact {
+        // When composer is compact, textarea should not be rounded on the right as
+        // buttons are glued to it
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        // Chat window height should be taken into account to choose this value
+        // ideally this should be less than the third of chat window height
+        max-height: 100px;
+    }
+
+    &:not(.o-composer-is-compact) {
+        // Don't allow the input to take the whole height when it's not compact
+        // (like in chatter for example) but allow it to take some more place
+        max-height: 400px;
+    }
+}
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
new file mode 100644
index 00000000..a14fdee8
--- /dev/null
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ComposerTextInput" owl="1">
+        <div class="o_ComposerTextInput">
+            <t t-if="composer">
+                <t t-if="composer.hasSuggestions">
+                    <ComposerSuggestionList
+                        composerLocalId="props.composerLocalId"
+                        isBelow="props.hasMentionSuggestionsBelowPosition"
+                    />
+                </t>
+                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-att-placeholder="textareaPlaceholder" t-on-click="_onClickTextarea" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
+                <!--
+                     This is an invisible textarea used to compute the composer
+                     height based on the text content. We need it to downsize
+                     the textarea properly without flicker.
+                -->
+                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/dialog/dialog.js b/addons/mail/static/src/components/dialog/dialog.js
new file mode 100644
index 00000000..65902c9c
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.js
@@ -0,0 +1,119 @@
+odoo.define('mail/static/src/components/dialog/dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const patchMixin = require('web.patchMixin');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class Dialog extends Component {
+
+    /**
+     * @param {...any} args
+     */
+    constructor(...args) {
+        super(...args);
+        /**
+         * Reference to the component used inside this dialog.
+         */
+        this._componentRef = useRef('component');
+        this._onClickGlobal = this._onClickGlobal.bind(this);
+        this._onKeydownDocument = this._onKeydownDocument.bind(this);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const dialog = this.env.models['mail.dialog'].get(props.dialogLocalId);
+            return {
+                dialog: dialog ? dialog.__state : undefined,
+            };
+        });
+        this._constructor();
+    }
+
+    /**
+     * Allows patching constructor.
+     */
+    _constructor() {}
+
+    mounted() {
+        document.addEventListener('click', this._onClickGlobal, true);
+        document.addEventListener('keydown', this._onKeydownDocument);
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickGlobal, true);
+        document.removeEventListener('keydown', this._onKeydownDocument);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.dialog}
+     */
+    get dialog() {
+        return this.env.models['mail.dialog'].get(this.props.dialogLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on this dialog.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        ev.stopPropagation();
+    }
+
+    /**
+     * Closes the dialog when clicking outside.
+     * Does not work with attachment viewer because it takes the whole space.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickGlobal(ev) {
+        if (this._componentRef.el && this._componentRef.el.contains(ev.target)) {
+            return;
+        }
+        // TODO: this should be child logic (will crash if child doesn't have isCloseable!!)
+        // task-2092965
+        if (
+            this._componentRef.comp &&
+            this._componentRef.comp.isCloseable &&
+            !this._componentRef.comp.isCloseable()
+        ) {
+            return;
+        }
+        this.dialog.delete();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownDocument(ev) {
+        if (ev.key === 'Escape') {
+            this.dialog.delete();
+        }
+    }
+
+}
+
+Object.assign(Dialog, {
+    props: {
+        dialogLocalId: String,
+    },
+    template: 'mail.Dialog',
+});
+
+return patchMixin(Dialog);
+
+});
diff --git a/addons/mail/static/src/components/dialog/dialog.scss b/addons/mail/static/src/components/dialog/dialog.scss
new file mode 100644
index 00000000..fa17dac0
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.scss
@@ -0,0 +1,23 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Dialog {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $zindex-modal;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Dialog {
+    background-color: rgba(0, 0, 0, 0.7);
+}
diff --git a/addons/mail/static/src/components/dialog/dialog.xml b/addons/mail/static/src/components/dialog/dialog.xml
new file mode 100644
index 00000000..3c953dec
--- /dev/null
+++ b/addons/mail/static/src/components/dialog/dialog.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Dialog" owl="1">
+        <div class="o_Dialog">
+            <t t-if="dialog">
+                <t t-if="dialog.record">
+                    <t
+                        t-component="{{ dialog.record['constructor'].name }}"
+                        class="o_Dialog_component"
+                        t-props="{ localId: dialog.record.localId }"
+                        t-ref="component"
+                    />
+                </t>
+                <t t-else="">
+                    <span>Only dialog linked to a record is currently supported!</span>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
new file mode 100644
index 00000000..69b64a27
--- /dev/null
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.js
@@ -0,0 +1,69 @@
+odoo.define('mail/static/src/components/dialog_manager/dialog_manager.js', function (require) {
+'use strict';
+
+const components = {
+    Dialog: require('mail/static/src/components/dialog/dialog.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class DialogManager extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const dialogManager = this.env.messaging && this.env.messaging.dialogManager;
+            return {
+                dialogManager: dialogManager ? dialogManager.__state : undefined,
+            };
+        });
+    }
+
+    mounted() {
+        this._checkDialogOpen();
+    }
+
+    patched() {
+        this._checkDialogOpen();
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _checkDialogOpen() {
+        if (!this.env.messaging) {
+            /**
+             * Messaging not created, which means essential models like
+             * dialog manager are not ready, so open status of dialog in DOM
+             * is omitted during this (short) period of time.
+             */
+            return;
+        }
+        if (this.env.messaging.dialogManager.dialogs.length > 0) {
+            document.body.classList.add('modal-open');
+        } else {
+            document.body.classList.remove('modal-open');
+        }
+    }
+
+}
+
+Object.assign(DialogManager, {
+    components,
+    props: {},
+    template: 'mail.DialogManager',
+});
+
+return DialogManager;
+
+});
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
new file mode 100644
index 00000000..035e543e
--- /dev/null
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.DialogManager" owl="1">
+        <div class="o_DialogManager">
+            <t t-if="env.messaging">
+                <t t-foreach="env.messaging.dialogManager.dialogs" t-as="dialog" t-key="dialog.localId">
+                    <Dialog
+                        class="o_DialogManager_dialog"
+                        dialogLocalId="dialog.localId"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js b/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js
new file mode 100644
index 00000000..f377ec17
--- /dev/null
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js
@@ -0,0 +1,82 @@
+odoo.define('mail/static/src/components/dialog_manager/dialog_manager_tests.js', function (require) {
+'use strict';
+
+const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js');
+const {
+    afterEach,
+    beforeEach,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('dialog_manager', {}, function () {
+QUnit.module('dialog_manager_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign(
+                { hasDialog: true },
+                params,
+                { data: this.data }
+            ));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('[technical] messaging 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(2);
+
+    const messagingBeforeCreationDeferred = makeDeferred();
+    await this.start({
+        messagingBeforeCreationDeferred,
+        waitUntilMessagingCondition: 'none',
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_DialogManager',
+        "should have dialog manager even when messaging is not yet created"
+    );
+
+    // simulate messaging being created
+    messagingBeforeCreationDeferred.resolve();
+    await nextAnimationFrame();
+
+    assert.containsOnce(
+        document.body,
+        '.o_DialogManager',
+        "should still contain dialog manager after messaging has been created"
+    );
+});
+
+QUnit.test('initial mount', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_DialogManager',
+        "should have dialog manager"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/discuss.js b/addons/mail/static/src/components/discuss/discuss.js
new file mode 100644
index 00000000..068fd88d
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/discuss.js
@@ -0,0 +1,313 @@
+odoo.define('mail/static/src/components/discuss/discuss.js', function (require) {
+'use strict';
+
+const components = {
+    AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'),
+    Composer: require('mail/static/src/components/composer/composer.js'),
+    DiscussMobileMailboxSelection: require('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js'),
+    DiscussSidebar: require('mail/static/src/components/discuss_sidebar/discuss_sidebar.js'),
+    MobileMessagingNavbar: require('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js'),
+    ModerationDiscardDialog: require('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js'),
+    ModerationRejectDialog: require('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js'),
+    NotificationList: require('mail/static/src/components/notification_list/notification_list.js'),
+    ThreadView: require('mail/static/src/components/thread_view/thread_view.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const patchMixin = require('web.patchMixin');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class Discuss extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore((...args) => this._useStoreSelector(...args), {
+            compareDepth: {
+                checkedMessages: 1,
+                uncheckedMessages: 1,
+            },
+        });
+        this._updateLocalStoreProps();
+        /**
+         * Reference of the composer. Useful to focus it.
+         */
+        this._composerRef = useRef('composer');
+        /**
+         * Reference of the ThreadView. Useful to focus it.
+         */
+        this._threadViewRef = useRef('threadView');
+        // bind since passed as props
+        this._onMobileAddItemHeaderInputSelect = this._onMobileAddItemHeaderInputSelect.bind(this);
+        this._onMobileAddItemHeaderInputSource = this._onMobileAddItemHeaderInputSource.bind(this);
+    }
+
+    mounted() {
+        this.discuss.update({ isOpen: true });
+        if (this.discuss.thread) {
+            this.trigger('o-push-state-action-manager');
+        } else if (this.env.isMessagingInitialized()) {
+            this.discuss.openInitThread();
+        }
+        this._updateLocalStoreProps();
+    }
+
+    patched() {
+        this.trigger('o-update-control-panel');
+        if (this.discuss.thread) {
+            this.trigger('o-push-state-action-manager');
+        }
+        if (
+            this.discuss.thread &&
+            this.discuss.thread === this.env.messaging.inbox &&
+            this.discuss.threadView &&
+            this._lastThreadCache === this.discuss.threadView.threadCache.localId &&
+            this._lastThreadCounter > 0 && this.discuss.thread.counter === 0
+        ) {
+            this.trigger('o-show-rainbow-man');
+        }
+        this._activeThreadCache = this.discuss.threadView && this.discuss.threadView.threadCache;
+        this._updateLocalStoreProps();
+    }
+
+    willUnmount() {
+        if (this.discuss) {
+            this.discuss.close();
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    get addChannelInputPlaceholder() {
+        return this.env._t("Create or search channel...");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get addChatInputPlaceholder() {
+        return this.env._t("Search user...");
+    }
+
+    /**
+     * @returns {mail.discuss}
+     */
+    get discuss() {
+        return this.env.messaging && this.env.messaging.discuss;
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    mobileNavbarTabs() {
+        return [{
+            icon: 'fa fa-inbox',
+            id: 'mailbox',
+            label: this.env._t("Mailboxes"),
+        }, {
+            icon: 'fa fa-user',
+            id: 'chat',
+            label: this.env._t("Chat"),
+        }, {
+            icon: 'fa fa-users',
+            id: 'channel',
+            label: this.env._t("Channel"),
+        }];
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _updateLocalStoreProps() {
+        /**
+         * Locally tracked store props `activeThreadCache`.
+         * Useful to set scroll position from last stored one and to display
+         * rainbox man on inbox.
+         */
+        this._lastThreadCache = (
+            this.discuss.threadView &&
+            this.discuss.threadView.threadCache &&
+            this.discuss.threadView.threadCache.localId
+        );
+        /**
+         * Locally tracked store props `threadCounter`.
+         * Useful to display the rainbow man on inbox.
+         */
+        this._lastThreadCounter = (
+            this.discuss.thread &&
+            this.discuss.thread.counter
+        );
+    }
+
+    /**
+     * Returns data selected from the store.
+     *
+     * @private
+     * @param {Object} props
+     * @returns {Object}
+     */
+    _useStoreSelector(props) {
+        const discuss = this.env.messaging && this.env.messaging.discuss;
+        const thread = discuss && discuss.thread;
+        const threadView = discuss && discuss.threadView;
+        const replyingToMessage = discuss && discuss.replyingToMessage;
+        const replyingToMessageOriginThread = replyingToMessage && replyingToMessage.originThread;
+        const checkedMessages = threadView ? threadView.checkedMessages : [];
+        return {
+            checkedMessages,
+            checkedMessagesIsModeratedByCurrentPartner: checkedMessages && checkedMessages.some(message => message.isModeratedByCurrentPartner), // for widget
+            discuss,
+            discussActiveId: discuss && discuss.activeId, // for widget
+            discussActiveMobileNavbarTabId: discuss && discuss.activeMobileNavbarTabId,
+            discussHasModerationDiscardDialog: discuss && discuss.hasModerationDiscardDialog,
+            discussHasModerationRejectDialog: discuss && discuss.hasModerationRejectDialog,
+            discussIsAddingChannel: discuss && discuss.isAddingChannel,
+            discussIsAddingChat: discuss && discuss.isAddingChat,
+            discussIsDoFocus: discuss && discuss.isDoFocus,
+            discussReplyingToMessageOriginThreadComposer: replyingToMessageOriginThread && replyingToMessageOriginThread.composer,
+            inbox: this.env.messaging.inbox,
+            isDeviceMobile: this.env.messaging && this.env.messaging.device.isMobile,
+            isMessagingInitialized: this.env.isMessagingInitialized(),
+            replyingToMessage,
+            starred: this.env.messaging.starred, // for widget
+            thread,
+            threadCache: threadView && threadView.threadCache,
+            threadChannelType: thread && thread.channel_type, // for widget
+            threadDisplayName: thread && thread.displayName, // for widget
+            threadCounter: thread && thread.counter,
+            threadModel: thread && thread.model,
+            threadPublic: thread && thread.public, // for widget
+            threadView,
+            threadViewMessagesLength: threadView && threadView.messages.length, // for widget
+            uncheckedMessages: threadView ? threadView.uncheckedMessages : [], // for widget
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onDialogClosedModerationDiscard() {
+        this.discuss.update({ hasModerationDiscardDialog: false });
+    }
+
+    /**
+     * @private
+     */
+    _onDialogClosedModerationReject() {
+        this.discuss.update({ hasModerationRejectDialog: false });
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onFocusinComposer(ev) {
+        this.discuss.update({ isDoFocus: false });
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onHideMobileAddItemHeader(ev) {
+        ev.stopPropagation();
+        this.discuss.clearIsAddingItem();
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     * @param {Object} ui.item
+     * @param {integer} ui.item.id
+     */
+    _onMobileAddItemHeaderInputSelect(ev, ui) {
+        const discuss = this.discuss;
+        if (discuss.isAddingChannel) {
+            discuss.handleAddChannelAutocompleteSelect(ev, ui);
+        } else {
+            discuss.handleAddChatAutocompleteSelect(ev, ui);
+        }
+    }
+
+    /**
+     * @private
+     * @param {Object} req
+     * @param {string} req.term
+     * @param {function} res
+     */
+    _onMobileAddItemHeaderInputSource(req, res) {
+        if (this.discuss.isAddingChannel) {
+            this.discuss.handleAddChannelAutocompleteSource(req, res);
+        } else {
+            this.discuss.handleAddChatAutocompleteSource(req, res);
+        }
+    }
+
+    /**
+     * @private
+     */
+    _onReplyingToMessageMessagePosted() {
+        this.env.services['notification'].notify({
+            message: _.str.sprintf(
+                this.env._t(`Message posted on "%s"`),
+                owl.utils.escape(this.discuss.replyingToMessage.originThread.displayName)
+            ),
+            type: 'warning',
+        });
+        this.discuss.clearReplyingToMessage();
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {string} ev.detail.tabId
+     */
+    _onSelectMobileNavbarTab(ev) {
+        ev.stopPropagation();
+        if (this.discuss.activeMobileNavbarTabId === ev.detail.tabId) {
+            return;
+        }
+        this.discuss.clearReplyingToMessage();
+        this.discuss.update({ activeMobileNavbarTabId: ev.detail.tabId });
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onThreadRendered(ev) {
+        this.trigger('o-update-control-panel');
+    }
+
+}
+
+Object.assign(Discuss, {
+    components,
+    props: {},
+    template: 'mail.Discuss',
+});
+
+return patchMixin(Discuss);
+
+});
diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss
new file mode 100644
index 00000000..5cddf101
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/discuss.scss
@@ -0,0 +1,114 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_action_manager {
+    // bug with scrollable inside discuss mobile without this...
+    min-height: 0;
+}
+
+.o-autogrow {
+    flex: 1 1 auto;
+}
+
+.o_Discuss {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+
+    &.o-mobile {
+        flex-flow: column;
+        align-items: center;
+    }
+}
+
+.o_Discuss_chatWindowHeader {
+    width: 100%;
+    flex: 0 0 auto;
+}
+
+.o_Discuss_content {
+    height: 100%;
+    overflow: auto;
+    flex: 1 1 auto;
+    display: flex;
+    flex-flow: column;
+}
+
+.o_Discuss_messagingNotInitialized {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Discuss_messagingNotInitializedIcon {
+    margin-right: 3px;
+}
+
+.o_Discuss_mobileAddItemHeader {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding: 0 10px;
+}
+
+.o_Discuss_mobileAddItemHeaderInput {
+    flex: 1 1 auto;
+    margin-bottom: 8px;
+    padding: 8px;
+}
+
+.o_Discuss_mobileMailboxSelection {
+    width: 100%;
+}
+
+.o_Discuss_mobileNavbar {
+    width: 100%;
+}
+
+.o_Discuss_noThread {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Discuss_replyingToMessageComposer {
+    width: 100%;
+}
+
+.o_Discuss_sidebar {
+    height: 100%;
+    overflow: auto;
+    padding-top: 10px;
+    flex: 0 0 auto;
+}
+
+.o_Discuss_thread {
+    flex: 1 1 auto;
+
+    &.o-mobile {
+        width: 100%;
+    }
+}
+
+.o_Discuss_notificationList {
+    width: 100%;
+    flex: 1 1 auto;
+}
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Discuss.o-mobile {
+    background-color: white;
+}
+
+.o_Discuss_mobileAddItemHeaderInput {
+    appearance: none;
+    border: 1px solid gray('400');
+    border-radius: 5px;
+    outline: none;
+}
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
new file mode 100644
index 00000000..ad9171a5
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Discuss" owl="1">
+        <div class="o_Discuss"
+            t-att-class="{
+                'o-adding-item': discuss ? discuss.isAddingChannel or discuss.isAddingChat : false,
+                'o-mobile': env.messaging ? env.messaging.device.isMobile : false,
+            }"
+        >
+            <t t-if="!env.isMessagingInitialized()">
+                <div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-spinner fa-spin"/>Please wait...</div>
+            </t>
+            <t t-else="">
+                <t t-if="!env.messaging.device.isMobile">
+                    <DiscussSidebar class="o_Discuss_sidebar"/>
+                </t>
+                <t t-if="env.messaging.device.isMobile" t-call="mail.Discuss.content"/>
+                <t t-else="">
+                    <div class="o_Discuss_content">
+                        <t t-call="mail.Discuss.content"/>
+                    </div>
+                </t>
+                <t t-if="discuss.hasModerationDiscardDialog">
+                    <ModerationDiscardDialog messageLocalIds="discuss.threadView.checkedMessages.map(message => message.localId)" t-on-dialog-closed="_onDialogClosedModerationDiscard"/>
+                </t>
+                <t t-if="discuss.hasModerationRejectDialog">
+                    <ModerationRejectDialog messageLocalIds="discuss.threadView.checkedMessages.map(message => message.localId)" t-on-dialog-closed="_onDialogClosedModerationReject"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.Discuss.content" owl="1">
+        <t t-if="env.messaging.device.isMobile and discuss.activeMobileNavbarTabId === 'mailbox'">
+            <DiscussMobileMailboxSelection class="o_Discuss_mobileMailboxSelection"/>
+        </t>
+        <t t-if="env.messaging.device.isMobile and (discuss.isAddingChannel or discuss.isAddingChat)">
+            <div class="o_Discuss_mobileAddItemHeader">
+                <AutocompleteInput
+                    class="o_Discuss_mobileAddItemHeaderInput"
+                    isFocusOnMount="true"
+                    isHtml="discuss.isAddingChannel"
+                    placeholder="discuss.isAddingChannel ? addChannelInputPlaceholder : addChatInputPlaceholder"
+                    select="_onMobileAddItemHeaderInputSelect"
+                    source="_onMobileAddItemHeaderInputSource"
+                    t-on-o-hide="_onHideMobileAddItemHeader"
+                />
+            </div>
+        </t>
+        <t t-if="discuss.threadView">
+            <ThreadView
+                class="o_Discuss_thread"
+                t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                composerAttachmentsDetailsMode="'card'"
+                hasComposer="discuss.thread.model !== 'mail.box'"
+                hasComposerCurrentPartnerAvatar="!env.messaging.device.isMobile"
+                hasComposerThreadTyping="true"
+                hasMessageCheckbox="true"
+                hasSquashCloseMessages="discuss.thread.model !== 'mail.box'"
+                haveMessagesMarkAsReadIcon="discuss.thread === env.messaging.inbox"
+                haveMessagesReplyIcon="discuss.thread === env.messaging.inbox"
+                isDoFocus="discuss.isDoFocus"
+                selectedMessageLocalId="discuss.replyingToMessage and discuss.replyingToMessage.localId"
+                threadViewLocalId="discuss.threadView.localId"
+                t-on-o-focusin-composer="_onFocusinComposer"
+                t-on-o-rendered="_onThreadRendered"
+                t-ref="threadView"
+            />
+        </t>
+        <t t-if="!discuss.thread and (!env.messaging.device.isMobile or discuss.activeMobileNavbarTabId === 'mailbox')">
+            <div class="o_Discuss_noThread">
+                No conversation selected.
+            </div>
+        </t>
+        <t t-if="env.messaging.device.isMobile and discuss.activeMobileNavbarTabId !== 'mailbox'">
+            <NotificationList
+                class="o_Discuss_notificationList"
+                filter="discuss.activeMobileNavbarTabId"
+            />
+        </t>
+        <t t-if="env.messaging.device.isMobile and !discuss.isReplyingToMessage">
+            <MobileMessagingNavbar
+                class="o_Discuss_mobileNavbar"
+                activeTabId="discuss.activeMobileNavbarTabId"
+                tabs="mobileNavbarTabs()"
+                t-on-o-select-mobile-messaging-navbar-tab="_onSelectMobileNavbarTab"
+            />
+        </t>
+        <t t-if="discuss.isReplyingToMessage">
+            <Composer
+                class="o_Discuss_replyingToMessageComposer"
+                composerLocalId="discuss.replyingToMessage.originThread.composer.localId"
+                hasCurrentPartnerAvatar="!env.messaging.device.isMobile"
+                hasDiscardButton="true"
+                hasThreadName="true"
+                isDoFocus="discuss.isDoFocus"
+                textInputSendShortcuts="['ctrl-enter', 'meta-enter']"
+                t-on-o-focusin-composer="_onFocusinComposer"
+                t-on-o-message-posted="_onReplyingToMessageMessagePosted"
+                t-ref="composer"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js
new file mode 100644
index 00000000..26431207
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js
@@ -0,0 +1,408 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_domain_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_domain_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('discuss should filter messages based on given domain', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.message'].records.push({
+        body: "test",
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+    }, {
+        body: "not empty",
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+    });
+    await this.start();
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "should have 2 messages in Inbox initially"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            // simulate control panel search
+            this.env.messaging.discuss.update({
+                stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]),
+            });
+        },
+        message: "should wait until search filter is applied",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                hint.data.fetchedMessages.length === 1 &&
+                threadViewer.thread.model === 'mail.box' &&
+                threadViewer.thread.id === 'inbox'
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should only have the 1 message containing 'test' remaining after doing a search"
+    );
+});
+
+QUnit.test('discuss should keep filter domain on changing thread', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.message'].records.push({
+        body: "test",
+        channel_ids: [20],
+    }, {
+        body: "not empty",
+        channel_ids: [20],
+    });
+    await this.start();
+    const channel = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have no message in Inbox initially"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            // simulate control panel search
+            this.env.messaging.discuss.update({
+                stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]),
+            });
+        },
+        message: "should wait until search filter is applied",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.box' &&
+                threadViewer.thread.id === 'inbox'
+            );
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have still no message in Inbox after doing a search"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${channel.localId}"]
+            `).click();
+        },
+        message: "should wait until channel 20 is loaded after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should only have the 1 message containing 'test' in channel 20 (due to the domain still applied on changing thread)"
+    );
+});
+
+QUnit.test('discuss should refresh filtered thread on receiving new message', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const channel = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${channel.localId}"]
+            `).click();
+        },
+        message: "should wait until channel 20 is loaded after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            // simulate control panel search
+            this.env.messaging.discuss.update({
+                stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]),
+            });
+        },
+        message: "should wait until search filter is applied",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have initially no message in channel 20 matching the search 'test'"
+    );
+
+    // simulate receiving a message
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => this.env.services.rpc({
+            route: '/mail/chat_post',
+            params: {
+                message_content: "test",
+                uuid: channel.uuid,
+            },
+        }),
+        message: "should wait until channel 20 refreshed its filtered message list",
+        predicate: data => {
+            return (
+                data.threadViewer.thread.model === 'mail.channel' &&
+                data.threadViewer.thread.id === 20 &&
+                data.hint.type === 'messages-loaded'
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should only have the 1 message containing 'test' in channel 20 after just receiving it"
+    );
+});
+
+QUnit.test('discuss should refresh filtered thread on changing thread', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({ id: 20 }, { id: 21 });
+    await this.start();
+    const channel20 = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const channel21 = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 21,
+        model: 'mail.channel',
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${channel20.localId}"]
+            `).click();
+        },
+        message: "should wait until channel 20 is loaded after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            // simulate control panel search
+            this.env.messaging.discuss.update({
+                stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]),
+            });
+        },
+        message: "should wait until search filter is applied",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have initially no message in channel 20 matching the search 'test'"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${channel21.localId}"]
+            `).click();
+        },
+        message: "should wait until channel 21 is loaded after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 21
+            );
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have no message in channel 21 matching the search 'test'"
+    );
+    // simulate receiving a message on channel 20 while channel 21 is displayed
+    await this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            message_content: "test",
+            uuid: channel20.uuid,
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should still have no message in channel 21 matching the search 'test' after receiving a message on channel 20"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${channel20.localId}"]
+            `).click();
+        },
+        message: "should wait until channel 20 is loaded with the new message after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20 &&
+                threadViewer.threadCache.fetchedMessages.length === 1
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have the 1 message containing 'test' in channel 20 when displaying it, after having received the message while the channel was not visible"
+    );
+});
+
+QUnit.test('select all and unselect all buttons should work on filtered thread', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        is_moderator: true,
+        moderation: true,
+        name: "general",
+    });
+    this.data['mail.message'].records.push({
+        body: "<p>test</p>",
+        model: 'mail.channel',
+        moderation_status: 'pending_moderation',
+        res_id: 20,
+    });
+    await this.start();
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${this.env.messaging.moderation.localId}"]
+            `).click();
+        },
+        message: "should wait until moderation box is loaded after clicking on it",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.box' &&
+                threadViewer.thread.id === 'moderation'
+            );
+        },
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            // simulate control panel search
+            this.env.messaging.discuss.update({
+                stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]),
+            });
+        },
+        message: "should wait until search filter is applied",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.box' &&
+                threadViewer.thread.id === 'moderation'
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should only have the 1 message containing 'test' in moderation box"
+    );
+    assert.notOk(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should not be checked initially"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll').click());
+    assert.ok(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should be checked after clicking on 'select all'"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll').click());
+    assert.notOk(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should be unchecked after clicking on 'unselect all'"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js
new file mode 100644
index 00000000..63b524eb
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js
@@ -0,0 +1,725 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_inbox_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_inbox_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('reply: discard on pressing escape', async function (assert) {
+    assert.expect(9);
+
+    // partner expected to be found by mention
+    this.data['res.partner'].records.push({
+        email: "testpartnert@odoo.com",
+        id: 11,
+        name: "TestPartner",
+    });
+    // message expected to be found in inbox
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "should have composer after clicking on reply to message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Composer_buttonEmojis`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be opened after click on emojis button"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_Composer_buttonEmojis`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be closed after pressing escape on emojis button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "reply composer should still be opened after pressing escape on emojis button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "@");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "T");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+        document.execCommand('insertText', false, "e");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ComposerSuggestion',
+        "mention suggestion should be opened after typing @"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_ComposerSuggestion',
+        "mention suggestion should be closed after pressing escape on mention suggestion"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "reply composer should still be opened after pressing escape on mention suggestion"
+    );
+
+    await afterNextRender(() => {
+        const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" });
+        document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev);
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Composer',
+        "reply composer should be closed after pressing escape if there was no other priority escape handler"
+    );
+});
+
+QUnit.test('reply: discard on discard button click', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "should have composer after clicking on reply to message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer_buttonDiscard',
+        "composer should have a discard button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Composer_buttonDiscard`).click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Composer',
+        "reply composer should be closed after clicking on discard"
+    );
+});
+
+QUnit.test('reply: discard on reply button toggle', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "should have composer after clicking on reply to message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Message_commandReply`).click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Composer',
+        "reply composer should be closed after clicking on reply button again"
+    );
+});
+
+QUnit.test('reply: discard on click away', async function (assert) {
+    assert.expect(7);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "should have composer after clicking on reply to message"
+    );
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).click();
+    await nextAnimationFrame(); // wait just in case, but nothing is supposed to happen
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "reply composer should still be there after clicking inside itself"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Composer_buttonEmojis`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be opened after clicking on emojis button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_EmojisPopover_emoji`).click();
+    });
+    assert.containsNone(
+        document.body,
+        '.o_EmojisPopover',
+        "emojis popover should be closed after selecting an emoji"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Composer',
+        "reply composer should still be there after selecting an emoji (even though it is technically a click away, it should be considered inside)"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_Message`).click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Composer',
+        "reply composer should be closed after clicking away"
+    );
+});
+
+QUnit.test('"reply to" composer should log note if message replied to is a note', async function (assert) {
+    assert.expect(6);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        is_discussion: false,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+                assert.strictEqual(
+                    args.kwargs.message_type,
+                    "comment",
+                    "should set message type as 'comment'"
+                );
+                assert.strictEqual(
+                    args.kwargs.subtype_xmlid,
+                    "mail.mt_note",
+                    "should set subtype_xmlid as 'note'"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Composer_buttonSend').textContent.trim(),
+        "Log",
+        "Send button text should be 'Log'"
+    );
+
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "Test")
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+});
+
+QUnit.test('"reply to" composer should send message if message replied to is not a note', async function (assert) {
+    assert.expect(6);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        is_discussion: true,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+                assert.strictEqual(
+                    args.kwargs.message_type,
+                    "comment",
+                    "should set message type as 'comment'"
+                );
+                assert.strictEqual(
+                    args.kwargs.subtype_xmlid,
+                    "mail.mt_comment",
+                    "should set subtype_xmlid as 'comment'"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Composer_buttonSend').textContent.trim(),
+        "Send",
+        "Send button text should be 'Send'"
+    );
+
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "Test")
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+});
+
+QUnit.test('error notifications should not be shown in Inbox', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        id: 100,
+        model: 'mail.channel',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 20,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 100, // id of related message
+        res_partner_id: this.data.currentPartnerId, // must be for current partner
+        notification_status: 'exception',
+        notification_type: 'email',
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_originThreadLink',
+        "should display origin thread link"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should not display any notification icon in Inbox"
+    );
+});
+
+QUnit.test('show subject of message in Inbox', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'mail.channel', // random existing model
+        needaction: true, // message_fetch domain
+        needaction_partner_ids: [this.data.currentPartnerId], // not needed, for consistency
+        subject: "Salutations, voyageur", // will be asserted in the test
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_subject',
+        "should display subject of the message"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_subject').textContent,
+        "Subject: Salutations, voyageur",
+        "Subject of the message should be 'Salutations, voyageur'"
+    );
+});
+
+QUnit.test('show subject of message in history', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        history_partner_ids: [3], // not needed, for consistency
+        model: 'mail.channel', // random existing model
+        subject: "Salutations, voyageur", // will be asserted in the test
+    });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_history',
+            },
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_subject',
+        "should display subject of the message"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_subject').textContent,
+        "Subject: Salutations, voyageur",
+        "Subject of the message should be 'Salutations, voyageur'"
+    );
+});
+
+QUnit.test('click on (non-channel/non-partner) origin thread link should redirect to form view', async function (assert) {
+    assert.expect(9);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        // Callback of doing an action (action manager).
+        // Expected to be called on click on origin thread link,
+        // which redirects to form view of record related to origin thread
+        assert.step('do-action');
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            "action should open a view"
+        );
+        assert.deepEqual(
+            payload.action.views,
+            [[false, 'form']],
+            "action should open form view"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'some.model',
+            "action should open view with model 'some.model' (model of message origin thread)"
+        );
+        assert.strictEqual(
+            payload.action.res_id,
+            10,
+            "action should open view with id 10 (id of message origin thread)"
+        );
+    });
+    this.data['some.model'] = { fields: {}, records: [{ id: 10 }] };
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'some.model',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        record_name: "Some record",
+        res_id: 10,
+    });
+    await this.start({
+        env: {
+            bus,
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_originThreadLink',
+        "should display origin thread link"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_originThreadLink').textContent,
+        "Some record",
+        "origin thread link should display record name"
+    );
+
+    document.querySelector('.o_Message_originThreadLink').click();
+    assert.verifySteps(['do-action'], "should have made an action on click on origin thread (to open form view)");
+});
+
+QUnit.test('subject should not be shown when subject is the same as the thread name', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "subject should not be shown when subject is the same as the thread name"
+    );
+});
+
+QUnit.test('subject should not be shown when subject is the same as the thread name and both have the same prefix', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Re: Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Re: Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "subject should not be shown when subject is the same as the thread name and both have the same prefix"
+    );
+});
+
+QUnit.test('subject should not be shown when subject differs from thread name only by the "Re:" prefix', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Re: Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "should not display subject when subject differs from thread name only by the 'Re:' prefix"
+    );
+});
+
+QUnit.test('subject should not be shown when subject differs from thread name only by the "Fw:" and "Re:" prefix', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Fw: Re: Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "should not display subject when subject differs from thread name only by the 'Fw:' and Re:' prefix"
+    );
+});
+
+QUnit.test('subject should be shown when the thread name has an extra prefix compared to subject', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Re: Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message_subject',
+        "subject should be shown when the thread name has an extra prefix compared to subject"
+    );
+});
+
+QUnit.test('subject should not be shown when subject differs from thread name only by the "fw:" prefix and both contain another common prefix', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "fw: re: Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Re: Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "subject should not be shown when subject differs from thread name only by the 'fw:' prefix and both contain another common prefix"
+    );
+});
+
+QUnit.test('subject should not be shown when subject differs from thread name only by the "Re: Re:" prefix', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        needaction: true,
+        subject: "Re: Re: Salutations, voyageur",
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+        name: "Salutations, voyageur",
+    });
+    await this.start();
+
+    assert.containsNone(
+        document.body,
+        '.o_Message_subject',
+        "should not display subject when subject differs from thread name only by the 'Re: Re:'' prefix"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js
new file mode 100644
index 00000000..c4c53cb5
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js
@@ -0,0 +1,1180 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_moderation_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_moderation_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('as moderator, moderated channel with pending moderation message', async function (assert) {
+    assert.expect(37);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "<p>test</p>", // random body, will be asserted in the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending moderation
+        res_id: 20, // id of the channel
+    });
+    await this.start();
+
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.moderation.localId
+            }"]
+        `),
+        "should display the moderation box in the sidebar"
+    );
+    const mailboxCounter = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.moderation.localId
+        }"]
+        .o_DiscussSidebarItem_counter
+    `);
+    assert.ok(
+        mailboxCounter,
+        "there should be a counter next to the moderation mailbox in the sidebar"
+    );
+    assert.strictEqual(
+        mailboxCounter.textContent.trim(),
+        "1",
+        "the mailbox counter of the moderation mailbox should display '1'"
+    );
+
+    // 1. go to moderation mailbox
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.moderation.localId
+            }"]
+        `).click()
+    );
+    // check message
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should be only one message in moderation box"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_content').textContent,
+        "test",
+        "this message pending moderation should have the correct content"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_originThreadLink',
+        "thee message should have one origin"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_originThreadLink').textContent,
+        "#general",
+        "the message pending moderation should have correct origin as its linked document"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_checkbox',
+        "there should be a moderation checkbox next to the message"
+    );
+    assert.notOk(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should be unchecked by default"
+    );
+    // check select all (enabled) / unselect all (disabled) buttons
+    assert.containsOnce(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonSelectAll',
+        "there should be a 'Select All' button in the control panel"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll'),
+        'disabled',
+        "the 'Select All' button should not be disabled"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonUnselectAll',
+        "there should be a 'Unselect All' button in the control panel"
+    );
+    assert.hasClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll'),
+        'disabled',
+        "the 'Unselect All' button should be disabled"
+    );
+    // check moderate all buttons (invisible)
+    assert.containsN(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonModeration',
+        3,
+        "there should be 3 buttons to moderate selected messages in the control panel"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonModeration.o-accept',
+        "there should one moderate button to accept messages pending moderation"
+    );
+    assert.isNotVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        "the moderate button 'Accept' should be invisible by default"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonModeration.o-reject',
+        "there should one moderate button to reject messages pending moderation"
+    );
+    assert.isNotVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-reject'),
+        "the moderate button 'Reject' should be invisible by default"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_widget_Discuss_controlPanelButtonModeration.o-discard',
+        "there should one moderate button to discard messages pending moderation"
+    );
+    assert.isNotVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard'),
+        "the moderate button 'Discard' should be invisible by default"
+    );
+
+    // click on message moderation checkbox
+    await afterNextRender(() => document.querySelector('.o_Message_checkbox').click());
+    assert.ok(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should become checked after click"
+    );
+    // check select all (disabled) / unselect all buttons (enabled)
+    assert.hasClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll'),
+        'disabled',
+        "the 'Select All' button should be disabled"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll'),
+        'disabled',
+        "the 'Unselect All' button should not be disabled"
+    );
+    // check moderate all buttons updated (visible)
+    assert.isVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        "the moderate button 'Accept' should be visible"
+    );
+    assert.isVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-reject'),
+        "the moderate button 'Reject' should be visible"
+    );
+    assert.isVisible(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard'),
+        "the moderate button 'Discard' should be visible"
+    );
+
+    // test select buttons
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll').click()
+    );
+    assert.notOk(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should become unchecked after click"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll').click()
+    );
+    assert.ok(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should become checked again after click"
+    );
+
+    // 2. go to channel 'general'
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    // check correct message
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should be only one message in general channel"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_checkbox',
+        "there should be a moderation checkbox next to the message"
+    );
+    assert.notOk(
+        document.querySelector('.o_Message_checkbox').checked,
+        "the moderation checkbox should not be checked here"
+    );
+    await afterNextRender(() => document.querySelector('.o_Message_checkbox').click());
+    // Don't test moderation actions visibility, since it is similar to moderation box.
+
+    // 3. test discard button
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ModerationDiscardDialog',
+        "discard dialog should be open"
+    );
+    // the dialog will be tested separately
+    await afterNextRender(() =>
+        document.querySelector('.o_ModerationDiscardDialog .o-cancel').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ModerationDiscardDialog',
+        "discard dialog should be closed"
+    );
+
+    // 4. test reject button
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_widget_Discuss_controlPanelButtonModeration.o-reject
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ModerationRejectDialog',
+        "reject dialog should be open"
+    );
+    // the dialog will be tested separately
+    await afterNextRender(() =>
+        document.querySelector('.o_ModerationRejectDialog .o-cancel').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ModerationRejectDialog',
+        "reject dialog should be closed"
+    );
+
+    // 5. test accept button
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should still be only one message in general channel"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message_checkbox',
+        "there should not be a moderation checkbox next to the message"
+    );
+});
+
+QUnit.test('as moderator, accept pending moderation message', async function (assert) {
+    assert.expect(12);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "<p>test</p>", // random body, will be asserted in the test
+        id: 100, // random unique id, will be asserted during the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending moderation
+        res_id: 20, // id of the channel
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'moderate') {
+                assert.step('moderate');
+                const messageIDs = args.args[0];
+                const decision = args.args[1];
+                assert.strictEqual(
+                    messageIDs.length,
+                    1,
+                    "should moderate one message"
+                );
+                assert.strictEqual(
+                    messageIDs[0],
+                    100,
+                    "should moderate message with ID 100"
+                );
+                assert.strictEqual(
+                    decision,
+                    'accept',
+                    "should accept the message"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    // 1. go to moderation box
+    const moderationBox = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.moderation.localId
+        }"]
+    `);
+    assert.ok(
+        moderationBox,
+        "should display the moderation box"
+    );
+
+    await afterNextRender(() => moderationBox.click());
+    assert.ok(
+        document.querySelector(`
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `),
+        "should display the message to moderate"
+    );
+    const acceptButton = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+        .o_Message_moderationAction.o-accept
+    `);
+    assert.ok(acceptButton, "should display the accept button");
+
+    await afterNextRender(() => acceptButton.click());
+    assert.verifySteps(['moderate']);
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_emptyTitle',
+        "should now have no message displayed in moderation box"
+    );
+
+    // 2. go to channel 'general'
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        "should display the general channel"
+    );
+
+    await afterNextRender(() => channel.click());
+    const message = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.ok(
+        message,
+        "should display the accepted message"
+    );
+    assert.containsNone(
+        message,
+        '.o_Message_moderationPending',
+        "the message should not be pending moderation"
+    );
+});
+
+QUnit.test('as moderator, reject pending moderation message (reject with explanation)', async function (assert) {
+    assert.expect(23);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "<p>test</p>", // random body, will be asserted in the test
+        id: 100, // random unique id, will be asserted during the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending moderation
+        res_id: 20, // id of the channel
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'moderate') {
+                assert.step('moderate');
+                const messageIDs = args.args[0];
+                const decision = args.args[1];
+                const kwargs = args.kwargs;
+                assert.strictEqual(
+                    messageIDs.length,
+                    1,
+                    "should moderate one message"
+                );
+                assert.strictEqual(
+                    messageIDs[0],
+                    100,
+                    "should moderate message with ID 100"
+                );
+                assert.strictEqual(
+                    decision,
+                    'reject',
+                    "should reject the message"
+                );
+                assert.strictEqual(
+                    kwargs.title,
+                    "Message Rejected",
+                    "should have correct reject message title"
+                );
+                assert.strictEqual(
+                    kwargs.comment,
+                    "Your message was rejected by moderator.",
+                    "should have correct reject message body / comment"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    // 1. go to moderation box
+    const moderationBox = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.moderation.localId
+        }"]
+    `);
+    assert.ok(
+        moderationBox,
+        "should display the moderation box"
+    );
+
+    await afterNextRender(() => moderationBox.click());
+    const pendingMessage = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.ok(
+        pendingMessage,
+        "should display the message to moderate"
+    );
+    const rejectButton = pendingMessage.querySelector(':scope .o_Message_moderationAction.o-reject');
+    assert.ok(
+        rejectButton,
+        "should display the reject button"
+    );
+
+    await afterNextRender(() => rejectButton.click());
+    const dialog = document.querySelector('.o_ModerationRejectDialog');
+    assert.ok(
+        dialog,
+        "a dialog should be prompt to the moderator on click reject"
+    );
+    assert.strictEqual(
+        dialog.querySelector('.modal-title').textContent,
+        "Send explanation to author",
+        "dialog should have correct title"
+    );
+
+    const messageTitle = dialog.querySelector(':scope .o_ModerationRejectDialog_title');
+    assert.ok(
+        messageTitle,
+        "should have a title for rejecting"
+    );
+    assert.hasAttrValue(
+        messageTitle,
+        'placeholder',
+        "Subject",
+        "title for reject reason should have correct placeholder"
+    );
+    assert.strictEqual(
+        messageTitle.value,
+        "Message Rejected",
+        "title for reject reason should have correct default value"
+    );
+
+    const messageComment = dialog.querySelector(':scope .o_ModerationRejectDialog_comment');
+    assert.ok(
+        messageComment,
+        "should have a comment for rejecting"
+    );
+    assert.hasAttrValue(
+        messageComment,
+        'placeholder',
+        "Mail Body",
+        "comment for reject reason should have correct placeholder"
+    );
+    assert.strictEqual(
+        messageComment.value,
+        "Your message was rejected by moderator.",
+        "comment for reject reason should have correct default text content"
+    );
+    const confirmReject = dialog.querySelector(':scope .o-reject');
+    assert.ok(
+        confirmReject,
+        "should have reject button"
+    );
+    assert.strictEqual(
+        confirmReject.textContent,
+        "Reject"
+    );
+
+    await afterNextRender(() => confirmReject.click());
+    assert.verifySteps(['moderate']);
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_emptyTitle',
+        "should now have no message displayed in moderation box"
+    );
+
+    // 2. go to channel 'general'
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        'should display the general channel'
+    );
+
+    await afterNextRender(() => channel.click());
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should now have no message in channel"
+    );
+});
+
+QUnit.test('as moderator, discard pending moderation message (reject without explanation)', async function (assert) {
+    assert.expect(16);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "<p>test</p>", // random body, will be asserted in the test
+        id: 100, // random unique id, will be asserted during the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending moderation
+        res_id: 20, // id of the channel
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'moderate') {
+                assert.step('moderate');
+                const messageIDs = args.args[0];
+                const decision = args.args[1];
+                assert.strictEqual(messageIDs.length, 1, "should moderate one message");
+                assert.strictEqual(messageIDs[0], 100, "should moderate message with ID 100");
+                assert.strictEqual(decision, 'discard', "should discard the message");
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    // 1. go to moderation box
+    const moderationBox = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.moderation.localId
+        }"]
+    `);
+    assert.ok(
+        moderationBox,
+        "should display the moderation box"
+    );
+
+    await afterNextRender(() => moderationBox.click());
+    const pendingMessage = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.ok(
+        pendingMessage,
+        "should display the message to moderate"
+    );
+
+    const discardButton = pendingMessage.querySelector(`
+        :scope .o_Message_moderationAction.o-discard
+    `);
+    assert.ok(
+        discardButton,
+        "should display the discard button"
+    );
+
+    await afterNextRender(() => discardButton.click());
+    const dialog = document.querySelector('.o_ModerationDiscardDialog');
+    assert.ok(
+        dialog,
+        "a dialog should be prompt to the moderator on click discard"
+    );
+    assert.strictEqual(
+        dialog.querySelector('.modal-title').textContent,
+        "Confirmation",
+        "dialog should have correct title"
+    );
+    assert.strictEqual(
+        dialog.textContent,
+        "Confirmation×You are going to discard 1 message.Do you confirm the action?DiscardCancel",
+        "should warn the user on discard action"
+    );
+
+    const confirmDiscard = dialog.querySelector(':scope .o-discard');
+    assert.ok(
+        confirmDiscard,
+        "should have discard button"
+    );
+    assert.strictEqual(
+        confirmDiscard.textContent,
+        "Discard"
+    );
+
+    await afterNextRender(() => confirmDiscard.click());
+    assert.verifySteps(['moderate']);
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_emptyTitle',
+        "should now have no message displayed in moderation box"
+    );
+
+    // 2. go to channel 'general'
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        "should display the general channel"
+    );
+
+    await afterNextRender(() => channel.click());
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should now have no message in channel"
+    );
+});
+
+QUnit.test('as author, send message in moderated channel', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        moderation: true, // channel must be moderated to test the feature
+        name: "general", // random name, will be asserted in the test
+    });
+    await this.start();
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        "should display the general channel"
+    );
+
+    // go to channel 'general'
+    await afterNextRender(() => channel.click());
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should have no message in channel"
+    );
+
+    // post a message
+    await afterNextRender(() => {
+        const textInput = document.querySelector('.o_ComposerTextInput_textarea');
+        textInput.focus();
+        document.execCommand('insertText', false, "Some Text");
+    });
+    await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click());
+    const messagePending = document.querySelector('.o_Message_moderationPending');
+    assert.ok(
+        messagePending,
+        "should display the pending message with pending info"
+    );
+    assert.hasClass(
+        messagePending,
+        'o-author',
+        "the message should be pending moderation as author"
+    );
+});
+
+QUnit.test('as author, sent message accepted in moderated channel', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        id: 100, // random unique id, will be referenced in the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending
+        res_id: 20, // id of the channel
+    });
+    await this.start();
+
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        "should display the general channel"
+    );
+
+    await afterNextRender(() => channel.click());
+    const messagePending = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+        .o_Message_moderationPending
+    `);
+    assert.ok(
+        messagePending,
+        "should display the pending message with pending info"
+    );
+    assert.hasClass(
+        messagePending,
+        'o-author',
+        "the message should be pending moderation as author"
+    );
+
+    // simulate accepted message
+    await afterNextRender(() => {
+        const messageData = {
+            id: 100,
+            moderation_status: 'accepted',
+        };
+        const notification = [[false, 'mail.channel', 20], messageData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+
+    // check message is accepted
+    const message = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.ok(
+        message,
+        "should still display the message"
+    );
+    assert.containsNone(
+        message,
+        '.o_Message_moderationPending',
+        "the message should not be in pending moderation anymore"
+    );
+});
+
+QUnit.test('as author, sent message rejected in moderated channel', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        moderation: true, // for consistency, but not used in the scope of this test
+        name: "general", // random name, will be asserted in the test
+    });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        id: 100, // random unique id, will be referenced in the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending
+        res_id: 20, // id of the channel
+    });
+    await this.start();
+
+    const channel = document.querySelector(`
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.ok(
+        channel,
+        "should display the general channel"
+    );
+
+    await afterNextRender(() => channel.click());
+    const messagePending = document.querySelector(`
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+        .o_Message_moderationPending
+    `);
+    assert.ok(
+        messagePending,
+        "should display the pending message with pending info"
+    );
+    assert.hasClass(
+        messagePending,
+        'o-author',
+        "the message should be pending moderation as author"
+    );
+
+    // simulate reject from moderator
+    await afterNextRender(() => {
+        const notifData = {
+            type: 'deletion',
+            message_ids: [100],
+        };
+        const notification = [[false, 'res.partner', this.env.messaging.currentPartner.id], notifData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    // check no message
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "message should be removed from channel after reject"
+    );
+});
+
+QUnit.test('as moderator, pending moderation message accessibility', async function (assert) {
+    // pending moderation message should appear in moderation box and in origin thread
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // channel must be moderated to test the feature
+    });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        id: 100, // random unique id, will be referenced in the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending
+        res_id: 20, // id of the channel
+    });
+    await this.start();
+
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.moderation.localId
+            }"]
+        `),
+        "should display the moderation box in the sidebar"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"]
+        `).click()
+    );
+    const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 100 });
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${message.localId}"]`,
+        "the pending moderation message should be in the channel"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.moderation.localId
+            }"]
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${message.localId}"]`,
+        "the pending moderation message should be in moderation box"
+    );
+});
+
+QUnit.test('as author, pending moderation message should appear in origin thread', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        moderation: true, // channel must be moderated to test the feature
+    });
+    this.data['mail.message'].records.push({
+        author_id: this.data.currentPartnerId, // test as author of message
+        body: "not empty",
+        id: 100, // random unique id, will be referenced in the test
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending
+        res_id: 20, // id of the channel
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' });
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"]
+        `).click()
+    );
+    const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 100 });
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${message.localId}"]`,
+        "the pending moderation message should be in the channel"
+    );
+});
+
+QUnit.test('as moderator, new pending moderation message posted by someone else', async function (assert) {
+    // the message should appear in origin thread and moderation box if I moderate it
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // channel must be moderated to test the feature
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' });
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"]
+        `).click()
+    );
+    assert.containsNone(
+        document.body,
+        `.o_Message`,
+        "should have no message in the channel initially"
+    );
+
+    // simulate receiving the message
+    const messageData = {
+        author_id: [10, 'john doe'], // random id, different than current partner
+        body: "not empty",
+        channel_ids: [], // server do NOT return channel_id of the message if pending moderation
+        id: 1, // random unique id
+        model: 'mail.channel', // expected value to link message to channel
+        moderation_status: 'pending_moderation', // message is expected to be pending
+        res_id: 20, // id of the channel
+    };
+    await afterNextRender(() => {
+        const notifications = [[
+            ['my-db', 'res.partner', this.env.messaging.currentPartner.id],
+            { type: 'moderator', message: messageData },
+        ]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 1 });
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${message.localId}"]`,
+        "the pending moderation message should be in the channel"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.moderation.localId
+            }"]
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${message.localId}"]`,
+        "the pending moderation message should be in moderation box"
+    );
+});
+
+QUnit.test('accept multiple moderation messages', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // channel must be moderated to test the feature
+    });
+    this.data['mail.message'].records.push(
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        },
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        },
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        }
+    );
+
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_moderation',
+            },
+        },
+    });
+
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        3,
+        "should initially display 3 messages"
+    );
+
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_Message_checkbox')[0].click();
+        document.querySelectorAll('.o_Message_checkbox')[1].click();
+    });
+    assert.containsN(
+        document.body,
+        '.o_Message_checkbox:checked',
+        2,
+        "2 messages should have been checked after clicking on their respective checkbox"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        'o_hidden',
+        "global accept button should be displayed as two messages are selected"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click()
+    );
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        1,
+        "should display 1 message as the 2 others have been accepted"
+    );
+    assert.hasClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        'o_hidden',
+        "global accept button should no longer be displayed as messages have been unselected"
+    );
+});
+
+QUnit.test('accept multiple moderation messages after having accepted other messages', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message and will be referenced in the test
+        is_moderator: true, // current user is expected to be moderator of channel
+        moderation: true, // channel must be moderated to test the feature
+    });
+    this.data['mail.message'].records.push(
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        },
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        },
+        {
+            body: "not empty",
+            model: 'mail.channel',
+            moderation_status: 'pending_moderation',
+            res_id: 20,
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_moderation',
+            },
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        3,
+        "should initially display 3 messages"
+    );
+
+    await afterNextRender(() => {
+        document.querySelectorAll('.o_Message_checkbox')[0].click();
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click()
+    );
+    await afterNextRender(() => document.querySelectorAll('.o_Message_checkbox')[0].click());
+    assert.containsOnce(
+        document.body,
+        '.o_Message_checkbox:checked',
+        "a message should have been checked after clicking on its checkbox"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        'o_hidden',
+        "global accept button should be displayed as a message is selected"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display only one message left after the two others has been accepted"
+    );
+    assert.hasClass(
+        document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'),
+        'o_hidden',
+        "global accept button should no longer be displayed as message has been unselected"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js
new file mode 100644
index 00000000..a24ce411
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js
@@ -0,0 +1,238 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_pinned_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_pinned_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('sidebar: pinned channel 1: init with one pinned channel', async function (assert) {
+    assert.expect(2);
+
+    // channel that is expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        `.o_Discuss_thread[data-thread-local-id="${this.env.messaging.inbox.localId}"]`,
+        "The Inbox is opened in discuss"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_DiscussSidebarItem[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 20,
+                model: 'mail.channel',
+            }).localId
+        }"]`,
+        "should have the only channel of which user is member in discuss sidebar"
+    );
+});
+
+QUnit.test('sidebar: pinned channel 2: open pinned channel', async function (assert) {
+    assert.expect(1);
+
+    // channel that is expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+
+    const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${
+            threadGeneral.localId
+        }"]`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Discuss_thread[data-thread-local-id="${threadGeneral.localId}"]`,
+        "The channel #General is displayed in discuss"
+    );
+});
+
+QUnit.test('sidebar: pinned channel 3: open pinned channel and unpin it', async function (assert) {
+    assert.expect(8);
+
+    // channel that is expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({
+        id: 20,
+        is_minimized: true,
+        state: 'open',
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'execute_command') {
+                assert.step('execute_command');
+                assert.deepEqual(args.args[0], [20],
+                    "The right id is sent to the server to remove"
+                );
+                assert.strictEqual(args.kwargs.command, 'leave',
+                    "The right command is sent to the server"
+                );
+            }
+            if (args.method === 'channel_fold') {
+                assert.step('channel_fold');
+            }
+            return this._super(...arguments);
+        },
+    });
+
+    const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${
+            threadGeneral.localId
+        }"]`).click()
+    );
+    assert.verifySteps([], "neither channel_fold nor execute_command are called yet");
+    await afterNextRender(() =>
+        document.querySelector('.o_DiscussSidebarItem_commandLeave').click()
+    );
+    assert.verifySteps(
+        [
+            'channel_fold',
+            'execute_command'
+        ],
+        "both channel_fold and execute_command have been called when unpinning a channel"
+    );
+    assert.containsNone(
+        document.body,
+        `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`,
+        "The channel must have been removed from discuss sidebar"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Discuss_noThread',
+        "should have no thread opened in discuss"
+    );
+});
+
+QUnit.test('sidebar: unpin channel from bus', async function (assert) {
+    assert.expect(5);
+
+    // channel that is expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+
+    assert.containsOnce(
+        document.body,
+        `.o_Discuss_thread[data-thread-local-id="${this.env.messaging.inbox.localId}"]`,
+        "The Inbox is opened in discuss"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`,
+        "1 channel is present in discuss sidebar and it is 'general'"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${
+            threadGeneral.localId
+        }"]`).click()
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Discuss_thread[data-thread-local-id="${threadGeneral.localId}"]`,
+        "The channel #General is opened in discuss"
+    );
+
+    // Simulate receiving a leave channel notification
+    // (e.g. from user interaction from another device or browser tab)
+    await afterNextRender(() => {
+        const notif = [
+            ["dbName", 'res.partner', this.env.messaging.currentPartner.id],
+            {
+                channel_type: 'channel',
+                id: 20,
+                info: 'unsubscribe',
+                name: "General",
+                public: 'public',
+                state: 'open',
+            }
+        ];
+        this.env.services.bus_service.trigger('notification', [notif]);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Discuss_noThread',
+        "should have no thread opened in discuss"
+    );
+    assert.containsNone(
+        document.body,
+        `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`,
+        "The channel must have been removed from discuss sidebar"
+    );
+});
+
+QUnit.test('[technical] sidebar: channel group_based_subscription: mandatorily pinned', async function (assert) {
+    assert.expect(2);
+
+    // FIXME: The following is admittedly odd.
+    // Fixing it should entail a deeper reflexion on the group_based_subscription
+    // and is_pinned functionalities, especially in python.
+    // task-2284357
+
+    // channel that is expected to be found in the sidebar
+    this.data['mail.channel'].records.push({
+        group_based_subscription: true, // expected value for this test
+        id: 20, // random unique id, will be referenced in the test
+        is_pinned: false, // expected value for this test
+    });
+    await this.start();
+    const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    assert.containsOnce(
+        document.body,
+        `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`,
+        "The channel #General is in discuss sidebar"
+    );
+    assert.containsNone(
+        document.body,
+        'o_DiscussSidebarItem_commandLeave',
+        "The group_based_subscription channel is not unpinnable"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js
new file mode 100644
index 00000000..34c884eb
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js
@@ -0,0 +1,163 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_sidebar_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');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_sidebar_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('sidebar find shows channels matching search term', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        channel_partner_ids: [],
+        channel_type: 'channel',
+        id: 20,
+        members: [],
+        name: 'test',
+        public: 'public',
+    });
+    const searchReadDef = makeDeferred();
+    await this.start({
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'search_read') {
+                searchReadDef.resolve();
+            }
+            return res;
+        },
+    });
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebar_groupHeaderItemAdd`).click()
+    );
+    document.querySelector(`.o_DiscussSidebar_itemNew`).focus();
+    document.execCommand('insertText', false, "test");
+    document.querySelector(`.o_DiscussSidebar_itemNew`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_DiscussSidebar_itemNew`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+
+    await searchReadDef;
+    await nextAnimationFrame(); // ensures search_read rpc is rendered.
+    const results = document.querySelectorAll('.ui-autocomplete .ui-menu-item a');
+    assert.ok(
+        results,
+        "should have autocomplete suggestion after typing on 'find or create channel' input"
+    );
+    assert.strictEqual(
+        results.length,
+        // When searching for a single existing channel, the results list will have at least 3 lines:
+        // One for the existing channel itself
+        // One for creating a public channel with the search term
+        // One for creating a private channel with the search term
+        3
+    );
+    assert.strictEqual(
+        results[0].textContent,
+        "test",
+        "autocomplete suggestion should target the channel matching search term"
+    );
+});
+
+QUnit.test('sidebar find shows channels matching search term even when user is member', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        channel_partner_ids: [this.data.currentPartnerId],
+        channel_type: 'channel',
+        id: 20,
+        members: [this.data.currentPartnerId],
+        name: 'test',
+        public: 'public',
+    });
+    const searchReadDef = makeDeferred();
+    await this.start({
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'search_read') {
+                searchReadDef.resolve();
+            }
+            return res;
+        },
+    });
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebar_groupHeaderItemAdd`).click()
+    );
+    document.querySelector(`.o_DiscussSidebar_itemNew`).focus();
+    document.execCommand('insertText', false, "test");
+    document.querySelector(`.o_DiscussSidebar_itemNew`)
+        .dispatchEvent(new window.KeyboardEvent('keydown'));
+    document.querySelector(`.o_DiscussSidebar_itemNew`)
+        .dispatchEvent(new window.KeyboardEvent('keyup'));
+
+    await searchReadDef;
+    await nextAnimationFrame();
+    const results = document.querySelectorAll('.ui-autocomplete .ui-menu-item a');
+    assert.ok(
+        results,
+        "should have autocomplete suggestion after typing on 'find or create channel' input"
+    );
+    assert.strictEqual(
+        results.length,
+        // When searching for a single existing channel, the results list will have at least 3 lines:
+        // One for the existing channel itself
+        // One for creating a public channel with the search term
+        // One for creating a private channel with the search term
+        3
+    );
+    assert.strictEqual(
+        results[0].textContent,
+        "test",
+        "autocomplete suggestion should target the channel matching search term even if user is member"
+    );
+});
+
+QUnit.test('sidebar channels should be ordered case insensitive alphabetically', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push(
+        { id: 19, name: "Xyz" },
+        { id: 20, name: "abc" },
+        { id: 21, name: "Abc" },
+        { id: 22, name: "Xyz" }
+    );
+    await this.start();
+    const results = document.querySelectorAll('.o_DiscussSidebar_groupChannel .o_DiscussSidebarItem_name');
+    assert.deepEqual(
+        [results[0].textContent, results[1].textContent, results[2].textContent, results[3].textContent],
+        ["abc", "Abc", "Xyz", "Xyz"],
+        "Channel name should be in case insensitive alphabetical order"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss/tests/discuss_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_tests.js
new file mode 100644
index 00000000..dc2005e5
--- /dev/null
+++ b/addons/mail/static/src/components/discuss/tests/discuss_tests.js
@@ -0,0 +1,4447 @@
+odoo.define('mail/static/src/components/discuss/tests/discuss_tests.js', function (require) {
+'use strict';
+
+const BusService = require('bus.BusService');
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+const { makeTestPromise, file: { createFile, inputFiles } } = require('web.test_utils');
+
+const {
+    applyFilter,
+    toggleAddCustomFilter,
+    toggleFilterMenu,
+} = require('web.test_utils_control_panel');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss', {}, function () {
+QUnit.module('discuss_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign({}, params, {
+                autoOpenDiscuss: true,
+                data: this.data,
+                hasDiscuss: true,
+            }));
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('messaging not initialized', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        async mockRPC(route) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await makeTestPromise(); // simulate messaging never initialized
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'created',
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_messagingNotInitialized').length,
+        1,
+        "should display messaging not initialized"
+    );
+});
+
+QUnit.test('messaging becomes initialized', async function (assert) {
+    assert.expect(2);
+
+    const messagingInitializedProm = makeTestPromise();
+
+    await this.start({
+        async mockRPC(route) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await messagingInitializedProm;
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'created',
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_messagingNotInitialized').length,
+        1,
+        "should display messaging not initialized"
+    );
+
+    await afterNextRender(() => messagingInitializedProm.resolve());
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_messagingNotInitialized').length,
+        0,
+        "should no longer display messaging not initialized"
+    );
+});
+
+QUnit.test('basic rendering', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_sidebar').length,
+        1,
+        "should have a sidebar section"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_content').length,
+        1,
+        "should have content section"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_thread').length,
+        1,
+        "should have thread section inside content"
+    );
+    assert.ok(
+        document.querySelector('.o_Discuss_thread').classList.contains('o_ThreadView'),
+        "thread section should use ThreadView component"
+    );
+});
+
+QUnit.test('basic rendering: sidebar', async function (assert) {
+    assert.expect(20);
+
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_group`).length,
+        3,
+        "should have 3 groups in sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupMailbox`).length,
+        1,
+        "should have group 'Mailbox' in sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupMailbox .o_DiscussSidebar_groupHeader
+        `).length,
+        0,
+        "mailbox category should not have any header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupMailbox .o_DiscussSidebar_item
+        `).length,
+        3,
+        "should have 3 mailbox items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupMailbox
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).length,
+        1,
+        "should have inbox mailbox item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupMailbox
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).length,
+        1,
+        "should have starred mailbox item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupMailbox
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).length,
+        1,
+        "should have history mailbox item"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_sidebar .o_DiscussSidebar_separator`).length,
+        1,
+        "should have separator (between mailboxes and channels, but that's not tested)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel`).length,
+        1,
+        "should have group 'Channel' in sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupHeader
+        `).length,
+        1,
+        "channel category should have a header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupTitle
+        `).length,
+        1,
+        "should have title in channel header"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupTitle
+        `).textContent.trim(),
+        "Channels"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_list`).length,
+        1,
+        "channel category should list items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        0,
+        "channel category should have no item by default"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat`).length,
+        1,
+        "should have group 'Chat' in sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_groupHeader`).length,
+        1,
+        "channel category should have a header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_groupTitle`).length,
+        1,
+        "should have title in chat header"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChat .o_DiscussSidebar_groupTitle
+        `).textContent.trim(),
+        "Direct Messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_list`).length,
+        1,
+        "chat category should list items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length,
+        0,
+        "chat category should have no item by default"
+    );
+});
+
+QUnit.test('sidebar: basic mailbox rendering', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const inbox = document.querySelector(`
+        .o_DiscussSidebar_groupMailbox
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.inbox.localId
+        }"]
+    `);
+    assert.strictEqual(
+        inbox.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length,
+        1,
+        "mailbox should have active indicator"
+    );
+    assert.strictEqual(
+        inbox.querySelectorAll(`:scope .o_ThreadIcon`).length,
+        1,
+        "mailbox should have an icon"
+    );
+    assert.strictEqual(
+        inbox.querySelectorAll(`:scope .o_ThreadIcon_mailboxInbox`).length,
+        1,
+        "inbox should have 'inbox' icon"
+    );
+    assert.strictEqual(
+        inbox.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length,
+        1,
+        "mailbox should have a name"
+    );
+    assert.strictEqual(
+        inbox.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "Inbox",
+        "inbox should have name 'Inbox'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "should have no counter when equal to 0 (default value)"
+    );
+});
+
+QUnit.test('sidebar: default active inbox', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const inbox = document.querySelector(`
+        .o_DiscussSidebar_groupMailbox
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.messaging.inbox.localId
+        }"]
+    `);
+    assert.ok(
+        inbox.querySelector(`
+            :scope .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "inbox should be active by default"
+    );
+});
+
+QUnit.test('sidebar: change item', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "inbox should be active by default"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "starred should be inactive by default"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).click()
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "inbox mailbox should become inactive"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "starred mailbox should become active");
+});
+
+QUnit.test('sidebar: inbox with counter', async function (assert) {
+    assert.expect(2);
+
+    // notification expected to be counted at init_messaging
+    this.data['mail.notification'].records.push({ res_partner_id: this.data.currentPartnerId });
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        1,
+        "should display a counter (= have a counter when different from 0)"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        "1",
+        "should have counter value"
+    );
+});
+
+QUnit.test('sidebar: add channel', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_groupHeaderItemAdd
+        `).length,
+        1,
+        "should be able to add channel from header"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_groupHeaderItemAdd
+        `).title,
+        "Add or join a channel");
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupHeaderItemAdd
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_itemNew`).length,
+        1,
+        "should have item to add a new channel"
+    );
+});
+
+QUnit.test('sidebar: basic channel rendering', async function (assert) {
+    assert.expect(14);
+
+    // channel expected to be found in the sidebar,
+    // with a random unique id and name that  will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, name: "General" });
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        1,
+        "should have one channel item");
+    let channel = document.querySelector(`
+        .o_DiscussSidebar_groupChannel
+        .o_DiscussSidebar_item
+    `);
+    assert.strictEqual(
+        channel.dataset.threadLocalId,
+        this.env.models['mail.thread'].findFromIdentifyingData({
+            id: 20,
+            model: 'mail.channel',
+        }).localId,
+        "should have channel with Id 20"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length,
+        1,
+        "should have active indicator"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator.o-item-active`).length,
+        0,
+        "should not be active by default"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_ThreadIcon`).length,
+        1,
+        "should have an icon"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length,
+        1,
+        "should have a name"
+    );
+    assert.strictEqual(
+        channel.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "General",
+        "should have name value"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commands`).length,
+        1,
+        "should have commands"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length,
+        2,
+        "should have 2 commands"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandSettings`).length,
+        1,
+        "should have 'settings' command"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandLeave`).length,
+        1,
+        "should have 'leave' command"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length,
+        0,
+        "should have a counter when equals 0 (default value)"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).click()
+    );
+    channel = document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator.o-item-active`).length,
+        1,
+        "channel should become active"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_ThreadView_composer`).length,
+        1,
+        "should have composer section inside thread content (can post message in channel)"
+    );
+});
+
+QUnit.test('sidebar: channel rendering with needaction counter', async function (assert) {
+    assert.expect(5);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be used to link message
+    this.data['mail.channel'].records.push({ id: 20 });
+    // expected needaction message
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [20], // link message to channel
+        id: 100, // random unique id, useful to link notification
+    });
+    // expected needaction notification
+    this.data['mail.notification'].records.push({
+        mail_message_id: 100, // id of related message
+        res_partner_id: this.data.currentPartnerId, // must be for current partner
+    });
+    await this.start();
+    const channel = document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length,
+        1,
+        "should have a counter when different from 0"
+    );
+    assert.strictEqual(
+        channel.querySelector(`:scope .o_DiscussSidebarItem_counter`).textContent,
+        "1",
+        "should have counter value"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length,
+        1,
+        "should have single command"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandSettings`).length,
+        1,
+        "should have 'settings' command"
+    );
+    assert.strictEqual(
+        channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandLeave`).length,
+        0,
+        "should not have 'leave' command"
+    );
+});
+
+QUnit.test('sidebar: mailing channel', async function (assert) {
+    assert.expect(1);
+
+    // channel that is expected to be in the sidebar, with proper mass_mailing value
+    this.data['mail.channel'].records.push({ mass_mailing: true });
+    await this.start();
+    assert.containsOnce(
+        document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`),
+        '.fa.fa-envelope-o',
+        "should have an icon to indicate that the channel is a mailing channel"
+    );
+});
+
+QUnit.test('sidebar: public/private channel rendering', async function (assert) {
+    assert.expect(5);
+
+    // channels that are expected to be found in the sidebar (one public, one private)
+    // with random unique id and name that will be referenced in the test
+    this.data['mail.channel'].records.push(
+        { id: 100, name: "channel1", public: 'public', },
+        { id: 101, name: "channel2", public: 'private' }
+    );
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        2,
+        "should have 2 channel items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 100,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have channel1 (Id 100)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 101,
+                    model: 'mail.channel'
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have channel2 (Id 101)"
+    );
+    const channel1 = document.querySelector(`
+        .o_DiscussSidebar_groupChannel
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 100,
+                model: 'mail.channel'
+            }).localId
+        }"]
+    `);
+    const channel2 = document.querySelector(`
+        .o_DiscussSidebar_groupChannel
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 101,
+                model: 'mail.channel'
+            }).localId
+        }"]
+    `);
+    assert.strictEqual(
+        channel1.querySelectorAll(`:scope .o_ThreadIcon_channelPublic`).length,
+        1,
+        "channel1 (public) has hashtag icon"
+    );
+    assert.strictEqual(
+        channel2.querySelectorAll(`:scope .o_ThreadIcon_channelPrivate`).length,
+        1,
+        "channel2 (private) has lock icon"
+    );
+});
+
+QUnit.test('sidebar: basic chat rendering', async function (assert) {
+    assert.expect(11);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat and a random name that will be asserted in the test
+    this.data['res.partner'].records.push({ id: 17, name: "Demo" });
+    // chat expected to be found in the sidebar
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat', // testing a chat is the goal of the test
+        id: 10, // random unique id, will be referenced in the test
+        members: [this.data.currentPartnerId, 17], // expected partners
+        public: 'private', // expected value for testing a chat
+    });
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length,
+        1,
+        "should have one chat item"
+    );
+    const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        chat.dataset.threadLocalId,
+        this.env.models['mail.thread'].findFromIdentifyingData({
+            id: 10,
+            model: 'mail.channel'
+        }).localId,
+        "should have chat with Id 10"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length,
+        1,
+        "should have active indicator"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_ThreadIcon`).length,
+        1,
+        "should have an icon"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length,
+        1,
+        "should have a name"
+    );
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "Demo",
+        "should have correspondent name as name"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commands`).length,
+        1,
+        "should have commands"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length,
+        2,
+        "should have 2 commands"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandRename`).length,
+        1,
+        "should have 'rename' command"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandUnpin`).length,
+        1,
+        "should have 'unpin' command"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length,
+        0,
+        "should have a counter when equals 0 (default value)"
+    );
+});
+
+QUnit.test('sidebar: chat rendering with unread counter', async function (assert) {
+    assert.expect(5);
+
+    // chat expected to be found in the sidebar
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat', // testing a chat is the goal of the test
+        id: 10, // random unique id, will be referenced in the test
+        message_unread_counter: 100,
+        public: 'private', // expected value for testing a chat
+    });
+    await this.start();
+    const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length,
+        1,
+        "should have a counter when different from 0"
+    );
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_counter`).textContent,
+        "100",
+        "should have counter value"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length,
+        1,
+        "should have single command"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandRename`).length,
+        1,
+        "should have 'rename' command"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandUnpin`).length,
+        0,
+        "should not have 'unpin' command"
+    );
+});
+
+QUnit.test('sidebar: chat im_status rendering', async function (assert) {
+    assert.expect(7);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat, and various im_status values to assert
+    this.data['res.partner'].records.push(
+        { id: 101, im_status: 'offline', name: "Partner1" },
+        { id: 102, im_status: 'online', name: "Partner2" },
+        { id: 103, im_status: 'away', name: "Partner3" }
+    );
+    // chats expected to be found in the sidebar
+    this.data['mail.channel'].records.push(
+        {
+            channel_type: 'chat', // testing a chat is the goal of the test
+            id: 11, // random unique id, will be referenced in the test
+            members: [this.data.currentPartnerId, 101], // expected partners
+            public: 'private', // expected value for testing a chat
+        },
+        {
+            channel_type: 'chat', // testing a chat is the goal of the test
+            id: 12, // random unique id, will be referenced in the test
+            members: [this.data.currentPartnerId, 102], // expected partners
+            public: 'private', // expected value for testing a chat
+        },
+        {
+            channel_type: 'chat', // testing a chat is the goal of the test
+            id: 13, // random unique id, will be referenced in the test
+            members: [this.data.currentPartnerId, 103], // expected partners
+            public: 'private', // expected value for testing a chat
+        }
+    );
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length,
+        3,
+        "should have 3 chat items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChat
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 11,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have Partner1 (Id 11)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChat
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 12,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have Partner2 (Id 12)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_groupChat
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 13,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have Partner3 (Id 13)"
+    );
+    const chat1 = document.querySelector(`
+        .o_DiscussSidebar_groupChat
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 11,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    const chat2 = document.querySelector(`
+        .o_DiscussSidebar_groupChat
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 12,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    const chat3 = document.querySelector(`
+        .o_DiscussSidebar_groupChat
+        .o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 13,
+                model: 'mail.channel',
+            }).localId
+        }"]
+    `);
+    assert.strictEqual(
+        chat1.querySelectorAll(`:scope .o_ThreadIcon_offline`).length,
+        1,
+        "chat1 should have offline icon"
+    );
+    assert.strictEqual(
+        chat2.querySelectorAll(`:scope .o_ThreadIcon_online`).length,
+        1,
+        "chat2 should have online icon"
+    );
+    assert.strictEqual(
+        chat3.querySelectorAll(`:scope .o_ThreadIcon_away`).length,
+        1,
+        "chat3 should have away icon"
+    );
+});
+
+QUnit.test('sidebar: chat custom name', async function (assert) {
+    assert.expect(1);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat, and a random name not used in the scope of this test but set for consistency
+    this.data['res.partner'].records.push({ id: 101, name: "Marc Demo" });
+    // chat expected to be found in the sidebar
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat', // testing a chat is the goal of the test
+        custom_channel_name: "Marc", // testing a custom name is the goal of the test
+        members: [this.data.currentPartnerId, 101], // expected partners
+        public: 'private', // expected value for testing a chat
+    });
+    await this.start();
+    const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "Marc",
+        "chat should have custom name as name"
+    );
+});
+
+QUnit.test('sidebar: rename chat', async function (assert) {
+    assert.expect(8);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat, and a random name not used in the scope of this test but set for consistency
+    this.data['res.partner'].records.push({ id: 101, name: "Marc Demo" });
+    // chat expected to be found in the sidebar
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat', // testing a chat is the goal of the test
+        custom_channel_name: "Marc", // testing a custom name is the goal of the test
+        members: [this.data.currentPartnerId, 101], // expected partners
+        public: 'private', // expected value for testing a chat
+    });
+    await this.start();
+    const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`);
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "Marc",
+        "chat should have custom name as name"
+    );
+    assert.notOk(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'),
+        "chat name should not be editable"
+    );
+
+    await afterNextRender(() =>
+        chat.querySelector(`:scope .o_DiscussSidebarItem_commandRename`).click()
+    );
+    assert.ok(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'),
+        "chat should have editable name"
+    );
+    assert.strictEqual(
+        chat.querySelectorAll(`:scope .o_DiscussSidebarItem_nameInput`).length,
+        1,
+        "chat should have editable name input"
+    );
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).value,
+        "Marc",
+        "editable name input should have custom chat name as value by default"
+    );
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).placeholder,
+        "Marc Demo",
+        "editable name input should have partner name as placeholder"
+    );
+
+    await afterNextRender(() => {
+        chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).value = "Demo";
+        const kevt = new window.KeyboardEvent('keydown', { key: "Enter" });
+        chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).dispatchEvent(kevt);
+    });
+    assert.notOk(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'),
+        "chat should no longer show editable name"
+    );
+    assert.strictEqual(
+        chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent,
+        "Demo",
+        "chat should have renamed name as name"
+    );
+});
+
+QUnit.test('default thread rendering', async function (assert) {
+    assert.expect(16);
+
+    // channel expected to be found in the sidebar,
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).length,
+        1,
+        "should have inbox mailbox in the sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).length,
+        1,
+        "should have starred mailbox in the sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).length,
+        1,
+        "should have history mailbox in the sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have channel 20 in the sidebar"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).classList.contains('o-active'),
+        "inbox mailbox should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).length,
+        1,
+        "should have empty thread in inbox"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).textContent.trim(),
+        "Congratulations, your inbox is empty  New messages appear here."
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).classList.contains('o-active'),
+        "starred mailbox should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).length,
+        1,
+        "should have empty thread in starred"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).textContent.trim(),
+        "No starred messages  You can mark any message as 'starred', and it shows up in this mailbox."
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).classList.contains('o-active'),
+        "history mailbox should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).length,
+        1,
+        "should have empty thread in starred"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Discuss_thread .o_MessageList_empty`).textContent.trim(),
+        "No history messages  Messages marked as read will appear in the history."
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).classList.contains('o-active'),
+        "channel 20 should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).length,
+        1,
+        "should have empty thread in starred"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty
+        `).textContent.trim(),
+        "There are no messages in this conversation."
+    );
+});
+
+QUnit.test('initially load messages from inbox', async function (assert) {
+    assert.expect(4);
+
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_fetch') {
+                assert.step('message_fetch');
+                assert.strictEqual(
+                    args.kwargs.limit,
+                    30,
+                    "should fetch up to 30 messages"
+                );
+                assert.deepEqual(
+                    args.kwargs.domain,
+                    [["needaction", "=", true]],
+                    "should fetch needaction messages"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.verifySteps(['message_fetch']);
+});
+
+QUnit.test('default select thread in discuss params', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_starred',
+            },
+        }
+    });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "starred mailbox should become active"
+    );
+});
+
+QUnit.test('auto-select thread in discuss context', async function (assert) {
+    assert.expect(1);
+
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.box_starred',
+            },
+        },
+    });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "starred mailbox should become active"
+    );
+});
+
+QUnit.test('load single message from channel initially', async function (assert) {
+    assert.expect(7);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [20],
+        date: "2019-04-20 10:00:00",
+        id: 100,
+        model: 'mail.channel',
+        res_id: 20,
+    });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'message_fetch') {
+                assert.strictEqual(
+                    args.kwargs.limit,
+                    30,
+                    "should fetch up to 30 messages"
+                );
+                assert.deepEqual(
+                    args.kwargs.domain,
+                    [["channel_ids", "in", [20]]],
+                    "should fetch messages from channel"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_ThreadView_messageList`).length,
+        1,
+        "should have list of messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_separatorDate`).length,
+        1,
+        "should have a single date separator" // to check: may be client timezone dependent
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Discuss_thread .o_MessageList_separatorLabelDate`).textContent,
+        "April 20, 2019",
+        "should display date day of messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length,
+        1,
+        "should have a single message"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_MessageList_message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `).length,
+        1,
+        "should have message with Id 100"
+    );
+});
+
+QUnit.test('open channel from active_id as channel id', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 20,
+            },
+        }
+    });
+    assert.containsOnce(
+        document.body,
+        `
+            .o_Discuss_thread[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' }).localId
+            }"]
+        `,
+        "should have channel with ID 20 open in Discuss when providing active_id 20"
+    );
+});
+
+QUnit.test('basic rendering of message', async function (assert) {
+    // AKU TODO: should be in message-only tests
+    assert.expect(13);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    // partner to be set as author, with a random unique id that will be used to
+    // link message and a random name that will be asserted in the test
+    this.data['res.partner'].records.push({ id: 11, name: "Demo" });
+    this.data['mail.message'].records.push({
+        author_id: 11,
+        body: "<p>body</p>",
+        channel_ids: [20],
+        date: "2019-04-20 10:00:00",
+        id: 100,
+        model: 'mail.channel',
+        res_id: 20,
+    });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    const message = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+        .o_MessageList_message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_sidebar`).length,
+        1,
+        "should have message sidebar of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_authorAvatar`).length,
+        1,
+        "should have author avatar in sidebar of message"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_authorAvatar`).dataset.src,
+        "/web/image/res.partner/11/image_128",
+        "should have url of message in author avatar sidebar"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_core`).length,
+        1,
+        "should have core part of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_header`).length,
+        1,
+        "should have header in core part of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_authorName`).length,
+        1,
+        "should have author name in header of message"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_authorName`).textContent,
+        "Demo",
+        "should have textually author name in header of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_header .o_Message_date`).length,
+        1,
+        "should have date in header of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_header .o_Message_commands`).length,
+        1,
+        "should have commands in header of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_header .o_Message_command`).length,
+        1,
+        "should have a single command in header of message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_commandStar`).length,
+        1,
+        "should have command to star message"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_content`).length,
+        1,
+        "should have content in core part of message"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_content`).textContent.trim(),
+        "body",
+        "should have body of message in content part of message"
+    );
+});
+
+QUnit.test('basic rendering of squashed message', async function (assert) {
+    // messages are squashed when "close", e.g. less than 1 minute has elapsed
+    // from messages of same author and same thread. Note that this should
+    // be working in non-mailboxes
+    // AKU TODO: should be message and/or message list-only tests
+    assert.expect(12);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    // partner to be set as author, with a random unique id that will be used to link message
+    this.data['res.partner'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            author_id: 11, // must be same author as other message
+            body: "<p>body1</p>", // random body, set for consistency
+            channel_ids: [20], // to link message to channel
+            date: "2019-04-20 10:00:00", // date must be within 1 min from other message
+            id: 100, // random unique id, will be referenced in the test
+            message_type: 'comment', // must be a squash-able type-
+            model: 'mail.channel', // to link message to channel
+            res_id: 20, // id of related channel
+        },
+        {
+            author_id: 11, // must be same author as other message
+            body: "<p>body2</p>", // random body, will be asserted in the test
+            channel_ids: [20], // to link message to channel
+            date: "2019-04-20 10:00:30", // date must be within 1 min from other message
+            id: 101, // random unique id, will be referenced in the test
+            message_type: 'comment', // must be a squash-able type
+            model: 'mail.channel', // to link message to channel
+            res_id: 20, // id of related channel
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        2,
+        "should have 2 messages"
+    );
+    const message1 = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+        .o_MessageList_message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    const message2 = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+        .o_MessageList_message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+        }"]
+    `);
+    assert.notOk(
+        message1.classList.contains('o-squashed'),
+        "message 1 should not be squashed"
+    );
+    assert.notOk(
+        message1.querySelector(`:scope .o_Message_sidebar`).classList.contains('o-message-squashed'),
+        "message 1 should not have squashed sidebar"
+    );
+    assert.ok(
+        message2.classList.contains('o-squashed'),
+        "message 2 should be squashed"
+    );
+    assert.ok(
+        message2.querySelector(`:scope .o_Message_sidebar`).classList.contains('o-message-squashed'),
+        "message 2 should have squashed sidebar"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_date`).length,
+        1,
+        "message 2 should have date in sidebar"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_commands`).length,
+        1,
+        "message 2 should have some commands in sidebar"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_commandStar`).length,
+        1,
+        "message 2 should have star command in sidebar"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_core`).length,
+        1,
+        "message 2 should have core part"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_header`).length,
+        0,
+        "message 2 should have a header in core part"
+    );
+    assert.strictEqual(
+        message2.querySelectorAll(`:scope .o_Message_content`).length,
+        1,
+        "message 2 should have some content in core part"
+    );
+    assert.strictEqual(
+        message2.querySelector(`:scope .o_Message_content`).textContent.trim(),
+        "body2",
+        "message 2 should have body in content part"
+    );
+});
+
+QUnit.test('inbox messages are never squashed', async function (assert) {
+    assert.expect(3);
+
+    // partner to be set as author, with a random unique id that will be used to link message
+    this.data['res.partner'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            author_id: 11, // must be same author as other message
+            body: "<p>body1</p>", // random body, set for consistency
+            channel_ids: [20], // to link message to channel
+            date: "2019-04-20 10:00:00", // date must be within 1 min from other message
+            id: 100, // random unique id, will be referenced in the test
+            message_type: 'comment', // must be a squash-able type-
+            model: 'mail.channel', // to link message to channel
+            needaction: true, // necessary for message_fetch domain
+            needaction_partner_ids: [this.data.currentPartnerId], // for consistency
+            res_id: 20, // id of related channel
+        },
+        {
+            author_id: 11, // must be same author as other message
+            body: "<p>body2</p>", // random body, will be asserted in the test
+            channel_ids: [20], // to link message to channel
+            date: "2019-04-20 10:00:30", // date must be within 1 min from other message
+            id: 101, // random unique id, will be referenced in the test
+            message_type: 'comment', // must be a squash-able type
+            model: 'mail.channel', // to link message to channel
+            needaction: true, // necessary for message_fetch domain
+            needaction_partner_ids: [this.data.currentPartnerId], // for consistency
+            res_id: 20, // id of related channel
+        }
+    );
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        2,
+        "should have 2 messages"
+    );
+    const message1 = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+        .o_MessageList_message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    const message2 = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+        .o_MessageList_message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+        }"]
+    `);
+    assert.notOk(
+        message1.classList.contains('o-squashed'),
+        "message 1 should not be squashed"
+    );
+    assert.notOk(
+        message2.classList.contains('o-squashed'),
+        "message 2 should not be squashed"
+    );
+});
+
+QUnit.test('load all messages from channel initially, less than fetch limit (29 < 30)', async function (assert) {
+    // AKU TODO: thread specific test
+    assert.expect(5);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    // partner to be set as author, with a random unique id that will be used to link message
+    this.data['res.partner'].records.push({ id: 11 });
+    for (let i = 28; i >= 0; i--) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+            date: "2019-04-20 10:00:00",
+            model: 'mail.channel',
+            res_id: 20,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'message_fetch') {
+                assert.strictEqual(args.kwargs.limit, 30, "should fetch up to 30 messages");
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorDate
+        `).length,
+        1,
+        "should have a single date separator" // to check: may be client timezone dependent
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorLabelDate
+        `).textContent,
+        "April 20, 2019",
+        "should display date day of messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        29,
+        "should have 29 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore
+        `).length,
+        0,
+        "should not have load more link"
+    );
+});
+
+QUnit.test('load more messages from channel', async function (assert) {
+    // AKU: thread specific test
+    assert.expect(6);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    // partner to be set as author, with a random unique id that will be used to link message
+    this.data['res.partner'].records.push({ id: 11 });
+    for (let i = 0; i < 40; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+            date: "2019-04-20 10:00:00",
+            model: 'mail.channel',
+            res_id: 20,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorDate
+        `).length,
+        1,
+        "should have a single date separator" // to check: may be client timezone dependent
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorLabelDate
+        `).textContent,
+        "April 20, 2019",
+        "should display date day of messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        30,
+        "should have 30 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore
+        `).length,
+        1,
+        "should have load more link"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        40,
+        "should have 40 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore
+        `).length,
+        0,
+        "should not longer have load more link (all messages loaded)"
+    );
+});
+
+QUnit.test('auto-scroll to bottom of thread', async function (assert) {
+    // AKU TODO: thread specific test
+    assert.expect(2);
+
+    // channel expected to be rendered, with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 1; i <= 25; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+            model: 'mail.channel',
+            res_id: 20,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        waitUntilEvent: {
+            eventName: 'o-component-message-list-scrolled',
+            message: "should wait until channel 20 scrolled to its last message initially",
+            predicate: ({ scrollTop, thread }) => {
+                const messageList = document.querySelector('.o_ThreadView_messageList');
+                return (
+                    thread &&
+                    thread.model === 'mail.channel' &&
+                    thread.id === 20 &&
+                    scrollTop === messageList.scrollHeight - messageList.clientHeight
+                );
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        25,
+        "should have 25 messages"
+    );
+    const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+    assert.strictEqual(
+        messageList.scrollTop,
+        messageList.scrollHeight - messageList.clientHeight,
+        "should have scrolled to bottom of thread"
+    );
+});
+
+QUnit.test('load more messages from channel (auto-load on scroll)', async function (assert) {
+    // AKU TODO: thread specific test
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i < 40; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+            model: 'mail.channel',
+            res_id: 20,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        waitUntilEvent: {
+            eventName: 'o-component-message-list-scrolled',
+            message: "should wait until channel 20 scrolled to its last message initially",
+            predicate: ({ scrollTop, thread }) => {
+                const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+                return (
+                    thread &&
+                    thread.model === 'mail.channel' &&
+                    thread.id === 20 &&
+                    scrollTop === messageList.scrollHeight - messageList.clientHeight
+                );
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        30,
+        "should have 30 messages"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => document.querySelector('.o_ThreadView_messageList').scrollTop = 0,
+        message: "should wait until channel 20 loaded more messages after scrolling to top",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'more-messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        40,
+        "should have 40 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Dsiscuss_thread .o_ThreadView_messageList .o_MessageList_loadMore
+        `).length,
+        0,
+        "should not longer have load more link (all messages loaded)"
+    );
+});
+
+QUnit.test('new messages separator [REQUIRE FOCUS]', async function (assert) {
+    // this test requires several messages so that the last message is not
+    // visible. This is necessary in order to display 'new messages' and not
+    // remove from DOM right away from seeing last message.
+    // AKU TODO: thread specific test
+    assert.expect(6);
+
+    // Needed partner & user to allow simulation of message reception
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    // channel expected to be rendered, with a random unique id that will be
+    // referenced in the test and the seen_message_id value set to last message
+    this.data['mail.channel'].records.push({
+        id: 20,
+        seen_message_id: 125,
+        uuid: 'randomuuid',
+    });
+    for (let i = 1; i <= 25; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+            id: 100 + i, // for setting proper value for seen_message_id
+            model: 'mail.channel',
+            res_id: 20,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        waitUntilEvent: {
+            eventName: 'o-component-message-list-scrolled',
+            message: "should wait until channel 20 scrolled to its last message initially",
+            predicate: ({ scrollTop, thread }) => {
+                const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+                return (
+                    thread &&
+                    thread.model === 'mail.channel' &&
+                    thread.id === 20 &&
+                    scrollTop === messageList.scrollHeight - messageList.clientHeight
+                );
+            },
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_MessageList_message',
+        25,
+        "should have 25 messages"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+    // scroll to top
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop = 0;
+        },
+        message: "should wait until channel scrolled to top",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === 0
+            );
+        },
+    });
+    // composer is focused by default, we remove that focus
+    document.querySelector('.o_ComposerTextInput_textarea').blur();
+    // simulate receiving a message
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "hu",
+            uuid: 'randomuuid',
+        },
+    }));
+
+    assert.containsN(
+        document.body,
+        '.o_MessageList_message',
+        26,
+        "should have 26 messages"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should display 'new messages' separator"
+    );
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+            messageList.scrollTop = messageList.scrollHeight - messageList.clientHeight;
+        },
+        message: "should wait until channel scrolled to bottom",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should still display 'new messages' separator as composer is not focused"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerTextInput_textarea').focus()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should no longer display 'new messages' separator (message seen)"
+    );
+});
+
+QUnit.test('restore thread scroll position', async function (assert) {
+    assert.expect(6);
+    // channels expected to be rendered, with random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push(
+        {
+            id: 11,
+        },
+        {
+            id: 12,
+        },
+    );
+    for (let i = 1; i <= 25; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [11],
+            model: 'mail.channel',
+            res_id: 11,
+        });
+    }
+    for (let i = 1; i <= 24; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [12],
+            model: 'mail.channel',
+            res_id: 12,
+        });
+    }
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_11',
+            },
+        },
+        waitUntilEvent: {
+            eventName: 'o-component-message-list-scrolled',
+            message: "should wait until channel 11 scrolled to its last message",
+            predicate: ({ thread }) => {
+                return thread && thread.model === 'mail.channel' && thread.id === 11;
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        25,
+        "should have 25 messages in channel 11"
+    );
+    const initialMessageList = document.querySelector(`
+        .o_Discuss_thread
+        .o_ThreadView_messageList
+    `);
+    assert.strictEqual(
+        initialMessageList.scrollTop,
+        initialMessageList.scrollHeight - initialMessageList.clientHeight,
+        "should have scrolled to bottom of channel 11 initially"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop = 0,
+        message: "should wait until channel 11 changed its scroll position to top",
+        predicate: ({ thread }) => {
+            return thread && thread.model === 'mail.channel' && thread.id === 11;
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop,
+        0,
+        "should have scrolled to top of channel 11",
+    );
+
+    // Ensure scrollIntoView of channel 12 has enough time to complete before
+    // going back to channel 11. Await is needed to prevent the scrollIntoView
+    // initially planned for channel 12 to actually apply on channel 11.
+    // task-2333535
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            // select channel 12
+            document.querySelector(`
+                .o_DiscussSidebar_groupChannel
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 12,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until channel 12 scrolled to its last message",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 12 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message
+        `).length,
+        24,
+        "should have 24 messages in channel 12"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            // select channel 11
+            document.querySelector(`
+                .o_DiscussSidebar_groupChannel
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 11,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until channel 11 restored its scroll position",
+        predicate: ({ scrollTop, thread }) => {
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 11 &&
+                scrollTop === 0
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop,
+        0,
+        "should have recovered scroll position of channel 11 (scroll to top)"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            // select channel 12
+            document.querySelector(`
+                .o_DiscussSidebar_groupChannel
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 12,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until channel 12 recovered its scroll position (to bottom)",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 12 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    const messageList = document.querySelector('.o_ThreadView_messageList');
+    assert.strictEqual(
+        messageList.scrollTop,
+        messageList.scrollHeight - messageList.clientHeight,
+        "should have recovered scroll position of channel 12 (scroll to bottom)"
+    );
+});
+
+QUnit.test('message origin redirect to channel', async function (assert) {
+    assert.expect(15);
+
+    // channels expected to be rendered, with random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 11 }, { id: 12 });
+    this.data['mail.message'].records.push(
+        {
+            body: "not empty",
+            channel_ids: [11, 12],
+            id: 100,
+            model: 'mail.channel',
+            record_name: "channel11",
+            res_id: 11,
+        },
+        {
+            body: "not empty",
+            channel_ids: [11, 12],
+            id: 101,
+            model: 'mail.channel',
+            record_name: "channel12",
+            res_id: 12,
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_11',
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Discuss_thread .o_Message').length,
+        2,
+        "should have 2 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `).length,
+        1,
+        "should have message1 (Id 100)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+        `).length,
+        1,
+        "should have message2 (Id 101)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+            .o_Message_originThread
+        `).length,
+        0,
+        "message1 should not have origin part in channel11 (same origin as channel)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+            .o_Message_originThread
+        `).length,
+        1,
+        "message2 should have origin part (origin is channel12 !== channel11)"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+            .o_Message_originThread
+        `).textContent.trim(),
+        "(from #channel12)",
+        "message2 should display name of origin channel"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+            .o_Message_originThreadLink
+        `).length,
+        1,
+        "message2 should have link to redirect to origin"
+    );
+
+    // click on origin link of message2 (= channel12)
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+            .o_Message_originThreadLink
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 12,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "channel12 should be active channel on redirect from discuss app"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_Message`).length,
+        2,
+        "should have 2 messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `).length,
+        1,
+        "should have message1 (Id 100)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+        `).length,
+        1,
+        "should have message2 (Id 101)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+            .o_Message_originThread
+        `).length,
+        1,
+        "message1 should have origin thread part (= channel11 !== channel12)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+            .o_Message_originThread
+        `).length,
+        0,
+        "message2 should not have origin thread part in channel12 (same as current channel)"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+            .o_Message_originThread
+        `).textContent.trim(),
+        "(from #channel11)",
+        "message1 should display name of origin channel"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+            .o_Message_originThreadLink
+        `).length,
+        1,
+        "message1 should have link to redirect to origin channel"
+    );
+});
+
+QUnit.test('redirect to author (open chat)', async function (assert) {
+    assert.expect(7);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat and a random name that will be asserted in the test
+    this.data['res.partner'].records.push({ id: 7, name: "Demo" });
+    this.data['res.users'].records.push({ partner_id: 7 });
+    this.data['mail.channel'].records.push(
+        // channel expected to be found in the sidebar
+        {
+            id: 1, // random unique id, will be referenced in the test
+            name: "General", // random name, will be asserted in the test
+        },
+        // chat expected to be found in the sidebar
+        {
+            channel_type: 'chat', // testing a chat is the goal of the test
+            id: 10, // random unique id, will be referenced in the test
+            members: [this.data.currentPartnerId, 7], // expected partners
+            public: 'private', // expected value for testing a chat
+        }
+    );
+    this.data['mail.message'].records.push(
+        {
+            author_id: 7,
+            body: "not empty",
+            channel_ids: [1],
+            id: 100,
+            model: 'mail.channel',
+            res_id: 1,
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_1',
+            },
+        },
+    });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 1,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "channel 'General' should be active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChat
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "Chat 'Demo' should not be active"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_Message`).length,
+        1,
+        "should have 1 message"
+    );
+    const msg1 = document.querySelector(`
+        .o_Discuss_thread
+        .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+        }"]
+    `);
+    assert.strictEqual(
+        msg1.querySelectorAll(`:scope .o_Message_authorAvatar`).length,
+        1,
+        "message1 should have author image"
+    );
+    assert.ok(
+        msg1.querySelector(`:scope .o_Message_authorAvatar`).classList.contains('o_redirect'),
+        "message1 should have redirect to author"
+    );
+
+    await afterNextRender(() =>
+        msg1.querySelector(`:scope .o_Message_authorAvatar`).click()
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 1,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "channel 'General' should become inactive after author redirection"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChat
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_activeIndicator
+        `).classList.contains('o-item-active'),
+        "chat 'Demo' should become active after author redirection"
+    );
+});
+
+QUnit.test('sidebar quick search', async function (assert) {
+    // feature enables at 20 or more channels
+    assert.expect(6);
+
+    for (let id = 1; id <= 20; id++) {
+        this.data['mail.channel'].records.push({ id, name: `channel${id}` });
+    }
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        20,
+        "should have 20 channel items"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_sidebar input.o_DiscussSidebar_quickSearch`).length,
+        1,
+        "should have quick search in sidebar"
+    );
+
+    const quickSearch = document.querySelector(`
+        .o_Discuss_sidebar input.o_DiscussSidebar_quickSearch
+    `);
+    await afterNextRender(() => {
+        quickSearch.value = "1";
+        const kevt1 = new window.KeyboardEvent('input');
+        quickSearch.dispatchEvent(kevt1);
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        11,
+        "should have filtered to 11 channel items"
+    );
+
+    await afterNextRender(() => {
+        quickSearch.value = "12";
+        const kevt2 = new window.KeyboardEvent('input');
+        quickSearch.dispatchEvent(kevt2);
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        1,
+        "should have filtered to a single channel item"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_groupChannel .o_DiscussSidebar_item
+        `).dataset.threadLocalId,
+        this.env.models['mail.thread'].findFromIdentifyingData({
+            id: 12,
+            model: 'mail.channel',
+        }).localId,
+        "should have filtered to a single channel item with Id 12"
+    );
+
+    await afterNextRender(() => {
+        quickSearch.value = "123";
+        const kevt3 = new window.KeyboardEvent('input');
+        quickSearch.dispatchEvent(kevt3);
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length,
+        0,
+        "should have filtered to no channel item"
+    );
+});
+
+QUnit.test('basic control panel rendering', async function (assert) {
+    assert.expect(8);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id and name that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, name: "General" });
+    await this.start();
+    assert.strictEqual(
+        document.querySelector(`
+            .o_widget_Discuss .o_control_panel .breadcrumb
+        `).textContent,
+        "Inbox",
+        "display inbox in the breadcrumb"
+    );
+    const markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`);
+    assert.isVisible(
+        markAllReadButton,
+        "should have visible button 'Mark all read' in the control panel of inbox"
+    );
+    assert.ok(
+        markAllReadButton.disabled,
+        "should have disabled button 'Mark all read' in the control panel of inbox (no messages)"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_widget_Discuss .o_control_panel .breadcrumb
+        `).textContent,
+        "Starred",
+        "display starred in the breadcrumb"
+    );
+    const unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`);
+    assert.isVisible(
+        unstarAllButton,
+        "should have visible button 'Unstar all' in the control panel of starred"
+    );
+    assert.ok(
+        unstarAllButton.disabled,
+        "should have disabled button 'Unstar all' in the control panel of starred (no messages)"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).click()
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_widget_Discuss .o_control_panel .breadcrumb
+        `).textContent,
+        "#General",
+        "display general in the breadcrumb"
+    );
+    const inviteButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonInvite`);
+    assert.isVisible(
+        inviteButton,
+        "should have visible button 'Invite' in the control panel of channel"
+    );
+});
+
+QUnit.test('inbox: mark all messages as read', async function (assert) {
+    assert.expect(8);
+
+    // channel expected to be found in the sidebar,
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.message'].records.push(
+        // first expected message
+        {
+            body: "not empty",
+            channel_ids: [20], // link message to channel
+            id: 100, // random unique id, useful to link notification
+            model: 'mail.channel',
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: true,
+            res_id: 20,
+        },
+        // second expected message
+        {
+            body: "not empty",
+            channel_ids: [20], // link message to channel
+            id: 101, // random unique id, useful to link notification
+            model: 'mail.channel',
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: true,
+            res_id: 20,
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // notification to have first message in inbox
+        {
+            mail_message_id: 100, // id of related message
+            res_partner_id: this.data.currentPartnerId, // must be for current partner
+        },
+        // notification to have second message in inbox
+        {
+            mail_message_id: 101, // id of related message
+            res_partner_id: this.data.currentPartnerId, // must be for current partner
+        }
+    );
+    await this.start();
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        "2",
+        "inbox should have counter of 2"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        "2",
+        "channel should have counter of 2"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        2,
+        "should have 2 messages in inbox"
+    );
+    let markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`);
+    assert.notOk(
+        markAllReadButton.disabled,
+        "should have enabled button 'Mark all read' in the control panel of inbox (has messages)"
+    );
+
+    await afterNextRender(() => markAllReadButton.click());
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "inbox should display no counter (= 0)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "channel should display no counter (= 0)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        0,
+        "should have no message in inbox"
+    );
+    markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`);
+    assert.ok(
+        markAllReadButton.disabled,
+        "should have disabled button 'Mark all read' in the control panel of inbox (no messages)"
+    );
+});
+
+QUnit.test('starred: unstar all', async function (assert) {
+    assert.expect(6);
+
+    // messages expected to be starred
+    this.data['mail.message'].records.push(
+        { body: "not empty", starred_partner_ids: [this.data.currentPartnerId] },
+        { body: "not empty", starred_partner_ids: [this.data.currentPartnerId] }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_starred',
+            },
+        },
+    });
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        "2",
+        "starred should have counter of 2"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        2,
+        "should have 2 messages in starred"
+    );
+    let unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`);
+    assert.notOk(
+        unstarAllButton.disabled,
+        "should have enabled button 'Unstar all' in the control panel of starred (has messages)"
+    );
+
+    await afterNextRender(() => unstarAllButton.click());
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "starred should display no counter (= 0)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        0,
+        "should have no message in starred"
+    );
+    unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`);
+    assert.ok(
+        unstarAllButton.disabled,
+        "should have disabled button 'Unstar all' in the control panel of starred (no messages)"
+    );
+});
+
+QUnit.test('toggle_star message', async function (assert) {
+    assert.expect(16);
+
+    // channel expected to be initially rendered
+    // with a random unique id, will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [20],
+        id: 100,
+        model: 'mail.channel',
+        res_id: 20,
+    });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        async mockRPC(route, args) {
+            if (args.method === 'toggle_message_starred') {
+                assert.step('rpc:toggle_message_starred');
+                assert.strictEqual(
+                    args.args[0][0],
+                    100,
+                    "should have message Id in args"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "starred should display no counter (= 0)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        1,
+        "should have 1 message in channel"
+    );
+    let message = document.querySelector(`.o_Discuss .o_Message`);
+    assert.notOk(
+        message.classList.contains('o-starred'),
+        "message should not be starred"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_commandStar`).length,
+        1,
+        "message should have star command"
+    );
+
+    await afterNextRender(() => message.querySelector(`:scope .o_Message_commandStar`).click());
+    assert.verifySteps(['rpc:toggle_message_starred']);
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        "1",
+        "starred should display a counter of 1"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        1,
+        "should have kept 1 message in channel"
+    );
+    message = document.querySelector(`.o_Discuss .o_Message`);
+    assert.ok(
+        message.classList.contains('o-starred'),
+        "message should be starred"
+    );
+
+    await afterNextRender(() => message.querySelector(`:scope .o_Message_commandStar`).click());
+    assert.verifySteps(['rpc:toggle_message_starred']);
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.starred.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).length,
+        0,
+        "starred should no longer display a counter (= 0)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss .o_Message`).length,
+        1,
+        "should still have 1 message in channel"
+    );
+    message = document.querySelector(`.o_Discuss .o_Message`);
+    assert.notOk(
+        message.classList.contains('o-starred'),
+        "message should no longer be starred"
+    );
+});
+
+QUnit.test('composer state: text save and restore', async function (assert) {
+    assert.expect(2);
+
+    // channels expected to be found in the sidebar,
+    // with random unique id and name that will be referenced in the test
+    this.data['mail.channel'].records.push(
+        { id: 20, name: "General" },
+        { id: 21, name: "Special" }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    // Write text in composer for #general
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "A message");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('input'));
+    });
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-name="Special"]`).click()
+    );
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "An other message");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('input'));
+    });
+    // Switch back to #general
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-name="General"]`).click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "A message",
+        "should restore the input text"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebarItem[data-thread-name="Special"]`).click()
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "An other message",
+        "should restore the input text"
+    );
+});
+
+QUnit.test('composer state: attachments save and restore', async function (assert) {
+    assert.expect(6);
+
+    // channels expected to be found in the sidebar
+    // with random unique id and name that will be referenced in the test
+    this.data['mail.channel'].records.push(
+        { id: 20, name: "General" },
+        { id: 21, name: "Special" }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    const channels = document.querySelectorAll(`
+        .o_DiscussSidebar_groupChannel .o_DiscussSidebar_item
+    `);
+    // Add attachment in a message for #general
+    await afterNextRender(async () => {
+        const file = await createFile({
+            content: 'hello, world',
+            contentType: 'text/plain',
+            name: 'text.txt',
+        });
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            [file]
+        );
+    });
+    // Switch to #special
+    await afterNextRender(() => channels[1].click());
+    // Add attachments in a message for #special
+    const files = [
+        await createFile({
+            content: 'hello2, world',
+            contentType: 'text/plain',
+            name: 'text2.txt',
+        }),
+        await createFile({
+            content: 'hello3, world',
+            contentType: 'text/plain',
+            name: 'text3.txt',
+        }),
+        await createFile({
+            content: 'hello4, world',
+            contentType: 'text/plain',
+            name: 'text4.txt',
+        }),
+    ];
+    await afterNextRender(() =>
+        inputFiles(
+            document.querySelector('.o_FileUploader_input'),
+            files
+        )
+    );
+    // Switch back to #general
+    await afterNextRender(() => channels[0].click());
+    // Check attachment is reloaded
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        1,
+        "should have 1 attachment in the composer"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Composer .o_Attachment`).dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].findFromIdentifyingData({ id: 1 }).localId,
+        "should have correct 1st attachment in the composer"
+    );
+
+    // Switch back to #special
+    await afterNextRender(() => channels[1].click());
+    // Check attachments are reloaded
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`).length,
+        3,
+        "should have 3 attachments in the composer"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`)[0].dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].findFromIdentifyingData({ id: 2 }).localId,
+        "should have attachment with id 2 as 1st attachment"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`)[1].dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].findFromIdentifyingData({ id: 3 }).localId,
+        "should have attachment with id 3 as 2nd attachment"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer .o_Attachment`)[2].dataset.attachmentLocalId,
+        this.env.models['mail.attachment'].findFromIdentifyingData({ id: 4 }).localId,
+        "should have attachment with id 4 as 3rd attachment"
+    );
+});
+
+QUnit.test('post a simple message', async function (assert) {
+    assert.expect(15);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    let postedMessageId;
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+        async mockRPC(route, args) {
+            const res = await this._super(...arguments);
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+                assert.strictEqual(
+                    args.args[0],
+                    20,
+                    "should post message to channel Id 20"
+                );
+                assert.strictEqual(
+                    args.kwargs.body,
+                    "Test",
+                    "should post with provided content in composer input"
+                );
+                assert.strictEqual(
+                    args.kwargs.message_type,
+                    "comment",
+                    "should set message type as 'comment'"
+                );
+                assert.strictEqual(
+                    args.kwargs.subtype_xmlid,
+                    "mail.mt_comment",
+                    "should set subtype_xmlid as 'comment'"
+                );
+                postedMessageId = res;
+            }
+            return res;
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessageList_empty`).length,
+        1,
+        "should display thread with no message initially"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        0,
+        "should display no message initially"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have empty content initially"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "Test",
+        "should have inserted text in editable"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+    assert.strictEqual(
+        document.querySelector(`.o_ComposerTextInput_textarea`).value,
+        "",
+        "should have no content in composer input after posting message"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        1,
+        "should display a message after posting message"
+    );
+    const message = document.querySelector(`.o_Message`);
+    assert.strictEqual(
+        message.dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: postedMessageId }).localId,
+        "new message in thread should be linked to newly created message from message post"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_authorName`).textContent,
+        "Mitchell Admin",
+        "new message in thread should be from current partner name"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_content`).textContent,
+        "Test",
+        "new message in thread should have content typed from composer text input"
+    );
+});
+
+QUnit.test('post message on non-mailing channel with "Enter" keyboard shortcut', async function (assert) {
+    assert.expect(2);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: false });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in channel"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { key: "Enter" });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in channel after posting message from pressing 'Enter' in text input of composer"
+    );
+});
+
+QUnit.test('do not post message on non-mailing channel with "SHIFT-Enter" keyboard shortcut', async function (assert) {
+    // Note that test doesn't assert SHIFT-Enter makes a newline, because this
+    // default browser cannot be simulated with just dispatching
+    // programmatically crafted events...
+    assert.expect(2);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in channel"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    const kevt = new window.KeyboardEvent('keydown', { key: "Enter", shiftKey: true });
+    document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    await nextAnimationFrame();
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should still not have any message in channel after pressing 'Shift-Enter' in text input of composer"
+    );
+});
+
+QUnit.test('post message on mailing channel with "CTRL-Enter" keyboard shortcut', async function (assert) {
+    assert.expect(2);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in channel"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in channel after posting message from pressing 'CTRL-Enter' in text input of composer"
+    );
+});
+
+QUnit.test('post message on mailing channel with "META-Enter" keyboard shortcut', async function (assert) {
+    assert.expect(2);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in channel"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    await afterNextRender(() => {
+        const kevt = new window.KeyboardEvent('keydown', { key: "Enter", metaKey: true });
+        document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should now have single message in channel after posting message from pressing 'META-Enter' in text input of composer"
+    );
+});
+
+QUnit.test('do not post message on mailing channel with "Enter" keyboard shortcut', async function (assert) {
+    // Note that test doesn't assert Enter makes a newline, because this
+    // default browser cannot be simulated with just dispatching
+    // programmatically crafted events...
+    assert.expect(2);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, mass_mailing: true });
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.channel_20',
+            },
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should not have any message initially in mailing channel"
+    );
+
+    // insert some HTML in editable
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "Test");
+    });
+    const kevt = new window.KeyboardEvent('keydown', { key: "Enter" });
+    document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt);
+    await nextAnimationFrame();
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "should still not have any message in mailing channel after pressing 'Enter' in text input of composer"
+    );
+});
+
+QUnit.test('rendering of inbox message', async function (assert) {
+    // AKU TODO: kinda message specific test
+    assert.expect(7);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        model: 'res.partner', // random existing model
+        needaction: true, // for message_fetch domain
+        needaction_partner_ids: [this.data.currentPartnerId], // for consistency
+        record_name: 'Refactoring', // random name, will be asserted in the test
+        res_id: 20, // random related id
+    });
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        1,
+        "should display a message"
+    );
+    const message = document.querySelector('.o_Message');
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_originThread`).length,
+        1,
+        "should display origin thread of message"
+    );
+    assert.strictEqual(
+        message.querySelector(`:scope .o_Message_originThread`).textContent,
+        " on Refactoring",
+        "should display origin thread name"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_command`).length,
+        3,
+        "should display 3 commands"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_commandStar`).length,
+        1,
+        "should display star command"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_commandReply`).length,
+        1,
+        "should display reply command"
+    );
+    assert.strictEqual(
+        message.querySelectorAll(`:scope .o_Message_commandMarkAsRead`).length,
+        1,
+        "should display mark as read command"
+    );
+});
+
+QUnit.test('mark channel as seen on last message visible [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(3);
+
+    // channel expected to be found in the sidebar, with the expected message_unread_counter
+    // and a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 10, message_unread_counter: 1 });
+    this.data['mail.message'].records.push({
+        id: 12,
+        body: "not empty",
+        channel_ids: [10],
+        model: 'mail.channel',
+        res_id: 10,
+    });
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        `.o_DiscussSidebar_item[data-thread-local-id="${
+            this.env.models['mail.thread'].findFromIdentifyingData({
+                id: 10,
+                model: 'mail.channel',
+            }).localId
+        }"]`,
+        "should have discuss sidebar item with the channel"
+    );
+    assert.hasClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `),
+        'o-unread',
+        "sidebar item of channel ID 10 should be unread"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 10,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until last seen by current partner message id changed",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 10 &&
+                thread.model === 'mail.channel' &&
+                thread.lastSeenByCurrentPartnerMessageId === 12
+            );
+        },
+    }));
+    assert.doesNotHaveClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `),
+        'o-unread',
+        "sidebar item of channel ID 10 should not longer be unread"
+    );
+});
+
+QUnit.test('receive new needaction messages', async function (assert) {
+    assert.expect(12);
+
+    await this.start();
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `),
+        "should have inbox in sidebar"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).classList.contains('o-active'),
+        "inbox should be current discuss thread"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `),
+        "inbox item in sidebar should not have any counter"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_Message`).length,
+        0,
+        "should have no messages in inbox initially"
+    );
+
+    // simulate receiving a new needaction message
+    await afterNextRender(() => {
+        const data = {
+            body: "not empty",
+            id: 100,
+            needaction_partner_ids: [3],
+            model: 'res.partner',
+            res_id: 20,
+        };
+        const notifications = [[['my-db', 'ir.needaction', 3], data]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `),
+        "inbox item in sidebar should now have counter"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        '1',
+        "inbox item in sidebar should have counter of '1'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_Message`).length,
+        1,
+        "should have one message in inbox"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Discuss_thread .o_Message`).dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId,
+        "should display newly received needaction message"
+    );
+
+    // simulate receiving another new needaction message
+    await afterNextRender(() => {
+        const data2 = {
+            body: "not empty",
+            id: 101,
+            needaction_partner_ids: [3],
+            model: 'res.partner',
+            res_id: 20,
+        };
+        const notifications2 = [[['my-db', 'ir.needaction', 3], data2]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications2);
+    });
+    assert.strictEqual(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+            .o_DiscussSidebarItem_counter
+        `).textContent,
+        '2',
+        "inbox item in sidebar should have counter of '2'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_Message`).length,
+        2,
+        "should have 2 messages in inbox"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `),
+        "should still display 1st needaction message"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_Discuss_thread
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId
+            }"]
+        `),
+        "should display 2nd needaction message"
+    );
+});
+
+QUnit.test('reply to message from inbox (message linked to document)', async function (assert) {
+    assert.expect(19);
+
+    // message that is expected to be found in Inbox
+    this.data['mail.message'].records.push({
+        body: "<p>Test</p>",
+        date: "2019-04-20 11:00:00",
+        id: 100, // random unique id, will be used to link notification to message
+        message_type: 'comment',
+        // needaction needs to be set here for message_fetch domain, because
+        // mocked models don't have computed fields
+        needaction: true,
+        model: 'res.partner',
+        record_name: 'Refactoring',
+        res_id: 20,
+    });
+    // notification to have message in Inbox
+    this.data['mail.notification'].records.push({
+        mail_message_id: 100, // id of related message
+        res_partner_id: this.data.currentPartnerId, // must be for current partner
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_post') {
+                assert.step('message_post');
+                assert.strictEqual(
+                    args.model,
+                    'res.partner',
+                    "should post message to record with model 'res.partner'"
+                );
+                assert.strictEqual(
+                    args.args[0],
+                    20,
+                    "should post message to record with Id 20"
+                );
+                assert.strictEqual(
+                    args.kwargs.body,
+                    "Test",
+                    "should post with provided content in composer input"
+                );
+                assert.strictEqual(
+                    args.kwargs.message_type,
+                    "comment",
+                    "should set message type as 'comment'"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        1,
+        "should display a single message"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message').dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId,
+        "should display message with ID 100"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_originThread').textContent,
+        " on Refactoring",
+        "should display message originates from record 'Refactoring'"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_commandReply').click()
+    );
+    assert.ok(
+        document.querySelector('.o_Message').classList.contains('o-selected'),
+        "message should be selected after clicking on reply icon"
+    );
+    assert.ok(
+        document.querySelector('.o_Composer'),
+        "should have composer after clicking on reply to message"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Composer_threadName`).textContent,
+        " on: Refactoring",
+        "composer should display origin thread name of message"
+    );
+    assert.strictEqual(
+        document.activeElement,
+        document.querySelector(`.o_ComposerTextInput_textarea`),
+        "composer text input should be auto-focus"
+    );
+
+    await afterNextRender(() =>
+        document.execCommand('insertText', false, "Test")
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.verifySteps(['message_post']);
+    assert.notOk(
+        document.querySelector('.o_Composer'),
+        "should no longer have composer after posting reply to message"
+    );
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        1,
+        "should still display a single message after posting reply"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message').dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId,
+        "should still display message with ID 100 after posting reply"
+    );
+    assert.notOk(
+        document.querySelector('.o_Message').classList.contains('o-selected'),
+        "message should not longer be selected after posting reply"
+    );
+    assert.ok(
+        document.querySelector('.o_notification'),
+        "should display a notification after posting reply"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_notification_content').textContent,
+        "Message posted on \"Refactoring\"",
+        "notification should tell that message has been posted to the record 'Refactoring'"
+    );
+});
+
+QUnit.test('load recent messages from thread (already loaded some old messages)', async function (assert) {
+    assert.expect(6);
+
+    // channel expected to be found in the sidebar,
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i < 50; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20], // id of related channel
+            id: 100 + i, // random unique id, will be referenced in the test
+            model: 'mail.channel', // expected value to link message to channel
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: i === 0,
+            // the goal is to have only the first (oldest) message in Inbox
+            needaction_partner_ids: i === 0 ? [this.data.currentPartnerId] : [],
+            res_id: 20, // id of related channel
+        });
+    }
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        1,
+        "Inbox should have a single message initially"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message').dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId,
+        "the only message initially should be the one marked as 'needaction'"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 20,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until channel scrolled to bottom after opening it from the discuss sidebar",
+        predicate: ({ scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            return (
+                thread &&
+                thread.model === 'mail.channel' &&
+                thread.id === 20 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        31,
+        `should display 31 messages inside the channel after clicking on it (the previously known
+        message from Inbox and the 30 most recent messages that have been fetched)`
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `).length,
+        1,
+        "should display the message from Inbox inside the channel too"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => document.querySelector('.o_Discuss_thread .o_ThreadView_messageList').scrollTop = 0,
+        message: "should wait until channel 20 loaded more messages after scrolling to top",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'more-messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 20
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        50,
+        "should display 50 messages inside the channel after scrolling to load more (all messages fetched)"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId
+            }"]
+        `).length,
+        1,
+        "should still display the message from Inbox inside the channel too"
+    );
+});
+
+QUnit.test('messages marked as read move to "History" mailbox', async function (assert) {
+    assert.expect(10);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20 });
+    // expected messages
+    this.data['mail.message'].records.push(
+        {
+            body: "not empty",
+            id: 100, // random unique id, useful to link notification
+            model: 'mail.channel', // value to link message to channel
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: true,
+            res_id: 20, // id of related channel
+        },
+        {
+            body: "not empty",
+            id: 101, // random unique id, useful to link notification
+            model: 'mail.channel', // value to link message to channel
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: true,
+            res_id: 20, // id of related channel
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // notification to have first message in inbox
+        {
+            mail_message_id: 100, // id of related message
+            res_partner_id: this.data.currentPartnerId, // must be for current partner
+        },
+        // notification to have second message in inbox
+        {
+            mail_message_id: 101, // id of related message
+            res_partner_id: this.data.currentPartnerId, // must be for current partner
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_history',
+            },
+        },
+    });
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).classList.contains('o-active'),
+        "history mailbox should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length,
+        1,
+        "should have empty thread in history"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).classList.contains('o-active'),
+        "inbox mailbox should be active thread"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length,
+        0,
+        "inbox mailbox should not be empty"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length,
+        2,
+        "inbox mailbox should have 2 messages"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_widget_Discuss_controlPanelButtonMarkAllRead').click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).classList.contains('o-active'),
+        "inbox mailbox should still be active after mark as read"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length,
+        1,
+        "inbox mailbox should now be empty after mark as read"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).classList.contains('o-active'),
+        "history mailbox should be active"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length,
+        0,
+        "history mailbox should not be empty after mark as read"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length,
+        2,
+        "history mailbox should have 2 messages"
+    );
+});
+
+QUnit.test('mark a single message as read should only move this message to "History" mailbox', async function (assert) {
+    assert.expect(9);
+
+    this.data['mail.message'].records.push(
+        {
+            body: "not empty",
+            id: 1,
+            needaction: true,
+            needaction_partner_ids: [this.data.currentPartnerId],
+        },
+        {
+            body: "not empty",
+            id: 2,
+            needaction: true,
+            needaction_partner_ids: [this.data.currentPartnerId],
+        }
+    );
+    this.data['mail.notification'].records.push(
+        {
+            mail_message_id: 1,
+            res_partner_id: this.data.currentPartnerId,
+        },
+        {
+            mail_message_id: 2,
+            res_partner_id: this.data.currentPartnerId,
+        }
+    );
+    await this.start({
+        discuss: {
+            params: {
+                default_active_id: 'mail.box_history',
+            },
+        },
+    });
+    assert.hasClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `),
+        'o-active',
+        "history mailbox should initially be the active thread"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_empty',
+        "history mailbox should initially be empty"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `).click()
+    );
+    assert.hasClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.inbox.localId
+            }"]
+        `),
+        'o-active',
+        "inbox mailbox should be active thread after clicking on it"
+    );
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "inbox mailbox should have 2 messages"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_Message[data-message-local-id="${
+                this.env.models['mail.message'].findFromIdentifyingData({ id: 1 }).localId
+            }"] .o_Message_commandMarkAsRead
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "inbox mailbox should have one less message after clicking mark as read"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 2 }).localId
+        }"]`,
+        "message still in inbox should be the one not marked as read"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `).click()
+    );
+    assert.hasClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.messaging.history.localId
+            }"]
+        `),
+        'o-active',
+        "history mailbox should be active after clicking on it"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "history mailbox should have only 1 message after mark as read"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 1 }).localId
+        }"]`,
+        "message moved in history should be the one marked as read"
+    );
+});
+
+QUnit.test('all messages in "Inbox" in "History" after marked all as read', async function (assert) {
+    assert.expect(2);
+
+    const messageOffset = 200;
+    for (let id = messageOffset; id < messageOffset + 40; id++) {
+        // message expected to be found in Inbox
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            id, // will be used to link notification to message
+            // needaction needs to be set here for message_fetch domain, because
+            // mocked models don't have computed fields
+            needaction: true,
+        });
+        // notification to have message in Inbox
+        this.data['mail.notification'].records.push({
+            mail_message_id: id, // id of related message
+            res_partner_id: this.data.currentPartnerId, // must be for current partner
+        });
+
+    }
+    await this.start({
+        waitUntilEvent: {
+            eventName: 'o-component-message-list-scrolled',
+            message: "should wait until inbox scrolled to its last message initially",
+            predicate: ({ orderedMessages, scrollTop, thread }) => {
+                const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`);
+                return (
+                    thread &&
+                    thread.model === 'mail.box' &&
+                    thread.id === 'inbox' &&
+                    orderedMessages.length === 30 &&
+                    scrollTop === messageList.scrollHeight - messageList.clientHeight
+                );
+            },
+        },
+    });
+
+    await afterNextRender(async () => {
+        const markAllReadButton = document.querySelector('.o_widget_Discuss_controlPanelButtonMarkAllRead');
+        markAllReadButton.click();
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "there should no message in Inbox anymore"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebarItem[data-thread-local-id="${
+                    this.env.messaging.history.localId
+                }"]
+            `).click();
+        },
+        message: "should wait until history scrolled to its last message after opening it from the discuss sidebar",
+        predicate: ({ orderedMessages, scrollTop, thread }) => {
+            const messageList = document.querySelector('.o_MessageList');
+            return (
+                thread &&
+                thread.model === 'mail.box' &&
+                thread.id === 'history' &&
+                orderedMessages.length === 30 &&
+                scrollTop === messageList.scrollHeight - messageList.clientHeight
+            );
+        },
+    });
+
+    // simulate a scroll to top to load more messages
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => document.querySelector('.o_MessageList').scrollTop = 0,
+        message: "should wait until mailbox history loaded more messages after scrolling to top",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'more-messages-loaded' &&
+                threadViewer.thread.model === 'mail.box' &&
+                threadViewer.thread.id === 'history'
+            );
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        40,
+        "there should be 40 messages in History"
+    );
+});
+
+QUnit.test('receive new chat message: out of odoo focus (notification, channel)', async function (assert) {
+    assert.expect(4);
+
+    // channel expected to be found in the sidebar
+    // with a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ id: 20, channel_type: 'chat' });
+    const bus = new Bus();
+    bus.on('set_title_part', null, payload => {
+        assert.step('set_title_part');
+        assert.strictEqual(payload.part, '_chat');
+        assert.strictEqual(payload.title, "1 Message");
+    });
+    await this.start({
+        env: { bus },
+        services: {
+            bus_service: BusService.extend({
+                _beep() {}, // Do nothing
+                _poll() {}, // Do nothing
+                _registerWindowUnload() {}, // Do nothing
+                isOdooFocused: () => false,
+                updateOption() {},
+            }),
+        },
+    });
+
+    // simulate receiving a new message with odoo focused
+    await afterNextRender(() => {
+        const messageData = {
+            channel_ids: [20],
+            id: 126,
+            model: 'mail.channel',
+            res_id: 20,
+        };
+        const notifications = [[['my-db', 'mail.channel', 20], messageData]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.verifySteps(['set_title_part']);
+});
+
+QUnit.test('receive new chat message: out of odoo focus (notification, chat)', async function (assert) {
+    assert.expect(4);
+
+    // chat expected to be found in the sidebar with the proper channel_type
+    // and a random unique id that will be referenced in the test
+    this.data['mail.channel'].records.push({ channel_type: "chat", id: 10 });
+    const bus = new Bus();
+    bus.on('set_title_part', null, payload => {
+        assert.step('set_title_part');
+        assert.strictEqual(payload.part, '_chat');
+        assert.strictEqual(payload.title, "1 Message");
+    });
+    await this.start({
+        env: { bus },
+        services: {
+            bus_service: BusService.extend({
+                _beep() {}, // Do nothing
+                _poll() {}, // Do nothing
+                _registerWindowUnload() {}, // Do nothing
+                isOdooFocused: () => false,
+                updateOption() {},
+            }),
+        },
+    });
+
+    // simulate receiving a new message with odoo focused
+    await afterNextRender(() => {
+        const messageData = {
+            channel_ids: [10],
+            id: 126,
+            model: 'mail.channel',
+            res_id: 10,
+        };
+        const notifications = [[['my-db', 'mail.channel', 10], messageData]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.verifySteps(['set_title_part']);
+});
+
+QUnit.test('receive new chat messages: out of odoo focus (tab title)', async function (assert) {
+    assert.expect(12);
+
+    let step = 0;
+    // channel and chat expected to be found in the sidebar
+    // with random unique id and name that will be referenced in the test
+    this.data['mail.channel'].records.push(
+        { channel_type: 'chat', id: 20, public: 'private' },
+        { channel_type: 'chat', id: 10, public: 'private' },
+    );
+    const bus = new Bus();
+    bus.on('set_title_part', null, payload => {
+        step++;
+        assert.step('set_title_part');
+        assert.strictEqual(payload.part, '_chat');
+        if (step === 1) {
+            assert.strictEqual(payload.title, "1 Message");
+        }
+        if (step === 2) {
+            assert.strictEqual(payload.title, "2 Messages");
+        }
+        if (step === 3) {
+            assert.strictEqual(payload.title, "3 Messages");
+        }
+    });
+    await this.start({
+        env: { bus },
+        services: {
+            bus_service: BusService.extend({
+                _beep() {}, // Do nothing
+                _poll() {}, // Do nothing
+                _registerWindowUnload() {}, // Do nothing
+                isOdooFocused: () => false,
+                updateOption() {},
+            }),
+        },
+    });
+
+    // simulate receiving a new message in chat 20 with odoo focused
+    await afterNextRender(() => {
+        const messageData1 = {
+            channel_ids: [20],
+            id: 126,
+            model: 'mail.channel',
+            res_id: 20,
+        };
+        const notifications1 = [[['my-db', 'mail.channel', 20], messageData1]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications1);
+    });
+    assert.verifySteps(['set_title_part']);
+
+    // simulate receiving a new message in chat 10 with odoo focused
+    await afterNextRender(() => {
+        const messageData2 = {
+            channel_ids: [10],
+            id: 127,
+            model: 'mail.channel',
+            res_id: 10,
+        };
+        const notifications2 = [[['my-db', 'mail.channel', 10], messageData2]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications2);
+    });
+    assert.verifySteps(['set_title_part']);
+
+    // simulate receiving another new message in chat 10 with odoo focused
+    await afterNextRender(() => {
+        const messageData3 = {
+            channel_ids: [10],
+            id: 128,
+            model: 'mail.channel',
+            res_id: 10,
+        };
+        const notifications3 = [[['my-db', 'mail.channel', 10], messageData3]];
+        this.widget.call('bus_service', 'trigger', 'notification', notifications3);
+    });
+    assert.verifySteps(['set_title_part']);
+});
+
+QUnit.test('auto-focus composer on opening thread', async function (assert) {
+    assert.expect(14);
+
+    // expected correspondent, with a random unique id that will be used to link
+    // partner to chat and a random name that will be asserted in the test
+    this.data['res.partner'].records.push({ id: 7, name: "Demo User" });
+    this.data['mail.channel'].records.push(
+        // channel expected to be found in the sidebar
+        {
+            id: 20, // random unique id, will be referenced in the test
+            name: "General", // random name, will be asserted in the test
+        },
+        // chat expected to be found in the sidebar
+        {
+            channel_type: 'chat', // testing a chat is the goal of the test
+            id: 10, // random unique id, will be referenced in the test
+            members: [this.data.currentPartnerId, 7], // expected partners
+            public: 'private', // expected value for testing a chat
+        }
+    );
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-name="Inbox"]
+        `).length,
+        1,
+        "should have mailbox 'Inbox' in the sidebar"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-name="Inbox"]
+        `).classList.contains('o-active'),
+        "mailbox 'Inbox' should be active initially"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-name="General"]
+        `).length,
+        1,
+        "should have channel 'General' in the sidebar"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-name="General"]
+        `).classList.contains('o-active'),
+        "channel 'General' should not be active initially"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_DiscussSidebar_item[data-thread-name="Demo User"]
+        `).length,
+        1,
+        "should have chat 'Demo User' in the sidebar"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-name="Demo User"]
+        `).classList.contains('o-active'),
+        "chat 'Demo User' should not be active initially"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer`).length,
+        0,
+        "there should be no composer when active thread of discuss is mailbox 'Inbox'"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebar_item[data-thread-name="General"]`).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-name="General"]
+        `).classList.contains('o-active'),
+        "channel 'General' should become active after selecting it from the sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer`).length,
+        1,
+        "there should be a composer when active thread of discuss is channel 'General'"
+    );
+    assert.strictEqual(
+        document.activeElement,
+        document.querySelector(`.o_ComposerTextInput_textarea`),
+        "composer of channel 'General' should be automatically focused on opening"
+    );
+
+    document.querySelector(`.o_ComposerTextInput_textarea`).blur();
+    assert.notOk(
+        document.activeElement === document.querySelector(`.o_ComposerTextInput_textarea`),
+        "composer of channel 'General' should no longer focused on click away"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussSidebar_item[data-thread-name="Demo User"]`).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-name="Demo User"]
+        `).classList.contains('o-active'),
+        "chat 'Demo User' should become active after selecting it from the sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Composer`).length,
+        1,
+        "there should be a composer when active thread of discuss is chat 'Demo User'"
+    );
+    assert.strictEqual(
+        document.activeElement,
+        document.querySelector(`.o_ComposerTextInput_textarea`),
+        "composer of chat 'Demo User' should be automatically focused on opening"
+    );
+});
+
+QUnit.test('mark channel as seen if last message is visible when switching channels when the previous channel had a more recent last message than the current channel [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push(
+        { id: 10, message_unread_counter: 1, name: 'Bla' },
+        { id: 11, message_unread_counter: 1, name: 'Blu' },
+    );
+    this.data['mail.message'].records.push({
+        body: 'oldest message',
+        channel_ids: [10],
+        id: 10,
+    }, {
+        body: 'newest message',
+        channel_ids: [11],
+        id: 11,
+    });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 'mail.channel_11',
+            },
+        },
+        waitUntilEvent: {
+            eventName: 'o-thread-view-hint-processed',
+            message: "should wait until channel 11 loaded its messages initially",
+            predicate: ({ hint, threadViewer }) => {
+                return (
+                    threadViewer.thread.model === 'mail.channel' &&
+                    threadViewer.thread.id === 11 &&
+                    hint.type === 'messages-loaded'
+                );
+            },
+        },
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => {
+            document.querySelector(`
+                .o_DiscussSidebar_item[data-thread-local-id="${
+                    this.env.models['mail.thread'].findFromIdentifyingData({
+                        id: 10,
+                        model: 'mail.channel',
+                    }).localId
+                }"]
+            `).click();
+        },
+        message: "should wait until last seen by current partner message id changed",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 10 &&
+                thread.model === 'mail.channel' &&
+                thread.lastSeenByCurrentPartnerMessageId === 10
+            );
+        },
+    }));
+    assert.doesNotHaveClass(
+        document.querySelector(`
+            .o_DiscussSidebar_item[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `),
+        'o-unread',
+        "sidebar item of channel ID 10 should no longer be unread"
+    );
+});
+
+QUnit.test('add custom filter should filter messages accordingly to selected filter', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({
+        id: 20,
+        name: "General"
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (args.method === 'message_fetch') {
+                const domainsAsStr = args.kwargs.domain.map(domain => domain.join(''));
+                assert.step(`message_fetch:${domainsAsStr.join(',')}`);
+            }
+            return this._super(...arguments);
+        },
+    });
+    assert.verifySteps(['message_fetch:needaction=true'], "A message_fetch request should have been done for needaction messages as inbox is selected by default");
+
+    // Open filter menu of control panel and select a custom filter (id = 0, the only one available)
+    await toggleFilterMenu(document.body);
+    await toggleAddCustomFilter(document.body);
+    await applyFilter(document.body);
+    assert.verifySteps(['message_fetch:id=0,needaction=true'], "A message_fetch request should have been done for selected filter & domain of current thread (inbox)");
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js
new file mode 100644
index 00000000..b78faa67
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js
@@ -0,0 +1,95 @@
+odoo.define('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class DiscussMobileMailboxSelection extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            return {
+                allOrderedAndPinnedMailboxes: this.orderedMailboxes.map(mailbox => mailbox.__state),
+                discussThread: this.env.messaging.discuss.thread
+                    ? this.env.messaging.discuss.thread.__state
+                    : undefined,
+            };
+        }, {
+            compareDepth: {
+                allOrderedAndPinnedMailboxes: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.thread[]}
+     */
+    get orderedMailboxes() {
+        return this.env.models['mail.thread']
+            .all(thread => thread.isPinned && thread.model === 'mail.box')
+            .sort((mailbox1, mailbox2) => {
+                if (mailbox1 === this.env.messaging.inbox) {
+                    return -1;
+                }
+                if (mailbox2 === this.env.messaging.inbox) {
+                    return 1;
+                }
+                if (mailbox1 === this.env.messaging.starred) {
+                    return -1;
+                }
+                if (mailbox2 === this.env.messaging.starred) {
+                    return 1;
+                }
+                const mailbox1Name = mailbox1.displayName;
+                const mailbox2Name = mailbox2.displayName;
+                mailbox1Name < mailbox2Name ? -1 : 1;
+            });
+    }
+
+    /**
+     * @returns {mail.discuss}
+     */
+    get discuss() {
+        return this.env.messaging && this.env.messaging.discuss;
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on a mailbox selection item.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const { mailboxLocalId } = ev.currentTarget.dataset;
+        const mailbox = this.env.models['mail.thread'].get(mailboxLocalId);
+        if (!mailbox) {
+            return;
+        }
+        mailbox.open();
+    }
+
+}
+
+Object.assign(DiscussMobileMailboxSelection, {
+    props: {},
+    template: 'mail.DiscussMobileMailboxSelection',
+});
+
+return DiscussMobileMailboxSelection;
+
+});
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
new file mode 100644
index 00000000..b620e2f1
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss
@@ -0,0 +1,26 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_DiscussMobileMailboxSelection {
+    display: flex;
+    flex: 0 0 auto;
+}
+
+.o_DiscussMobileMailboxSelection_button {
+    flex: 1 1 0;
+    padding: 8px;
+    z-index: 1;
+
+    &.o-active {
+        z-index: 2;
+    }
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_DiscussMobileMailboxSelection_button {
+    box-shadow: 0 2px 4px gray('400');
+}
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
new file mode 100644
index 00000000..e996a203
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.DiscussMobileMailboxSelection" owl="1">
+        <div class="o_DiscussMobileMailboxSelection">
+            <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId">
+                <button class="o_DiscussMobileMailboxSelection_button btn"
+                    t-att-class="{
+                        'btn-primary': discuss.thread === mailbox,
+                        'btn-secondary': discuss.thread !== mailbox,
+                        'o-active': discuss.thread === mailbox,
+                    }" t-on-click="_onClick" t-att-data-mailbox-local-id="mailbox.localId" type="button"
+                >
+                    <t t-esc="mailbox.name"/>
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js
new file mode 100644
index 00000000..0d145c13
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js
@@ -0,0 +1,130 @@
+odoo.define('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('discuss_mobile_mailbox_selection', {}, function () {
+QUnit.module('discuss_mobile_mailbox_selection_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign(
+                {
+                    autoOpenDiscuss: true,
+                    data: this.data,
+                    env: {
+                        browser: {
+                            innerHeight: 640,
+                            innerWidth: 360,
+                        },
+                        device: {
+                            isMobile: true,
+                        },
+                    },
+                    hasDiscuss: true,
+                },
+                params,
+            ));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('select another mailbox', async function (assert) {
+    assert.expect(7);
+
+    await this.start();
+    assert.containsOnce(
+        document.body,
+        '.o_Discuss',
+        "should display discuss initially"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Discuss'),
+        'o-mobile',
+        "discuss should be opened in mobile mode"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Discuss_thread',
+        "discuss should display a thread initially"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Discuss_thread').dataset.threadLocalId,
+        this.env.messaging.inbox.localId,
+        "inbox mailbox should be opened initially"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_DiscussMobileMailboxSelection_button[
+            data-mailbox-local-id="${this.env.messaging.starred.localId}"
+        ]`,
+        "should have a button to open starred mailbox"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_DiscussMobileMailboxSelection_button[
+            data-mailbox-local-id="${this.env.messaging.starred.localId}"]
+        `).click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Discuss_thread',
+        "discuss should still have a thread after clicking on starred mailbox"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Discuss_thread').dataset.threadLocalId,
+        this.env.messaging.starred.localId,
+        "starred mailbox should be opened after clicking on it"
+    );
+});
+
+QUnit.test('auto-select "Inbox" when discuss had channel as active thread', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({ id: 20 });
+    await this.start({
+        discuss: {
+            context: {
+                active_id: 20,
+            },
+        }
+    });
+    assert.hasClass(
+        document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="channel"]'),
+        'o-active',
+        "'channel' tab should be active initially when loading discuss with channel id as active_id"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="mailbox"]').click());
+    assert.hasClass(
+        document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="mailbox"]'),
+        'o-active',
+        "'mailbox' tab should be selected after click on mailbox tab"
+    );
+    assert.hasClass(
+        document.querySelector(`.o_DiscussMobileMailboxSelection_button[data-mailbox-local-id="${
+            this.env.messaging.inbox.localId
+        }"]`),
+        'o-active',
+        "'Inbox' mailbox should be auto-selected after click on mailbox tab"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js
new file mode 100644
index 00000000..d12d0353
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js
@@ -0,0 +1,308 @@
+odoo.define('mail/static/src/components/discuss_sidebar/discuss_sidebar.js', function (require) {
+'use strict';
+
+const components = {
+    AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'),
+    DiscussSidebarItem: require('mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class DiscussSidebar extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(
+            (...args) => this._useStoreSelector(...args),
+            { compareDepth: this._useStoreCompareDepth() }
+        );
+        useUpdate({ func: () => this._update() });
+        /**
+         * Reference of the quick search input. Useful to filter channels and
+         * chats based on this input content.
+         */
+        this._quickSearchInputRef = useRef('quickSearchInput');
+
+        // bind since passed as props
+        this._onAddChannelAutocompleteSelect = this._onAddChannelAutocompleteSelect.bind(this);
+        this._onAddChannelAutocompleteSource = this._onAddChannelAutocompleteSource.bind(this);
+        this._onAddChatAutocompleteSelect = this._onAddChatAutocompleteSelect.bind(this);
+        this._onAddChatAutocompleteSource = this._onAddChatAutocompleteSource.bind(this);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.discuss}
+     */
+    get discuss() {
+        return this.env.messaging && this.env.messaging.discuss;
+    }
+
+    /**
+     * @returns {string}
+     */
+    get FIND_OR_CREATE_CHANNEL() {
+        return this.env._t("Find or create a channel...");
+    }
+
+    /**
+     * @returns {mail.thread[]}
+     */
+    get orderedMailboxes() {
+        return this.env.models['mail.thread']
+            .all(thread => thread.isPinned && thread.model === 'mail.box')
+            .sort((mailbox1, mailbox2) => {
+                if (mailbox1 === this.env.messaging.inbox) {
+                    return -1;
+                }
+                if (mailbox2 === this.env.messaging.inbox) {
+                    return 1;
+                }
+                if (mailbox1 === this.env.messaging.starred) {
+                    return -1;
+                }
+                if (mailbox2 === this.env.messaging.starred) {
+                    return 1;
+                }
+                const mailbox1Name = mailbox1.displayName;
+                const mailbox2Name = mailbox2.displayName;
+                mailbox1Name < mailbox2Name ? -1 : 1;
+            });
+    }
+
+    /**
+     * Return the list of chats that match the quick search value input.
+     *
+     * @returns {mail.thread[]}
+     */
+    get quickSearchPinnedAndOrderedChats() {
+        const allOrderedAndPinnedChats = this.env.models['mail.thread']
+            .all(thread =>
+                thread.channel_type === 'chat' &&
+                thread.isPinned &&
+                thread.model === 'mail.channel'
+            )
+            .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1);
+        if (!this.discuss.sidebarQuickSearchValue) {
+            return allOrderedAndPinnedChats;
+        }
+        const qsVal = this.discuss.sidebarQuickSearchValue.toLowerCase();
+        return allOrderedAndPinnedChats.filter(chat => {
+            const nameVal = chat.displayName.toLowerCase();
+            return nameVal.includes(qsVal);
+        });
+    }
+
+    /**
+     * Return the list of channels that match the quick search value input.
+     *
+     * @returns {mail.thread[]}
+     */
+    get quickSearchOrderedAndPinnedMultiUserChannels() {
+        const allOrderedAndPinnedMultiUserChannels = this.env.models['mail.thread']
+            .all(thread =>
+                thread.channel_type === 'channel' &&
+                thread.isPinned &&
+                thread.model === 'mail.channel'
+            )
+            .sort((c1, c2) => {
+                if (c1.displayName && !c2.displayName) {
+                    return -1;
+                } else if (!c1.displayName && c2.displayName) {
+                    return 1;
+                } else if (c1.displayName && c2.displayName && c1.displayName !== c2.displayName) {
+                    return c1.displayName.toLowerCase() < c2.displayName.toLowerCase() ? -1 : 1;
+                } else {
+                    return c1.id - c2.id;
+                }
+            });
+        if (!this.discuss.sidebarQuickSearchValue) {
+            return allOrderedAndPinnedMultiUserChannels;
+        }
+        const qsVal = this.discuss.sidebarQuickSearchValue.toLowerCase();
+        return allOrderedAndPinnedMultiUserChannels.filter(channel => {
+            const nameVal = channel.displayName.toLowerCase();
+            return nameVal.includes(qsVal);
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        if (!this.discuss) {
+            return;
+        }
+        if (this._quickSearchInputRef.el) {
+            this._quickSearchInputRef.el.value = this.discuss.sidebarQuickSearchValue;
+        }
+    }
+
+    /**
+     * @private
+     * @returns {Object}
+     */
+    _useStoreCompareDepth() {
+        return {
+            allOrderedAndPinnedChats: 1,
+            allOrderedAndPinnedMailboxes: 1,
+            allOrderedAndPinnedMultiUserChannels: 1,
+        };
+    }
+
+    /**
+     * @private
+     * @param {Object} props
+     * @returns {Object}
+     */
+    _useStoreSelector(props) {
+        const discuss = this.env.messaging.discuss;
+        return {
+            allOrderedAndPinnedChats: this.quickSearchPinnedAndOrderedChats,
+            allOrderedAndPinnedMailboxes: this.orderedMailboxes,
+            allOrderedAndPinnedMultiUserChannels: this.quickSearchOrderedAndPinnedMultiUserChannels,
+            allPinnedChannelAmount:
+                this.env.models['mail.thread']
+                .all(thread =>
+                    thread.isPinned &&
+                    thread.model === 'mail.channel'
+                ).length,
+            discussIsAddingChannel: discuss && discuss.isAddingChannel,
+            discussIsAddingChat: discuss && discuss.isAddingChat,
+            discussSidebarQuickSearchValue: discuss && discuss.sidebarQuickSearchValue,
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     * @param {Object} ui.item
+     * @param {integer} ui.item.id
+     */
+    _onAddChannelAutocompleteSelect(ev, ui) {
+        this.discuss.handleAddChannelAutocompleteSelect(ev, ui);
+    }
+
+    /**
+     * @private
+     * @param {Object} req
+     * @param {string} req.term
+     * @param {function} res
+     */
+    _onAddChannelAutocompleteSource(req, res) {
+        this.discuss.handleAddChannelAutocompleteSource(req, res);
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     * @param {Object} ui.item
+     * @param {integer} ui.item.id
+     */
+    _onAddChatAutocompleteSelect(ev, ui) {
+        this.discuss.handleAddChatAutocompleteSelect(ev, ui);
+    }
+
+    /**
+     * @private
+     * @param {Object} req
+     * @param {string} req.term
+     * @param {function} res
+     */
+    _onAddChatAutocompleteSource(req, res) {
+        this.discuss.handleAddChatAutocompleteSource(req, res);
+    }
+
+    /**
+     * Called when clicking on add channel icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickChannelAdd(ev) {
+        ev.stopPropagation();
+        this.discuss.update({ isAddingChannel: true });
+    }
+
+    /**
+     * Called when clicking on channel title.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickChannelTitle(ev) {
+        ev.stopPropagation();
+        return this.env.bus.trigger('do-action', {
+            action: {
+                name: this.env._t("Public Channels"),
+                type: 'ir.actions.act_window',
+                res_model: 'mail.channel',
+                views: [[false, 'kanban'], [false, 'form']],
+                domain: [['public', '!=', 'private']]
+            },
+        });
+    }
+
+    /**
+     * Called when clicking on add chat icon.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickChatAdd(ev) {
+        ev.stopPropagation();
+        this.discuss.update({ isAddingChat: true });
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onHideAddingItem(ev) {
+        ev.stopPropagation();
+        this.discuss.clearIsAddingItem();
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onInputQuickSearch(ev) {
+        ev.stopPropagation();
+        this.discuss.update({
+            sidebarQuickSearchValue: this._quickSearchInputRef.el.value,
+        });
+    }
+
+}
+
+Object.assign(DiscussSidebar, {
+    components,
+    props: {},
+    template: 'mail.DiscussSidebar',
+});
+
+return DiscussSidebar;
+
+});
diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss
new file mode 100644
index 00000000..3e49cddf
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss
@@ -0,0 +1,110 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_DiscussSidebar {
+    display: flex;
+    flex-flow: column;
+    width: $o-mail-chat-sidebar-width;
+
+    @include media-breakpoint-up(xl) {
+        width: $o-mail-chat-sidebar-width + 50px;
+    }
+}
+
+.o_DiscussSidebar_group {
+    display: flex;
+    flex-flow: column;
+    flex: 0 0 auto;
+}
+
+.o_DiscussSidebar_groupHeader {
+    display: flex;
+    align-items: center;
+    margin: 5px 0;
+}
+
+.o_DiscussSidebar_groupHeaderItem {
+    margin-left: 3px;
+    margin-right: 3px;
+
+    &:first-child {
+        margin-left: $o-mail-discuss-sidebar-active-indicator-margin-right;
+    }
+
+    &:last-child {
+        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
+    }
+}
+
+.o_DiscussSidebar_itemNew {
+    display: flex;
+    justify-content: center;
+}
+
+.o_DiscussSidebar_itemNewInput {
+    flex: 1 1 auto;
+    margin-left: $o-mail-discuss-sidebar-active-indicator-margin-right + 3px;
+    margin-right: $o-mail-discuss-sidebar-scrollbar-width;
+}
+
+.o_DiscussSidebar_quickSearch {
+    border-radius: 10px;
+    margin: 0 $o-mail-discuss-sidebar-scrollbar-width 10px;
+    padding: 3px 10px;
+}
+
+.o_DiscussSidebar_separator {
+    width: 100%;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_DiscussSidebar {
+    background-color: gray('900');
+    color: gray('300');
+}
+
+.o_DiscussSidebar_groupHeader {
+    font-size: $font-size-sm;
+    text-transform: uppercase;
+    font-weight: bolder;
+}
+
+.o_DiscussSidebar_groupHeaderItemAdd {
+    cursor: pointer;
+
+    &:not(:hover) {
+        color: gray('600');
+    }
+}
+
+.o_DiscussSidebar_groupTitle {
+
+    &:not(.o-clickable) {
+        color: gray('600');
+    }
+
+    &.o-clickable {
+        cursor: pointer;
+
+        &:not(:hover) {
+            color: gray('600');
+        }
+    }
+}
+
+.o_DiscussSidebar_itemNewInput {
+    outline: none;
+}
+
+.o_DiscussSidebar_quickSearch {
+    border: none;
+    outline: none;
+}
+
+.o_DiscussSidebar_separator {
+    background-color: gray('600');
+}
diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
new file mode 100644
index 00000000..4f9c10e5
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.DiscussSidebar" owl="1">
+        <div name="root" class="o_DiscussSidebar">
+            <div class="o_DiscussSidebar_group o_DiscussSidebar_groupMailbox">
+                <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId">
+                    <DiscussSidebarItem
+                        class="o_DiscussSidebar_item"
+                        threadLocalId="mailbox.localId"
+                    />
+                </t>
+            </div>
+            <hr class="o_DiscussSidebar_separator"/>
+            <t t-if="env.models['mail.thread'].all(thread => thread.isPinned and thread.model === 'mail.channel').length > 19">
+                <input class="o_DiscussSidebar_quickSearch" t-on-input="_onInputQuickSearch" placeholder="Quick search..." t-ref="quickSearchInput" t-esc="discuss.sidebarQuickSearchValue"/>
+            </t>
+            <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChannel">
+                <div class="o_DiscussSidebar_groupHeader">
+                    <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle o-clickable" t-on-click="_onClickChannelTitle">
+                        Channels
+                    </div>
+                    <div class="o-autogrow"/>
+                    <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChannelAdd" title="Add or join a channel"/>
+                </div>
+                <div class="o_DiscussSidebar_list">
+                    <t t-if="discuss.isAddingChannel">
+                        <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew">
+                            <AutocompleteInput
+                                class="o_DiscussSidebar_itemNewInput"
+                                customClass="'o_DiscussSidebar_newChannelAutocompleteSuggestions'"
+                                isFocusOnMount="true"
+                                isHtml="true"
+                                placeholder="FIND_OR_CREATE_CHANNEL"
+                                select="_onAddChannelAutocompleteSelect"
+                                source="_onAddChannelAutocompleteSource"
+                                t-on-o-hide="_onHideAddingItem"
+                            />
+                        </div>
+                    </t>
+                    <t t-foreach="quickSearchOrderedAndPinnedMultiUserChannels" t-as="channel" t-key="channel.localId">
+                        <DiscussSidebarItem
+                            class="o_DiscussSidebar_item"
+                            threadLocalId="channel.localId"
+                        />
+                    </t>
+                </div>
+            </div>
+            <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChat">
+                <div class="o_DiscussSidebar_groupHeader">
+                    <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle">
+                        Direct Messages
+                    </div>
+                    <div class="o-autogrow"/>
+                    <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChatAdd" title="Start a conversation"/>
+                </div>
+                <div class="o_DiscussSidebar_list">
+                    <t t-if="discuss.isAddingChat">
+                        <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew">
+                            <AutocompleteInput
+                                class="o_DiscussSidebar_itemNewInput"
+                                isFocusOnMount="true"
+                                placeholder="'Find or start a conversation...'"
+                                select="_onAddChatAutocompleteSelect"
+                                source="_onAddChatAutocompleteSource"
+                                t-on-o-hide="_onHideAddingItem"
+                            />
+                        </div>
+                    </t>
+                    <t t-foreach="quickSearchPinnedAndOrderedChats" t-as="chat" t-key="chat.localId">
+                        <DiscussSidebarItem
+                            class="o_DiscussSidebar_item"
+                            threadLocalId="chat.localId"
+                        />
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
new file mode 100644
index 00000000..0226035c
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js
@@ -0,0 +1,220 @@
+odoo.define('mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js', function (require) {
+'use strict';
+
+const components = {
+    EditableText: require('mail/static/src/components/editable_text/editable_text.js'),
+    ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const { isEventHandled } = require('mail/static/src/utils/utils.js');
+
+const Dialog = require('web.Dialog');
+
+const { Component } = owl;
+
+class DiscussSidebarItem extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const discuss = this.env.messaging.discuss;
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            const correspondent = thread ? thread.correspondent : undefined;
+            return {
+                correspondentName: correspondent && correspondent.name,
+                discussIsRenamingThread: discuss && discuss.renamingThreads.includes(thread),
+                isDiscussThread: discuss && discuss.thread === thread,
+                starred: this.env.messaging.starred,
+                thread,
+                threadChannelType: thread && thread.channel_type,
+                threadCounter: thread && thread.counter,
+                threadDisplayName: thread && thread.displayName,
+                threadGroupBasedSubscription: thread && thread.group_based_subscription,
+                threadLocalMessageUnreadCounter: thread && thread.localMessageUnreadCounter,
+                threadMassMailing: thread && thread.mass_mailing,
+                threadMessageNeedactionCounter: thread && thread.message_needaction_counter,
+                threadModel: thread && thread.model,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Get the counter of this discuss item, which is based on the thread type.
+     *
+     * @returns {integer}
+     */
+    get counter() {
+        if (this.thread.model === 'mail.box') {
+            return this.thread.counter;
+        } else if (this.thread.channel_type === 'channel') {
+            return this.thread.message_needaction_counter;
+        } else if (this.thread.channel_type === 'chat') {
+            return this.thread.localMessageUnreadCounter;
+        }
+        return 0;
+    }
+
+    /**
+     * @returns {mail.discuss}
+     */
+    get discuss() {
+        return this.env.messaging && this.env.messaging.discuss;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    hasUnpin() {
+        return this.thread.channel_type === 'chat';
+    }
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @returns {Promise}
+     */
+    _askAdminConfirmation() {
+        return new Promise(resolve => {
+            Dialog.confirm(this,
+                this.env._t("You are the administrator of this channel. Are you sure you want to leave?"),
+                {
+                    buttons: [
+                        {
+                            text: this.env._t("Leave"),
+                            classes: 'btn-primary',
+                            close: true,
+                            click: resolve
+                        },
+                        {
+                            text: this.env._t("Discard"),
+                            close: true
+                        }
+                    ]
+                }
+            );
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onCancelRenaming(ev) {
+        this.discuss.cancelThreadRenaming(this.thread);
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        if (isEventHandled(ev, 'EditableText.click')) {
+            return;
+        }
+        this.thread.open();
+    }
+
+    /**
+     * Stop propagation to prevent selecting this item.
+     *
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onClickedEditableText(ev) {
+        ev.stopPropagation();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    async _onClickLeave(ev) {
+        ev.stopPropagation();
+        if (this.thread.creator === this.env.messaging.currentUser) {
+            await this._askAdminConfirmation();
+        }
+        this.thread.unsubscribe();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickRename(ev) {
+        ev.stopPropagation();
+        this.discuss.setThreadRenaming(this.thread);
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickSettings(ev) {
+        ev.stopPropagation();
+        return this.env.bus.trigger('do-action', {
+            action: {
+                type: 'ir.actions.act_window',
+                res_model: this.thread.model,
+                res_id: this.thread.id,
+                views: [[false, 'form']],
+                target: 'current'
+            },
+        });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickUnpin(ev) {
+        ev.stopPropagation();
+        this.thread.unsubscribe();
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {string} ev.detail.newName
+     */
+    _onValidateEditableText(ev) {
+        ev.stopPropagation();
+        this.discuss.renameThread(this.thread, ev.detail.newName);
+    }
+
+}
+
+Object.assign(DiscussSidebarItem, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.DiscussSidebarItem',
+});
+
+return DiscussSidebarItem;
+
+});
diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss
new file mode 100644
index 00000000..aebc4b9a
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss
@@ -0,0 +1,109 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_DiscussSidebarItem {
+    display: flex;
+    align-items: center;
+    padding: map-get($spacers, 1) 0;
+
+    &:hover .o_DiscussSidebarItem_commands {
+        display: flex;
+    }
+}
+
+.o_DiscussSidebarItem_activeIndicator {
+    width: $o-mail-discuss-sidebar-active-indicator-width;
+    align-self: stretch;
+    flex: 0 0 auto;
+}
+
+.o_DiscussSidebarItem_command {
+    margin-left: 3px;
+    margin-right: 3px;
+
+    &:first-child {
+        margin-left: 0px;
+    }
+
+    &:last-child {
+        margin-right: 0px;
+    }
+}
+
+.o_DiscussSidebarItem_commands {
+    display: none;
+}
+
+.o_DiscussSidebarItem_item {
+    margin-left: 3px;
+    margin-right: 3px;
+
+    &:first-child {
+        margin-left: 0px;
+        margin-right: $o-mail-discuss-sidebar-active-indicator-margin-right;
+    }
+
+    &:last-child {
+        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
+    }
+}
+
+.o_DiscussSidebarItem_name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &.o-editable {
+        margin-left: $o-mail-discuss-sidebar-active-indicator-width + $o-mail-discuss-sidebar-active-indicator-margin-right;
+        margin-right: $o-mail-discuss-sidebar-scrollbar-width;
+    }
+}
+
+.o_DiscussSidebarItem_nameInput {
+    width: 100%;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_DiscussSidebarItem {
+    cursor: pointer;
+
+    &:hover {
+        background-color: darken(gray('900'), 5%);
+    }
+
+    &.o-starred-box {
+        .o_DiscussSidebarItem_counter {
+            border-color: gray('600');
+            background-color: gray('600');
+        }
+    }
+}
+
+.o_DiscussSidebarItem_activeIndicator.o-item-active {
+    background-color: $o-brand-primary;
+}
+
+.o_DiscussSidebarItem_command:not(:hover) {
+    color: gray('600');
+}
+
+.o_DiscussSidebarItem_counter {
+    background-color: $o-brand-primary;
+}
+
+.o_DiscussSidebarItem_name {
+
+    &.o-item-unread {
+        font-weight: bold;
+    }
+}
+
+.o_DiscussSidebarItem_nameInput {
+    outline: none;
+    border: none;
+    border-radius: 2px;
+}
diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
new file mode 100644
index 00000000..74aace21
--- /dev/null
+++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.DiscussSidebarItem" owl="1">
+        <div class="o_DiscussSidebarItem"
+            t-att-class="{
+                'o-active': thread and discuss.thread === thread,
+                'o-starred-box': thread and thread === env.messaging.starred,
+                'o-unread': thread and thread.localMessageUnreadCounter > 0,
+            }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined" t-att-data-thread-name="thread ? thread.displayName : undefined"
+        >
+            <t t-if="thread">
+                <div class=" o_DiscussSidebarItem_activeIndicator o_DiscussSidebarItem_item" t-att-class="{ 'o-item-active': discuss.thread === thread }"/>
+                <ThreadIcon class="o_DiscussSidebarItem_item" threadLocalId="thread.localId"/>
+                <t t-if="thread.channel_type === 'chat' and discuss.renamingThreads.includes(thread)">
+                    <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name o-editable">
+                        <EditableText
+                            class="o_DiscussSidebarItem_nameInput"
+                            placeholder="thread.correspondent ? thread.correspondent.name : thread.name"
+                            value="thread.displayName"
+                            t-on-o-cancel="_onCancelRenaming"
+                            t-on-o-clicked="_onClickedEditableText"
+                            t-on-o-validate="_onValidateEditableText"
+                        />
+                    </div>
+                </t>
+                <t t-else="">
+                    <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name" t-att-class="{ 'o-item-unread': thread.localMessageUnreadCounter > 0 }">
+                        <t t-esc="thread.displayName"/>
+                    </div>
+                    <t t-if="thread.mass_mailing">
+                        <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/>
+                    </t>
+                </t>
+                <div class="o-autogrow o_DiscussSidebarItem_item"/>
+                <t t-if="thread.model !== 'mail.box'">
+                    <div class="o_DiscussSidebarItem_commands o_DiscussSidebarItem_item">
+                        <t t-if="thread.channel_type === 'channel'">
+                            <div class="fa fa-cog o_DiscussSidebarItem_command o_DiscussSidebarItem_commandSettings" t-on-click="_onClickSettings" title="Channel settings" role="img"/>
+                            <t t-if="!thread.message_needaction_counter and !thread.group_based_subscription">
+                                <div class="o_DiscussSidebarItem_command o_DiscussSidebarItem_commandLeave fa fa-times" t-on-click="_onClickLeave" title="Leave this channel" role="img"/>
+                            </t>
+                        </t>
+                        <t t-if="thread.channel_type === 'chat'">
+                            <div class="o_DiscussSidebarItem_command o_DiscussSidebarItem_commandRename fa fa-cog" t-on-click="_onClickRename" title="Rename conversation" role="img"/>
+                        </t>
+                        <t t-if="hasUnpin()">
+                            <t t-if="!thread.localMessageUnreadCounter">
+                                <div class="fa fa-times o_DiscussSidebarItem_command o_DiscussSidebarItem_commandUnpin" t-on-click="_onClickUnpin" title="Unpin conversation" role="img"/>
+                            </t>
+                        </t>
+                    </div>
+                </t>
+                <t t-if="counter > 0">
+                    <div class="o_DiscussSidebarItem_counter o_DiscussSidebarItem_item badge badge-pill">
+                        <t t-esc="counter"/>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.js b/addons/mail/static/src/components/drop_zone/drop_zone.js
new file mode 100644
index 00000000..dcbb7019
--- /dev/null
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.js
@@ -0,0 +1,139 @@
+odoo.define('mail/static/src/components/drop_zone/drop_zone.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component, useState } = owl;
+
+class DropZone extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.state = useState({
+            /**
+             * Determine whether the user is dragging files over the dropzone.
+             * Useful to provide visual feedback in that case.
+             */
+            isDraggingInside: false,
+        });
+        /**
+         * Counts how many drag enter/leave happened on self and children. This
+         * ensures the drop effect stays active when dragging over a child.
+         */
+        this._dragCount = 0;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns whether the given node is self or a children of self.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        return this.el.contains(node);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Making sure that dragging content is external files.
+     * Ignoring other content dragging like text.
+     *
+     * @private
+     * @param {DataTransfer} dataTransfer
+     * @returns {boolean}
+     */
+    _isDragSourceExternalFile(dataTransfer) {
+        const dragDataType = dataTransfer.types;
+        if (dragDataType.constructor === window.DOMStringList) {
+            return dragDataType.contains('Files');
+        }
+        if (dragDataType.constructor === Array) {
+            return dragDataType.includes('Files');
+        }
+        return false;
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Shows a visual drop effect when dragging inside the dropzone.
+     *
+     * @private
+     * @param {DragEvent} ev
+     */
+    _onDragenter(ev) {
+        ev.preventDefault();
+        if (this._dragCount === 0) {
+            this.state.isDraggingInside = true;
+        }
+        this._dragCount++;
+    }
+
+    /**
+     * Hides the visual drop effect when dragging outside the dropzone.
+     *
+     * @private
+     * @param {DragEvent} ev
+     */
+    _onDragleave(ev) {
+        this._dragCount--;
+        if (this._dragCount === 0) {
+            this.state.isDraggingInside = false;
+        }
+    }
+
+    /**
+     * Prevents default (from the template) in order to receive the drop event.
+     * The drop effect cursor works only when set on dragover.
+     *
+     * @private
+     * @param {DragEvent} ev
+     */
+    _onDragover(ev) {
+        ev.preventDefault();
+        ev.dataTransfer.dropEffect = 'copy';
+    }
+
+    /**
+     * Triggers the `o-dropzone-files-dropped` event when new files are dropped
+     * on the dropzone, and then removes the visual drop effect.
+     *
+     * The parents should handle this event to process the files as they wish,
+     * such as uploading them.
+     *
+     * @private
+     * @param {DragEvent} ev
+     */
+    _onDrop(ev) {
+        ev.preventDefault();
+        if (this._isDragSourceExternalFile(ev.dataTransfer)) {
+            this.trigger('o-dropzone-files-dropped', {
+                files: ev.dataTransfer.files,
+            });
+        }
+        this.state.isDraggingInside = false;
+    }
+
+}
+
+Object.assign(DropZone, {
+    props: {},
+    template: 'mail.DropZone',
+});
+
+return DropZone;
+
+});
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.scss b/addons/mail/static/src/components/drop_zone/drop_zone.scss
new file mode 100644
index 00000000..202e4ceb
--- /dev/null
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.scss
@@ -0,0 +1,29 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_DropZone {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_DropZone {
+    color: $o-enterprise-primary-color;
+    background: rgba(255, 255, 255, 0.9);
+    border: 2px dashed $o-enterprise-primary-color;
+
+    &.o-dragging-inside {
+        border-width: 5px;
+    }
+}
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.xml b/addons/mail/static/src/components/drop_zone/drop_zone.xml
new file mode 100644
index 00000000..b3db940f
--- /dev/null
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.DropZone" owl="1">
+        <div class="o_DropZone" t-att-class="{ 'o-dragging-inside': state.isDraggingInside }" t-on-dragenter="_onDragenter" t-on-dragleave="_onDragleave" t-on-dragover="_onDragover" t-on-drop="_onDrop">
+            <h4>
+                Drag Files Here <i class="fa fa-download"/>
+            </h4>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/editable_text/editable_text.js b/addons/mail/static/src/components/editable_text/editable_text.js
new file mode 100644
index 00000000..be7e7ddc
--- /dev/null
+++ b/addons/mail/static/src/components/editable_text/editable_text.js
@@ -0,0 +1,91 @@
+odoo.define('mail/static/src/components/editable_text/editable_text.js', function (require) {
+'use strict';
+
+const { markEventHandled } = require('mail/static/src/utils/utils.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class EditableText extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+    }
+
+    mounted() {
+        this.el.focus();
+        this.el.setSelectionRange(0, (this.el.value && this.el.value.length) || 0);
+    }
+
+    willUnmount() {
+        this.trigger('o-cancel');
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onBlur(ev) {
+        this.trigger('o-cancel');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        markEventHandled(ev, 'EditableText.click');
+        this.trigger('o-clicked');
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        switch (ev.key) {
+            case 'Enter':
+                this._onKeydownEnter(ev);
+                break;
+            case 'Escape':
+                this.trigger('o-cancel');
+                break;
+        }
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownEnter(ev) {
+        const value = this.el.value;
+        const newName = value || this.props.placeholder;
+        if (this.props.value !== newName) {
+            this.trigger('o-validate', { newName });
+        } else {
+            this.trigger('o-cancel');
+        }
+    }
+
+}
+
+Object.assign(EditableText, {
+    defaultProps: {
+        placeholder: "",
+        value: "",
+    },
+    props: {
+        placeholder: String,
+        value: String,
+    },
+    template: 'mail.EditableText',
+});
+
+return EditableText;
+
+});
diff --git a/addons/mail/static/src/components/editable_text/editable_text.xml b/addons/mail/static/src/components/editable_text/editable_text.xml
new file mode 100644
index 00000000..5e3aa52a
--- /dev/null
+++ b/addons/mail/static/src/components/editable_text/editable_text.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.EditableText" owl="1">
+        <input class="o_EditableText" t-att-value="props.value" t-on-blur="_onBlur" t-on-click="_onClick" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.js b/addons/mail/static/src/components/emojis_popover/emojis_popover.js
new file mode 100644
index 00000000..a312eed4
--- /dev/null
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.js
@@ -0,0 +1,78 @@
+odoo.define('mail/static/src/components/emojis_popover/emojis_popover.js', function (require) {
+'use strict';
+
+const emojis = require('mail.emojis');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { Component } = owl;
+
+class EmojisPopover extends Component {
+
+    /**
+     * @param {...any} args
+     */
+    constructor(...args) {
+        super(...args);
+        this.emojis = emojis;
+        useShouldUpdateBasedOnProps();
+        useUpdate({ func: () => this._update() });
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _update() {
+        this.trigger('o-popover-compute');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    close() {
+        this.trigger('o-popover-close');
+    }
+
+    /**
+     * Returns whether the given node is self or a children of self.
+     *
+     * @param {Node} node
+     * @returns {boolean}
+     */
+    contains(node) {
+        if (!this.el) {
+            return false;
+        }
+        return this.el.contains(node);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickEmoji(ev) {
+        this.close();
+        this.trigger('o-emoji-selection', {
+            unicode: ev.currentTarget.dataset.unicode,
+        });
+    }
+
+}
+
+Object.assign(EmojisPopover, {
+    props: {},
+    template: 'mail.EmojisPopover',
+});
+
+return EmojisPopover;
+
+});
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.scss b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss
new file mode 100644
index 00000000..3a4559ae
--- /dev/null
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss
@@ -0,0 +1,22 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_EmojisPopover {
+    display: flex;
+    flex-flow: row wrap;
+    max-width: 200px;
+}
+
+.o_EmojisPopover_emoji {
+    font-size: 1.1em;
+    margin: 3px;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_EmojisPopover_emoji {
+    cursor: pointer;
+}
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.xml b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml
new file mode 100644
index 00000000..cac840bb
--- /dev/null
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.EmojisPopover" owl="1">
+        <div class="o_EmojisPopover">
+            <t t-foreach="emojis" t-as="emoji" t-key="emoji.unicode">
+                <span class="o_EmojisPopover_emoji" t-on-click="_onClickEmoji" t-att-title="emoji.description" t-att-data-source="emoji.sources[0]" t-att-data-unicode="emoji.unicode">
+                    <t t-esc="emoji.unicode"/>
+                </span>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.js b/addons/mail/static/src/components/file_uploader/file_uploader.js
new file mode 100644
index 00000000..4e57eadd
--- /dev/null
+++ b/addons/mail/static/src/components/file_uploader/file_uploader.js
@@ -0,0 +1,241 @@
+odoo.define('mail/static/src/components/file_uploader/file_uploader.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const core = require('web.core');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class FileUploader extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this._fileInputRef = useRef('fileInput');
+        this._fileUploadId = _.uniqueId('o_FileUploader_fileupload');
+        this._onAttachmentUploaded = this._onAttachmentUploaded.bind(this);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                attachmentLocalIds: 1,
+                newAttachmentExtraData: 3,
+            },
+        });
+    }
+
+    mounted() {
+        $(window).on(this._fileUploadId, this._onAttachmentUploaded);
+    }
+
+    willUnmount() {
+        $(window).off(this._fileUploadId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {FileList|Array} files
+     * @returns {Promise}
+     */
+    async uploadFiles(files) {
+        await this._unlinkExistingAttachments(files);
+        this._createTemporaryAttachments(files);
+        await this._performUpload(files);
+        this._fileInputRef.el.value = '';
+    }
+
+    openBrowserFileUploader() {
+        this._fileInputRef.el.click();
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @deprecated
+     * @private
+     * @param {Object} fileData
+     * @returns {mail.attachment}
+     */
+    _createAttachment(fileData) {
+        return this.env.models['mail.attachment'].create(Object.assign(
+            {},
+            fileData,
+            this.props.newAttachmentExtraData
+        ));
+    }
+
+    /**
+     * @private
+     * @param {File} file
+     * @returns {FormData}
+     */
+    _createFormData(file) {
+        let formData = new window.FormData();
+        formData.append('callback', this._fileUploadId);
+        formData.append('csrf_token', core.csrf_token);
+        formData.append('id', this.props.uploadId);
+        formData.append('model', this.props.uploadModel);
+        formData.append('ufile', file, file.name);
+        return formData;
+    }
+
+    /**
+     * @private
+     * @param {FileList|Array} files
+     */
+    _createTemporaryAttachments(files) {
+        for (const file of files) {
+            this.env.models['mail.attachment'].create(
+                Object.assign(
+                    {
+                        filename: file.name,
+                        isTemporary: true,
+                        name: file.name
+                    },
+                    this.props.newAttachmentExtraData
+                ),
+            );
+        }
+    }
+    /**
+     * @private
+     * @param {FileList|Array} files
+     * @returns {Promise}
+     */
+    async _performUpload(files) {
+        for (const file of files) {
+            const uploadingAttachment = this.env.models['mail.attachment'].find(attachment =>
+                attachment.isTemporary &&
+                attachment.filename === file.name
+            );
+            if (!uploadingAttachment) {
+                // Uploading attachment no longer exists.
+                // This happens when an uploading attachment is being deleted by user.
+                continue;
+            }
+            try {
+                const response = await this.env.browser.fetch('/web/binary/upload_attachment', {
+                    method: 'POST',
+                    body: this._createFormData(file),
+                    signal: uploadingAttachment.uploadingAbortController.signal,
+                });
+                let html = await response.text();
+                const template = document.createElement('template');
+                template.innerHTML = html.trim();
+                window.eval(template.content.firstChild.textContent);
+            } catch (e) {
+                if (e.name !== 'AbortError') {
+                    throw e;
+                }
+            }
+        }
+    }
+
+    /**
+     * @private
+     * @param {FileList|Array} files
+     * @returns {Promise}
+     */
+    async _unlinkExistingAttachments(files) {
+        for (const file of files) {
+            const attachment = this.props.attachmentLocalIds
+                .map(attachmentLocalId => this.env.models['mail.attachment'].get(attachmentLocalId))
+                .find(attachment => attachment.name === file.name && attachment.size === file.size);
+            // if the files already exits, delete the file before upload
+            if (attachment) {
+                attachment.remove();
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {jQuery.Event} ev
+     * @param {...Object} filesData
+     */
+    async _onAttachmentUploaded(ev, ...filesData) {
+        for (const fileData of filesData) {
+            const { error, filename, id, mimetype, name, size } = fileData;
+            if (error || !id) {
+                this.env.services['notification'].notify({
+                    type: 'danger',
+                    message: owl.utils.escape(error),
+                });
+                const relatedTemporaryAttachments = this.env.models['mail.attachment']
+                    .find(attachment =>
+                        attachment.filename === filename &&
+                        attachment.isTemporary
+                    );
+                for (const attachment of relatedTemporaryAttachments) {
+                    attachment.delete();
+                }
+                return;
+            }
+            // FIXME : needed to avoid problems on uploading
+            // Without this the useStore selector of component could be not called
+            // E.g. in attachment_box_tests.js
+            await new Promise(resolve => setTimeout(resolve));
+            const attachment = this.env.models['mail.attachment'].insert(
+                Object.assign(
+                    {
+                        filename,
+                        id,
+                        mimetype,
+                        name,
+                        size,
+                    },
+                    this.props.newAttachmentExtraData
+                ),
+            );
+            this.trigger('o-attachment-created', { attachment });
+        }
+    }
+
+    /**
+     * Called when there are changes in the file input.
+     *
+     * @private
+     * @param {Event} ev
+     * @param {EventTarget} ev.target
+     * @param {FileList|Array} ev.target.files
+     */
+    async _onChangeAttachment(ev) {
+        await this.uploadFiles(ev.target.files);
+    }
+
+}
+
+Object.assign(FileUploader, {
+    defaultProps: {
+        uploadId: 0,
+        uploadModel: 'mail.compose.message'
+    },
+    props: {
+        attachmentLocalIds: {
+            type: Array,
+            element: String,
+        },
+        newAttachmentExtraData: {
+            type: Object,
+            optional: true,
+        },
+        uploadId: Number,
+        uploadModel: String,
+    },
+    template: 'mail.FileUploader',
+});
+
+return FileUploader;
+
+});
diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.scss b/addons/mail/static/src/components/file_uploader/file_uploader.scss
new file mode 100644
index 00000000..32792313
--- /dev/null
+++ b/addons/mail/static/src/components/file_uploader/file_uploader.scss
@@ -0,0 +1,3 @@
+.o_FileUploader_input {
+    display: none !important;
+}
diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.xml b/addons/mail/static/src/components/file_uploader/file_uploader.xml
new file mode 100644
index 00000000..bf144037
--- /dev/null
+++ b/addons/mail/static/src/components/file_uploader/file_uploader.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.FileUploader" owl="1">
+        <div class="o_FileUploader">
+            <input class="o_FileUploader_input" t-on-change="_onChangeAttachment" multiple="true" type="file" t-ref="fileInput" t-key="'fileInput'"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/file_uploader/file_uploader_tests.js b/addons/mail/static/src/components/file_uploader/file_uploader_tests.js
new file mode 100644
index 00000000..4bf528f1
--- /dev/null
+++ b/addons/mail/static/src/components/file_uploader/file_uploader_tests.js
@@ -0,0 +1,94 @@
+odoo.define('mail/static/src/components/file_uploader/file_uploader_tests.js', function (require) {
+"use strict";
+
+const components = {
+    FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const {
+    file: {
+        createFile,
+        inputFiles,
+    },
+} = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('file_uploader', {}, function () {
+QUnit.module('file_uploader_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+        this.components = [];
+
+        this.createFileUploaderComponent = async otherProps => {
+            const props = Object.assign({ attachmentLocalIds: [] }, otherProps);
+            return createRootComponent(this, components.FileUploader, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('no conflicts between file uploaders', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const fileUploader1 = await this.createFileUploaderComponent();
+    const fileUploader2 = await this.createFileUploaderComponent();
+    const file1 = await createFile({
+        name: 'text1.txt',
+        content: 'hello, world',
+        contentType: 'text/plain',
+    });
+    inputFiles(
+        fileUploader1.el.querySelector('.o_FileUploader_input'),
+        [file1]
+    );
+    await nextAnimationFrame(); // we can't use afterNextRender as fileInput are display:none
+    assert.strictEqual(
+        this.env.models['mail.attachment'].all().length,
+        1,
+        'Uploaded file should be the only attachment created'
+    );
+
+    const file2 = await createFile({
+        name: 'text2.txt',
+        content: 'hello, world',
+        contentType: 'text/plain',
+    });
+    inputFiles(
+        fileUploader2.el.querySelector('.o_FileUploader_input'),
+        [file2]
+    );
+    await nextAnimationFrame();
+    assert.strictEqual(
+        this.env.models['mail.attachment'].all().length,
+        2,
+        'Uploaded file should be the only attachment added'
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/follow_button/follow_button.js b/addons/mail/static/src/components/follow_button/follow_button.js
new file mode 100644
index 00000000..3c1808cb
--- /dev/null
+++ b/addons/mail/static/src/components/follow_button/follow_button.js
@@ -0,0 +1,93 @@
+odoo.define('mail/static/src/components/follow_button/follow_button.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useState } = owl.hooks;
+
+class FollowButton extends Component {
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.state = useState({
+            /**
+             * Determine whether the unfollow button is highlighted or not.
+             */
+            isUnfollowButtonHighlighted: false,
+        });
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            return {
+                threadIsCurrentPartnerFollowing: thread && thread.isCurrentPartnerFollowing,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @return {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickFollow(ev) {
+        this.thread.follow();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickUnfollow(ev) {
+        this.thread.unfollow();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onMouseLeaveUnfollow(ev) {
+        this.state.isUnfollowButtonHighlighted = false;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onMouseEnterUnfollow(ev) {
+        this.state.isUnfollowButtonHighlighted = true;
+    }
+
+}
+
+Object.assign(FollowButton, {
+    defaultProps: {
+        isDisabled: false,
+    },
+    props: {
+        isDisabled: Boolean,
+        threadLocalId: String,
+    },
+    template: 'mail.FollowButton',
+});
+
+return FollowButton;
+
+});
diff --git a/addons/mail/static/src/components/follow_button/follow_button.scss b/addons/mail/static/src/components/follow_button/follow_button.scss
new file mode 100644
index 00000000..36fb60e7
--- /dev/null
+++ b/addons/mail/static/src/components/follow_button/follow_button.scss
@@ -0,0 +1,27 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_FollowButton {
+    display: flex;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_FollowButton_follow {
+    color: gray('600');
+}
+
+.o_FollowButton_unfollow {
+    color: gray('600');
+
+    &.o-following {
+        color: $green;
+    }
+
+    &.o-unfollow {
+        color: $orange;
+    }
+}
diff --git a/addons/mail/static/src/components/follow_button/follow_button.xml b/addons/mail/static/src/components/follow_button/follow_button.xml
new file mode 100644
index 00000000..00fc8d65
--- /dev/null
+++ b/addons/mail/static/src/components/follow_button/follow_button.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.FollowButton" owl="1">
+        <div class="o_FollowButton">
+            <t t-if="thread.isCurrentPartnerFollowing">
+                <button class="o_FollowButton_unfollow btn btn-link" t-att-class="{ 'o-following': !state.isUnfollowButtonHighlighted, 'o-unfollow': state.isUnfollowButtonHighlighted }" t-att-disabled="props.isDisabled" t-on-click="_onClickUnfollow" t-on-mouseenter="_onMouseEnterUnfollow" t-on-mouseleave="_onMouseLeaveUnfollow">
+                    <t t-if="state.isUnfollowButtonHighlighted">
+                        <i class="fa fa-times"/> Unfollow
+                    </t>
+                    <t t-else="">
+                        <i class="fa fa-check"/> Following
+                    </t>
+                </button>
+            </t>
+            <t t-else="">
+                <button class="o_FollowButton_follow btn btn-link" t-att-disabled="props.isDisabled" t-on-click="_onClickFollow">
+                    Follow
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/follow_button/follow_button_tests.js b/addons/mail/static/src/components/follow_button/follow_button_tests.js
new file mode 100644
index 00000000..0c4553c6
--- /dev/null
+++ b/addons/mail/static/src/components/follow_button/follow_button_tests.js
@@ -0,0 +1,278 @@
+odoo.define('mail/static/src/components/follow_button/follow_button_tests.js', function (require) {
+'use strict';
+
+const components = {
+    FollowButton: require('mail/static/src/components/follow_button/follow_button.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('follow_button', {}, function () {
+QUnit.module('follow_button_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createFollowButtonComponent = async (thread, otherProps = {}) => {
+            const props = Object.assign({ threadLocalId: thread.localId }, otherProps);
+            await createRootComponent(this, components.FollowButton, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base rendering not editable', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowButtonComponent(thread, { isDisabled: true });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton',
+        "should have follow button component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_follow',
+        "should have 'Follow' button"
+    );
+    assert.ok(
+        document.querySelector('.o_FollowButton_follow').disabled,
+        "'Follow' button should be disabled"
+    );
+});
+
+QUnit.test('base rendering editable', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowButtonComponent(thread);
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton',
+        "should have follow button component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_follow',
+        "should have 'Follow' button"
+    );
+    assert.notOk(
+        document.querySelector('.o_FollowButton_follow').disabled,
+        "'Follow' button should be disabled"
+    );
+});
+
+QUnit.test('hover following button', async function (assert) {
+    assert.expect(8);
+
+    this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] });
+    this.data['mail.followers'].records.push({
+        id: 1,
+        is_active: true,
+        is_editable: true,
+        partner_id: this.data.currentPartnerId,
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    thread.follow();
+    await this.createFollowButtonComponent(thread);
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton',
+        "should have follow button component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_unfollow',
+        "should have 'Unfollow' button"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowButton_unfollow').textContent.trim(),
+        'Following',
+        "'unfollow' button should display 'Following' as text when not hovered"
+    );
+    assert.containsNone(
+        document.querySelector('.o_FollowButton_unfollow'),
+        '.fa-times',
+        "'unfollow' button should not contain a cross icon when not hovered"
+    );
+    assert.containsOnce(
+        document.querySelector('.o_FollowButton_unfollow'),
+        '.fa-check',
+        "'unfollow' button should contain a check icon when not hovered"
+    );
+
+    await afterNextRender(() => {
+        document
+            .querySelector('.o_FollowButton_unfollow')
+            .dispatchEvent(new window.MouseEvent('mouseenter'));
+        }
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowButton_unfollow').textContent.trim(),
+        'Unfollow',
+        "'unfollow' button should display 'Unfollow' as text when hovered"
+    );
+    assert.containsOnce(
+        document.querySelector('.o_FollowButton_unfollow'),
+        '.fa-times',
+        "'unfollow' button should contain a cross icon when hovered"
+    );
+    assert.containsNone(
+        document.querySelector('.o_FollowButton_unfollow'),
+        '.fa-check',
+        "'unfollow' button should not contain a check icon when hovered"
+    );
+});
+
+QUnit.test('click on "follow" button', async function (assert) {
+    assert.expect(7);
+
+    this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] });
+    this.data['mail.followers'].records.push({
+        id: 1,
+        is_active: true,
+        is_editable: true,
+        partner_id: this.data.currentPartnerId,
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('message_subscribe')) {
+                assert.step('rpc:message_subscribe');
+            } else if (route.includes('mail/read_followers')) {
+                assert.step('rpc:mail/read_followers');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowButtonComponent(thread);
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton',
+        "should have follow button component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_follow',
+        "should have button follow"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowButton_follow').click();
+    });
+    assert.verifySteps([
+        'rpc:message_subscribe',
+        'rpc:mail/read_followers',
+    ]);
+    assert.containsNone(
+        document.body,
+        '.o_FollowButton_follow',
+        "should not have follow button after clicked on follow"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_unfollow',
+        "should have unfollow button after clicked on follow"
+    );
+});
+
+QUnit.test('click on "unfollow" button', async function (assert) {
+    assert.expect(7);
+
+    this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] });
+    this.data['mail.followers'].records.push({
+        id: 1,
+        is_active: true,
+        is_editable: true,
+        partner_id: this.data.currentPartnerId,
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('message_unsubscribe')) {
+                assert.step('rpc:message_unsubscribe');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    thread.follow();
+    await this.createFollowButtonComponent(thread);
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton',
+        "should have follow button component"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_FollowButton_follow',
+        "should not have button follow"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_unfollow',
+        "should have button unfollow"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_FollowButton_unfollow').click());
+    assert.verifySteps(['rpc:message_unsubscribe']);
+    assert.containsOnce(
+        document.body,
+        '.o_FollowButton_follow',
+        "should have follow button after clicked on unfollow"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_FollowButton_unfollow',
+        "should not have unfollow button after clicked on unfollow"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/follower/follower.js b/addons/mail/static/src/components/follower/follower.js
new file mode 100644
index 00000000..bafcd88a
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.js
@@ -0,0 +1,80 @@
+odoo.define('mail/static/src/components/follower/follower.js', function (require) {
+'use strict';
+
+const components = {
+    FollowerSubtypeList: require('mail/static/src/components/follower_subtype_list/follower_subtype_list.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class Follower extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const follower = this.env.models['mail.follower'].get(props.followerLocalId);
+            return [follower ? follower.__state : undefined];
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.follower}
+     */
+    get follower() {
+        return this.env.models['mail.follower'].get(this.props.followerLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDetails(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.follower.openProfile();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickEdit(ev) {
+        ev.preventDefault();
+        this.follower.showSubtypes();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickRemove(ev) {
+        this.follower.remove();
+    }
+
+}
+
+Object.assign(Follower, {
+    components,
+    props: {
+        followerLocalId: String,
+    },
+    template: 'mail.Follower',
+});
+
+return Follower;
+
+});
diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss
new file mode 100644
index 00000000..509a119f
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.scss
@@ -0,0 +1,55 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Follower {
+    display: flex;
+    flex-flow: row;
+    justify-content: space-between;
+    padding: map-get($spacers, 0);
+}
+
+.o_Follower_avatar {
+    width: 24px;
+    height: 24px;
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Follower_details {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    padding-left: map-get($spacers, 3);
+    padding-right: map-get($spacers, 3);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Follower_avatar {
+    border-radius: 50%;
+}
+
+.o_Follower_button {
+    border-radius: 0;
+
+    &:hover {
+        background: gray('400');
+        color: $black;
+    }
+}
+
+.o_Follower_details {
+    color: gray('700');
+
+    &:hover {
+        background: gray('400');
+        color: $black;
+    }
+
+    &.o-inactive {
+        opacity: 0.25;
+        font-style: italic;
+    }
+}
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
new file mode 100644
index 00000000..5cdc89d7
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Follower" owl="1">
+        <div class="o_Follower">
+            <t t-if="follower">
+                <a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
+                    <img class="o_Follower_avatar" t-attf-src="/web/image/{{ follower.resModel }}/{{ follower.resId }}/image_128" alt="Avatar"/>
+                    <span class="o_Follower_name" t-esc="follower.name or follower.displayName"/>
+                </a>
+                <t t-if="follower.isEditable">
+                    <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit">
+                        <i class="fa fa-pencil"/>
+                    </button>
+                    <button class="btn btn-icon o_Follower_button o_Follower_removeButton" title="Remove this follower" t-on-click="_onClickRemove">
+                        <i class="fa fa-remove"/>
+                    </button>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/follower/follower_tests.js b/addons/mail/static/src/components/follower/follower_tests.js
new file mode 100644
index 00000000..28058fc9
--- /dev/null
+++ b/addons/mail/static/src/components/follower/follower_tests.js
@@ -0,0 +1,380 @@
+odoo.define('mail/static/src/components/follower/follower_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Follower: require('mail/static/src/components/follower/follower.js'),
+};
+const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js');
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('follower', {}, function () {
+QUnit.module('follower_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createFollowerComponent = async (follower) => {
+            await createRootComponent(this, components.Follower, {
+                props: { followerLocalId: follower.localId },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base rendering not editable', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: false,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_avatar',
+        "should display the avatar of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_name',
+        "should display the name of the follower"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Follower_button',
+        "should have no button as follower is not editable"
+    );
+});
+
+QUnit.test('base rendering editable', async function (assert) {
+    assert.expect(6);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_avatar',
+        "should display the avatar of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_name',
+        "should display the name of the follower"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_editButton',
+        "should have an edit button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_removeButton',
+        "should have a remove button"
+    );
+});
+
+QUnit.test('click on channel follower details', async function (assert) {
+    assert.expect(7);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.res_id,
+            10,
+            "The redirect action should redirect to the right res id (10)"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'mail.channel',
+            "The redirect action should redirect to the right res model (mail.channel)"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The redirect action should be of type 'ir.actions.act_window'"
+        );
+    });
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['mail.channel'].records.push({ id: 10 });
+    await this.start({
+        env: { bus },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        channel: [['insert', { id: 10, model: 'mail.channel', name: "channel" }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+
+    document.querySelector('.o_Follower_details').click();
+    assert.verifySteps(
+        ['do_action'],
+        "clicking on channel should redirect to channel form view"
+    );
+});
+
+QUnit.test('click on partner follower details', async function (assert) {
+    assert.expect(7);
+
+    const openFormDef = makeDeferred();
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.res_id,
+            3,
+            "The redirect action should redirect to the right res id (3)"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'res.partner',
+            "The redirect action should redirect to the right res model (res.partner)"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The redirect action should be of type 'ir.actions.act_window'"
+        );
+        openFormDef.resolve();
+    });
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start({
+        env: { bus },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+        partner: [['insert', {
+            email: "bla@bla.bla",
+            id: this.env.messaging.currentPartner.id,
+            name: "François Perusse",
+        }]],
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_details',
+        "should display a details part"
+    );
+
+    document.querySelector('.o_Follower_details').click();
+    await openFormDef;
+    assert.verifySteps(
+        ['do_action'],
+        "clicking on follower should redirect to partner form view"
+    );
+});
+
+QUnit.test('click on edit follower', async function (assert) {
+    assert.expect(5);
+
+    this.data['res.partner'].records.push({ id: 100, message_follower_ids: [2] });
+    this.data['mail.followers'].records.push({
+        id: 2,
+        is_active: true,
+        is_editable: true,
+        partner_id: this.data.currentPartnerId,
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start({
+        hasDialog: true,
+        async mockRPC(route, args) {
+            if (route.includes('/mail/read_subscription_data')) {
+                assert.step('fetch_subtypes');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await thread.refreshFollowers();
+    await this.createFollowerComponent(thread.followers[0]);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_editButton',
+        "should display an edit button"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Follower_editButton').click());
+    assert.verifySteps(
+        ['fetch_subtypes'],
+        "clicking on edit follower should fetch subtypes"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtypeList',
+        "A dialog allowing to edit follower subtypes should have been created"
+    );
+});
+
+QUnit.test('edit follower and close subtype dialog', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({ id: 100 });
+    await this.start({
+        hasDialog: true,
+        async mockRPC(route, args) {
+            if (route.includes('/mail/read_subscription_data')) {
+                assert.step('fetch_subtypes');
+                return [{
+                    default: true,
+                    followed: true,
+                    internal: false,
+                    id: 1,
+                    name: "Dummy test",
+                    res_model: 'res.partner'
+                }];
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = await this.env.models['mail.follower'].create({
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+        partner: [['insert', {
+            email: "bla@bla.bla",
+            id: this.env.messaging.currentPartner.id,
+            name: "François Perusse",
+        }]],
+    });
+    await this.createFollowerComponent(follower);
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_editButton',
+        "should display an edit button"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Follower_editButton').click());
+    assert.verifySteps(
+        ['fetch_subtypes'],
+        "clicking on edit follower should fetch subtypes"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtypeList',
+        "dialog allowing to edit follower subtypes should have been created"
+    );
+
+    await afterNextRender(
+        () => document.querySelector('.o_FollowerSubtypeList_closeButton').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_DialogManager_dialog',
+        "follower subtype dialog should be closed after clicking on close button"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
new file mode 100644
index 00000000..996ef1f5
--- /dev/null
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
@@ -0,0 +1,154 @@
+odoo.define('mail/static/src/components/follower_list_menu/follower_list_menu.js', function (require) {
+'use strict';
+
+const components = {
+    Follower: require('mail/static/src/components/follower/follower.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef, useState } = owl.hooks;
+
+class FollowerListMenu extends Component {
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.state = useState({
+            /**
+             * Determine whether the dropdown is open or not.
+             */
+            isDropdownOpen: false,
+        });
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            const followers = thread ? thread.followers : [];
+            return {
+                followers,
+                threadChannelType: thread && thread.channel_type,
+            };
+        }, {
+            compareDepth: {
+                followers: 1,
+            },
+        });
+        this._dropdownRef = useRef('dropdown');
+        this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this);
+    }
+
+    mounted() {
+        document.addEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @return {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _hide() {
+        this.state.isDropdownOpen = false;
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        ev.stopPropagation();
+        switch (ev.key) {
+            case 'Escape':
+                ev.preventDefault();
+                this._hide();
+                break;
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAddChannels(ev) {
+        ev.preventDefault();
+        this._hide();
+        this.thread.promptAddChannelFollower();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAddFollowers(ev) {
+        ev.preventDefault();
+        this._hide();
+        this.thread.promptAddPartnerFollower();
+    }
+
+    /**
+     * Close the dropdown when clicking outside of it.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCaptureGlobal(ev) {
+        // since dropdown is conditionally shown based on state, dropdownRef can be null
+        if (this._dropdownRef.el && !this._dropdownRef.el.contains(ev.target)) {
+            this._hide();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickFollowersButton(ev) {
+        this.state.isDropdownOpen = !this.state.isDropdownOpen;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickFollower(ev) {
+        this._hide();
+    }
+}
+
+Object.assign(FollowerListMenu, {
+    components,
+    defaultProps: {
+        isDisabled: false,
+    },
+    props: {
+        isDisabled: Boolean,
+        threadLocalId: String,
+    },
+    template: 'mail.FollowerListMenu',
+});
+
+return FollowerListMenu;
+
+});
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
new file mode 100644
index 00000000..6e82134a
--- /dev/null
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss
@@ -0,0 +1,17 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_FollowerListMenu {
+    position: relative;
+}
+
+.o_FollowerListMenu_dropdown {
+    display: flex;
+    flex-flow: column;
+    overflow-y: auto;
+}
+
+.o_FollowerListMenu_followers {
+    display: flex;
+}
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
new file mode 100644
index 00000000..86b7f3a6
--- /dev/null
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.FollowerListMenu" owl="1">
+        <div class="o_FollowerListMenu" t-on-keydown="_onKeydown">
+            <div class="o_FollowerListMenu_followers" t-ref="dropdown">
+                <button class="o_FollowerListMenu_buttonFollowers btn btn-link" t-att-disabled="props.isDisabled" t-on-click="_onClickFollowersButton" title="Show Followers">
+                    <i class="fa fa-user"/>
+                    <span class="o_FollowerListMenu_buttonFollowersCount pl-1" t-esc="thread.followers.length"/>
+                </button>
+
+                <t t-if="state.isDropdownOpen">
+                    <div class="o_FollowerListMenu_dropdown dropdown-menu dropdown-menu-right" role="menu">
+                        <t t-if="thread.channel_type !== 'chat'">
+                            <a class="o_FollowerListMenu_addFollowersButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddFollowers">
+                                Add Followers
+                            </a>
+                        </t>
+                        <a class="o_FollowerListMenu_addChannelsButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddChannels">
+                            Add Channels
+                        </a>
+                        <t t-if="thread.followers.length > 0">
+                            <div role="separator" class="dropdown-divider"/>
+                            <t t-foreach="thread.followers" t-as="follower" t-key="follower.localId">
+                                <Follower
+                                    class="o_FollowerMenu_follower dropdown-item"
+                                    followerLocalId="follower.localId"
+                                    t-on-click="_onClickFollower"
+                                />
+                            </t>
+                        </t>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js
new file mode 100644
index 00000000..cf6fcf24
--- /dev/null
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js
@@ -0,0 +1,424 @@
+odoo.define('mail/static/src/components/follower_list_menu/follower_list_menu_tests.js', function (require) {
+'use strict';
+
+const components = {
+    FollowerListMenu: require('mail/static/src/components/follower_list_menu/follower_list_menu.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('follower_list_menu', {}, function () {
+QUnit.module('follower_list_menu_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createFollowerListMenuComponent = async (thread, otherProps = {}) => {
+            const props = Object.assign({ threadLocalId: thread.localId }, otherProps);
+            await createRootComponent(this, components.FollowerListMenu, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('base rendering not editable', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowerListMenuComponent(thread, { isDisabled: true });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+    assert.ok(
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').disabled,
+        "followers button should be disabled"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should not be opened"
+    );
+
+    document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should still be closed as button is disabled"
+    );
+});
+
+QUnit.test('base rendering editable', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowerListMenuComponent(thread);
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+    assert.notOk(
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').disabled,
+        "followers button should not be disabled"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should not be opened"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be opened"
+    );
+});
+
+QUnit.test('click on "add followers" button', async function (assert) {
+    assert.expect(16);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('action:open_view');
+        assert.strictEqual(
+            payload.action.context.default_res_model,
+            'res.partner',
+            "'The 'add followers' action should contain thread model in context'"
+        );
+        assert.notOk(
+            payload.action.context.mail_invite_follower_channel_only,
+            "The 'add followers' action should not be restricted to channels only"
+        );
+        assert.strictEqual(
+            payload.action.context.default_res_id,
+            100,
+            "The 'add followers' action should contain thread id in context"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'mail.wizard.invite',
+            "The 'add followers' action should be a wizard invite of mail module"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The 'add followers' action should be of type 'ir.actions.act_window'"
+        );
+        const partner = this.data['res.partner'].records.find(
+            partner => partner.id === payload.action.context.default_res_id
+        );
+        partner.message_follower_ids.push(1);
+        payload.options.on_close();
+    });
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['mail.followers'].records.push({
+        partner_id: 42,
+        email: "bla@bla.bla",
+        id: 1,
+        is_active: true,
+        is_editable: true,
+        name: "François Perusse",
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start({
+        env: { bus },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowerListMenuComponent(thread);
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent,
+        "0",
+        "Followers counter should be equal to 0"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be opened"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_addFollowersButton',
+        "followers dropdown should contain a 'Add followers' button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_addFollowersButton').click();
+    });
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be closed after click on 'Add followers'"
+    );
+    assert.verifySteps([
+        'action:open_view',
+    ]);
+    assert.strictEqual(
+        document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent,
+        "1",
+        "Followers counter should now be equal to 1"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerMenu_follower',
+        "Follower list should be refreshed and contain a follower"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Follower_name').textContent,
+        "François Perusse",
+        "Follower added in follower list should be the one added"
+    );
+});
+
+QUnit.test('click on "add channels" button', async function (assert) {
+    assert.expect(16);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('action:open_view');
+        assert.strictEqual(
+            payload.action.context.default_res_model,
+            'res.partner',
+            "'The 'add channels' action should contain thread model in context'"
+        );
+        assert.ok(
+            payload.action.context.mail_invite_follower_channel_only,
+            "The 'add channels' action should be restricted to channels only"
+        );
+        assert.strictEqual(
+            payload.action.context.default_res_id,
+            100,
+            "The 'add channels' action should contain thread id in context"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'mail.wizard.invite',
+            "The 'add channels' action should be a wizard invite of mail module"
+        );
+        assert.strictEqual(
+            payload.action.type,
+            "ir.actions.act_window",
+            "The 'add channels' action should be of type 'ir.actions.act_window'"
+        );
+        const partner = this.data['res.partner'].records.find(
+            partner => partner.id === payload.action.context.default_res_id
+        );
+        partner.message_follower_ids.push(1);
+        payload.options.on_close();
+    });
+    this.data['res.partner'].records.push({ id: 100 });
+    this.data['mail.followers'].records.push({
+        channel_id: 42,
+        email: "bla@bla.bla",
+        id: 1,
+        is_active: true,
+        is_editable: true,
+        name: "Supa channel",
+        res_id: 100,
+        res_model: 'res.partner',
+    });
+    await this.start({
+        env: { bus },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.createFollowerListMenuComponent(thread);
+
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu',
+        "should have followers menu component"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent,
+        "0",
+        "Followers counter should be equal to 0"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_buttonFollowers',
+        "should have followers button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be opened"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerListMenu_addChannelsButton',
+        "followers dropdown should contain a 'Add channels' button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_addChannelsButton').click();
+    });
+    assert.containsNone(
+        document.body,
+        '.o_FollowerListMenu_dropdown',
+        "followers dropdown should be closed after click on 'add channels'"
+    );
+    assert.verifySteps([
+        'action:open_view',
+    ]);
+    assert.strictEqual(
+        document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent,
+        "1",
+        "Followers counter should now be equal to 1"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerMenu_follower',
+        "Follower list should be refreshed and contain a follower"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Follower_name').textContent,
+        "Supa channel",
+        "Follower added in follower list should be the one added"
+    );
+});
+
+QUnit.test('click on remove follower', async function (assert) {
+    assert.expect(6);
+
+    const self = this;
+    await this.start({
+        async mockRPC(route, args) {
+            if (route.includes('message_unsubscribe')) {
+                assert.step('message_unsubscribe');
+                assert.deepEqual(
+                    args.args,
+                    [[100], [self.env.messaging.currentPartner.id], []],
+                    "message_unsubscribe should be called with right argument"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    await this.env.models['mail.follower'].create({
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+        partner: [['insert', {
+            email: "bla@bla.bla",
+            id: this.env.messaging.currentPartner.id,
+            name: "François Perusse",
+        }]],
+    });
+    await this.createFollowerListMenuComponent(thread);
+
+    await afterNextRender(() => {
+        document.querySelector('.o_FollowerListMenu_buttonFollowers').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Follower',
+        "should have follower component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Follower_removeButton',
+        "should display a remove button"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Follower_removeButton').click();
+    });
+    assert.verifySteps(
+        ['message_unsubscribe'],
+        "clicking on remove button should call 'message_unsubscribe' route"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Follower',
+        "should no longer have follower component"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.js b/addons/mail/static/src/components/follower_subtype/follower_subtype.js
new file mode 100644
index 00000000..ae3ba321
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.js
@@ -0,0 +1,71 @@
+odoo.define('mail/static/src/components/follower_subtype/follower_subtype.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class FollowerSubtype extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const followerSubtype = this.env.models['mail.follower_subtype'].get(props.followerSubtypeLocalId);
+            return [followerSubtype ? followerSubtype.__state : undefined];
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.follower|undefined}
+     */
+    get follower() {
+        return this.env.models['mail.follower'].get(this.props.followerLocalId);
+    }
+
+    /**
+     * @returns {mail.follower_subtype}
+     */
+    get followerSubtype() {
+        return this.env.models['mail.follower_subtype'].get(this.props.followerSubtypeLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on cancel button.
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onChangeCheckbox(ev) {
+        if (ev.target.checked) {
+            this.follower.selectSubtype(this.followerSubtype);
+        } else {
+            this.follower.unselectSubtype(this.followerSubtype);
+        }
+    }
+
+}
+
+Object.assign(FollowerSubtype, {
+    props: {
+        followerLocalId: String,
+        followerSubtypeLocalId: String,
+    },
+    template: 'mail.FollowerSubtype',
+});
+
+return FollowerSubtype;
+
+});
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.scss b/addons/mail/static/src/components/follower_subtype/follower_subtype.scss
new file mode 100644
index 00000000..3be0ad46
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.scss
@@ -0,0 +1,27 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_FollowerSubtype_checkbox {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_FollowerSubtype_label {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: map-get($spacers, 0);
+    padding: map-get($spacers, 2);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_FollowerSubtype_label {
+    cursor: pointer;
+    &:hover {
+        background-color: gray('200');
+    }
+}
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
new file mode 100644
index 00000000..b2380009
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.FollowerSubtype" owl="1">
+        <div class="o_FollowerSubtype">
+            <label class="o_FollowerSubtype_label">
+                <input class="o_FollowerSubtype_checkbox" type="checkbox" t-att-checked="follower.selectedSubtypes.includes(followerSubtype) ? 'checked': ''" t-on-change="_onChangeCheckbox"/>
+                <t t-esc="followerSubtype.name"/>
+            </label>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js b/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js
new file mode 100644
index 00000000..7c802a7a
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js
@@ -0,0 +1,233 @@
+odoo.define('mail/static/src/components/follower_subtype/follower_subtype_tests.js', function (require) {
+'use strict';
+
+const components = {
+    FollowerSubtype: require('mail/static/src/components/follower_subtype/follower_subtype.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('follower_subtype', {}, function () {
+QUnit.module('follower_subtype_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createFollowerSubtypeComponent = async ({ follower, followerSubtype }) => {
+            const props = {
+                followerLocalId: follower.localId,
+                followerSubtypeLocalId: followerSubtype.localId,
+            };
+            await createRootComponent(this, components.FollowerSubtype, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('simplest layout of a followed subtype', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = this.env.models['mail.follower'].create({
+        channel: [['insert', {
+            id: 1,
+            model: 'mail.channel',
+            name: "François Perusse",
+        }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    const followerSubtype = this.env.models['mail.follower_subtype'].create({
+        id: 1,
+        isDefault: true,
+        isInternal: false,
+        name: "Dummy test",
+        resModel: 'res.partner'
+    });
+    follower.update({
+        selectedSubtypes: [['link', followerSubtype]],
+        subtypes: [['link', followerSubtype]],
+    });
+    await this.createFollowerSubtypeComponent({
+        follower,
+        followerSubtype,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype',
+        "should have follower subtype component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype_label',
+        "should have a label"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype_checkbox',
+        "should have a checkbox"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowerSubtype_label').textContent,
+        "Dummy test",
+        "should have the name of the subtype as label"
+    );
+    assert.ok(
+        document.querySelector('.o_FollowerSubtype_checkbox').checked,
+        "checkbox should be checked as follower subtype is followed"
+    );
+});
+
+QUnit.test('simplest layout of a not followed subtype', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = this.env.models['mail.follower'].create({
+        channel: [['insert', {
+            id: 1,
+            model: 'mail.channel',
+            name: "François Perusse",
+        }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    const followerSubtype = this.env.models['mail.follower_subtype'].create({
+        id: 1,
+        isDefault: true,
+        isInternal: false,
+        name: "Dummy test",
+        resModel: 'res.partner'
+    });
+    follower.update({ subtypes: [['link', followerSubtype]] });
+    await this.createFollowerSubtypeComponent({
+        follower,
+        followerSubtype,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype',
+        "should have follower subtype component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype_label',
+        "should have a label"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype_checkbox',
+        "should have a checkbox"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_FollowerSubtype_label').textContent,
+        "Dummy test",
+        "should have the name of the subtype as label"
+    );
+    assert.notOk(
+        document.querySelector('.o_FollowerSubtype_checkbox').checked,
+        "checkbox should not be checked as follower subtype is not followed"
+    );
+});
+
+QUnit.test('toggle follower subtype checkbox', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+
+    const thread = this.env.models['mail.thread'].create({
+        id: 100,
+        model: 'res.partner',
+    });
+    const follower = this.env.models['mail.follower'].create({
+        channel: [['insert', {
+            id: 1,
+            model: 'mail.channel',
+            name: "François Perusse",
+        }]],
+        followedThread: [['link', thread]],
+        id: 2,
+        isActive: true,
+        isEditable: true,
+    });
+    const followerSubtype = this.env.models['mail.follower_subtype'].create({
+        id: 1,
+        isDefault: true,
+        isInternal: false,
+        name: "Dummy test",
+        resModel: 'res.partner'
+    });
+    follower.update({ subtypes: [['link', followerSubtype]] });
+    await this.createFollowerSubtypeComponent({
+        follower,
+        followerSubtype,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype',
+        "should have follower subtype component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_FollowerSubtype_checkbox',
+        "should have a checkbox"
+    );
+    assert.notOk(
+        document.querySelector('.o_FollowerSubtype_checkbox').checked,
+        "checkbox should not be checked as follower subtype is not followed"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_FollowerSubtype_checkbox').click()
+    );
+    assert.ok(
+        document.querySelector('.o_FollowerSubtype_checkbox').checked,
+        "checkbox should now be checked"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_FollowerSubtype_checkbox').click()
+    );
+    assert.notOk(
+        document.querySelector('.o_FollowerSubtype_checkbox').checked,
+        "checkbox should be no more checked"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js
new file mode 100644
index 00000000..d5cca5b5
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js
@@ -0,0 +1,89 @@
+odoo.define('mail/static/src/components/follower_subtype_list/follower_subtype_list.js', function (require) {
+'use strict';
+
+const components = {
+    FollowerSubtype: require('mail/static/src/components/follower_subtype/follower_subtype.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component, QWeb } = owl;
+
+class FollowerSubtypeList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const followerSubtypeList = this.env.models['mail.follower_subtype_list'].get(props.localId);
+            const follower = followerSubtypeList
+                ? followerSubtypeList.follower
+                : undefined;
+            const followerSubtypes = follower ? follower.subtypes : [];
+            return {
+                follower: follower ? follower.__state : undefined,
+                followerSubtypeList: followerSubtypeList
+                    ? followerSubtypeList.__state
+                    : undefined,
+                followerSubtypes: followerSubtypes.map(subtype => subtype.__state),
+            };
+        }, {
+            compareDepth: {
+                followerSubtypes: 1,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.follower_subtype_list}
+     */
+    get followerSubtypeList() {
+        return this.env.models['mail.follower_subtype_list'].get(this.props.localId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when clicking on cancel button.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCancel(ev) {
+        this.followerSubtypeList.follower.closeSubtypes();
+    }
+
+    /**
+     * Called when clicking on apply button.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickApply(ev) {
+        this.followerSubtypeList.follower.updateSubtypes();
+    }
+
+}
+
+Object.assign(FollowerSubtypeList, {
+    components,
+    props: {
+        localId: String,
+    },
+    template: 'mail.FollowerSubtypeList',
+});
+
+QWeb.registerComponent('FollowerSubtypeList', FollowerSubtypeList);
+
+return FollowerSubtypeList;
+
+});
diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss
new file mode 100644
index 00000000..82aef9fc
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss
@@ -0,0 +1,8 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_FollowerSubtypeList_subtypes {
+    display: flex;
+    flex-flow: column;
+}
diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
new file mode 100644
index 00000000..ad477d9d
--- /dev/null
+++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.FollowerSubtypeList" owl="1">
+        <div class="o_FollowerSubtypeList modal-dialog">
+            <t t-if="followerSubtypeList">
+                <div class="modal-content">
+                    <header class="modal-header">
+                        <h4 class="modal-title">
+                            Edit Subscription of <t t-esc="followerSubtypeList.follower.name"/>
+                        </h4>
+                        <i class="o_FollowerSubtypeList_closeButton close fa fa-times" aria-label="Close" t-on-click="_onClickCancel"/>
+                    </header>
+                    <main class="modal-body">
+                        <div class="o_FollowerSubtypeList_subtypes">
+                            <t t-foreach="followerSubtypeList.follower.subtypes" t-as="subtype" t-key="subtype.id">
+                                <FollowerSubtype
+                                    class="o_FollowerSubtypeList_subtype"
+                                    followerLocalId="followerSubtypeList.follower.localId"
+                                    followerSubtypeLocalId="subtype.localId"
+                                />
+                            </t>
+                        </div>
+                    </main>
+                    <div class="modal-footer">
+                        <button class="o-apply btn btn-primary" t-on-click="_onClickApply">
+                            Apply
+                        </button>
+                        <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/mail_template/mail_template.js b/addons/mail/static/src/components/mail_template/mail_template.js
new file mode 100644
index 00000000..32c334be
--- /dev/null
+++ b/addons/mail/static/src/components/mail_template/mail_template.js
@@ -0,0 +1,81 @@
+odoo.define('mail/static/src/components/mail_template/mail_template.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class MailTemplate extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const activity = this.env.models['mail.activity'].get(props.activityLocalId);
+            const mailTemplate = this.env.models['mail.mail_template'].get(props.mailTemplateLocalId);
+            return {
+                activity: activity ? activity.__state : undefined,
+                mailTemplate: mailTemplate ? mailTemplate.__state : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.activity}
+     */
+    get activity() {
+        return this.env.models['mail.activity'].get(this.props.activityLocalId);
+    }
+
+    /**
+     * @returns {mail.mail_template}
+     */
+    get mailTemplate() {
+        return this.env.models['mail.mail_template'].get(this.props.mailTemplateLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickPreview(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.mailTemplate.preview(this.activity);
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickSend(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        this.mailTemplate.send(this.activity);
+    }
+
+}
+
+Object.assign(MailTemplate, {
+    props: {
+        activityLocalId: String,
+        mailTemplateLocalId: String,
+    },
+    template: 'mail.MailTemplate',
+});
+
+return MailTemplate;
+
+});
diff --git a/addons/mail/static/src/components/mail_template/mail_template.scss b/addons/mail/static/src/components/mail_template/mail_template.scss
new file mode 100644
index 00000000..7800ab62
--- /dev/null
+++ b/addons/mail/static/src/components/mail_template/mail_template.scss
@@ -0,0 +1,27 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MailTemplate {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+}
+
+.o_MailTemplate_button {
+    padding-top: map-get($spacers, 0);
+    padding-bottom: map-get($spacers, 0);
+}
+
+.o_MailTemplate_name {
+    margin-inline-start: map-get($spacers, 2);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_MailTemplate_text {
+    color: gray('500');
+    font-style: italic;
+}
diff --git a/addons/mail/static/src/components/mail_template/mail_template.xml b/addons/mail/static/src/components/mail_template/mail_template.xml
new file mode 100644
index 00000000..48f7c050
--- /dev/null
+++ b/addons/mail/static/src/components/mail_template/mail_template.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MailTemplate" owl="1">
+        <div class="o_MailTemplate">
+            <t t-if="mailTemplate">
+                <i class="fa fa-envelope-o" title="Mail" role="img"/>
+                <span class="o_MailTemplate_name" t-esc="mailTemplate.name"/>
+                <span>:</span>
+                <button
+                    class="o_MailTemplate_button o_MailTemplate_preview btn btn-link"
+                    t-att-data-mail-template-id="mailTemplate.id"
+                    t-on-click="_onClickPreview"
+                >
+                    Preview
+                </button>
+                <span class="o_MailTemplate_text">or</span>
+                <button
+                    class="o_MailTemplate_button o_MailTemplate_send btn btn-link"
+                    t-att-data-mail-template-id="mailTemplate.id"
+                    t-on-click="_onClickSend"
+                >
+                    Send Now
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
new file mode 100644
index 00000000..a357c024
--- /dev/null
+++ b/addons/mail/static/src/components/message/message.js
@@ -0,0 +1,680 @@
+odoo.define('mail/static/src/components/message/message.js', function (require) {
+'use strict';
+
+const components = {
+    AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'),
+    MessageSeenIndicator: require('mail/static/src/components/message_seen_indicator/message_seen_indicator.js'),
+    ModerationBanDialog: require('mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js'),
+    ModerationDiscardDialog: require('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js'),
+    ModerationRejectDialog: require('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js'),
+    NotificationPopover: require('mail/static/src/components/notification_popover/notification_popover.js'),
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { _lt } = require('web.core');
+const { format } = require('web.field_utils');
+const { getLangDatetimeFormat } = require('web.time');
+
+const { Component, useState } = owl;
+const { useRef } = owl.hooks;
+
+const READ_MORE = _lt("read more");
+const READ_LESS = _lt("read less");
+const { isEventHandled, markEventHandled } = require('mail/static/src/utils/utils.js');
+
+class Message extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.state = useState({
+            // Determine if the moderation ban dialog is displayed.
+            hasModerationBanDialog: false,
+            // Determine if the moderation discard dialog is displayed.
+            hasModerationDiscardDialog: false,
+            // Determine if the moderation reject dialog is displayed.
+            hasModerationRejectDialog: false,
+            /**
+             * Determine whether the message is clicked. When message is in
+             * clicked state, it keeps displaying the commands.
+             */
+            isClicked: false,
+        });
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const message = this.env.models['mail.message'].get(props.messageLocalId);
+            const author = message ? message.author : undefined;
+            const partnerRoot = this.env.messaging.partnerRoot;
+            const originThread = message ? message.originThread : undefined;
+            const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId);
+            const thread = threadView ? threadView.thread : undefined;
+            return {
+                attachments: message
+                    ? message.attachments.map(attachment => attachment.__state)
+                    : [],
+                author,
+                authorAvatarUrl: author && author.avatarUrl,
+                authorImStatus: author && author.im_status,
+                authorNameOrDisplayName: author && author.nameOrDisplayName,
+                correspondent: thread && thread.correspondent,
+                hasMessageCheckbox: message ? message.hasCheckbox : false,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                isMessageChecked: message && threadView
+                    ? message.isChecked(thread, threadView.stringifiedDomain)
+                    : false,
+                message: message ? message.__state : undefined,
+                notifications: message ? message.notifications.map(notif => notif.__state) : [],
+                originThread,
+                originThreadModel: originThread && originThread.model,
+                originThreadName: originThread && originThread.name,
+                originThreadUrl: originThread && originThread.url,
+                partnerRoot,
+                thread,
+                threadHasSeenIndicators: thread && thread.hasSeenIndicators,
+                threadMassMailing: thread && thread.mass_mailing,
+            };
+        }, {
+            compareDepth: {
+                attachments: 1,
+                notifications: 1,
+            },
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * The intent of the reply button depends on the last rendered state.
+         */
+        this._wasSelected;
+        /**
+         * Value of the last rendered prettyBody. Useful to compare to new value
+         * to decide if it has to be updated.
+         */
+        this._lastPrettyBody;
+        /**
+         * Reference to element containing the prettyBody. Useful to be able to
+         * replace prettyBody with new value in JS (which is faster than t-raw).
+         */
+        this._prettyBodyRef = useRef('prettyBody');
+        /**
+         * Reference to the content of the message.
+         */
+        this._contentRef = useRef('content');
+        /**
+         * To get checkbox state.
+         */
+        this._checkboxRef = useRef('checkbox');
+        /**
+         * Id of setInterval used to auto-update time elapsed of message at
+         * regular time.
+         */
+        this._intervalId = undefined;
+        this._constructor();
+    }
+
+    /**
+     * Allows patching constructor.
+     */
+    _constructor() {}
+
+    willUnmount() {
+        clearInterval(this._intervalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    get avatar() {
+        if (
+            this.message.author &&
+            this.message.author === this.env.messaging.partnerRoot
+        ) {
+            return '/mail/static/src/img/odoobot.png';
+        } else if (this.message.author) {
+            // TODO FIXME for public user this might not be accessible. task-2223236
+            // we should probably use the correspondig attachment id + access token
+            // or create a dedicated route to get message image, checking the access right of the message
+            return this.message.author.avatarUrl;
+        } else if (this.message.message_type === 'email') {
+            return '/mail/static/src/img/email_icon.png';
+        }
+        return '/mail/static/src/img/smiley/avatar.jpg';
+    }
+
+    /**
+     * Get the date time of the message at current user locale time.
+     *
+     * @returns {string}
+     */
+    get datetime() {
+        return this.message.date.format(getLangDatetimeFormat());
+    }
+
+    /**
+     * Determines whether author open chat feature is enabled on message.
+     *
+     * @returns {boolean}
+     */
+    get hasAuthorOpenChat() {
+        if (!this.message.author) {
+            return false;
+        }
+        if (
+            this.threadView &&
+            this.threadView.thread &&
+            this.threadView.thread.correspondent === this.message.author
+        ) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Tell whether the bottom of this message is visible or not.
+     *
+     * @param {Object} param0
+     * @param {integer} [offset=0]
+     * @returns {boolean}
+     */
+    isBottomVisible({ offset=0 } = {}) {
+        if (!this.el) {
+            return false;
+        }
+        const elRect = this.el.getBoundingClientRect();
+        if (!this.el.parentNode) {
+            return false;
+        }
+        const parentRect = this.el.parentNode.getBoundingClientRect();
+        // bottom with (double) 10px offset
+        return (
+            elRect.bottom < parentRect.bottom + offset &&
+            parentRect.top < elRect.bottom + offset
+        );
+    }
+
+    /**
+     * Tell whether the message is partially visible on browser window or not.
+     *
+     * @returns {boolean}
+     */
+    isPartiallyVisible() {
+        const elRect = this.el.getBoundingClientRect();
+        if (!this.el.parentNode) {
+            return false;
+        }
+        const parentRect = this.el.parentNode.getBoundingClientRect();
+        // intersection with 5px offset
+        return (
+            elRect.top < parentRect.bottom + 5 &&
+            parentRect.top < elRect.bottom + 5
+        );
+    }
+
+    /**
+     * @returns {mail.message}
+     */
+    get message() {
+        return this.env.models['mail.message'].get(this.props.messageLocalId);
+    }
+    /**
+     * @returns {string}
+     */
+    get OPEN_CHAT() {
+        return this.env._t("Open chat");
+    }
+
+    /**
+     * Make this message viewable in its enclosing scroll environment (usually
+     * message list).
+     *
+     * @param {Object} [param0={}]
+     * @param {string} [param0.behavior='auto']
+     * @param {string} [param0.block='end']
+     * @returns {Promise}
+     */
+    async scrollIntoView({ behavior = 'auto', block = 'end' } = {}) {
+        this.el.scrollIntoView({
+            behavior,
+            block,
+            inline: 'nearest',
+        });
+        if (behavior === 'smooth') {
+            return new Promise(resolve => setTimeout(resolve, 500));
+        } else {
+            return Promise.resolve();
+        }
+    }
+
+    /**
+     * Get the shorttime format of the message date.
+     *
+     * @returns {string}
+     */
+    get shortTime() {
+        return this.message.date.format('hh:mm');
+    }
+
+    /**
+     * @returns {mail.thread_view}
+     */
+    get threadView() {
+        return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId);
+    }
+
+    /**
+     * @returns {Object}
+     */
+    get trackingValues() {
+        return this.message.tracking_value_ids.map(trackingValue => {
+            const value = Object.assign({}, trackingValue);
+            value.changed_field = _.str.sprintf(this.env._t("%s:"), value.changed_field);
+            /**
+             * Maps tracked field type to a JS formatter. Tracking values are
+             * not always stored in the same field type as their origin type.
+             * Field types that are not listed here are not supported by
+             * tracking in Python. Also see `create_tracking_values` in Python.
+             */
+            switch (value.field_type) {
+                case 'boolean':
+                    value.old_value = format.boolean(value.old_value, undefined, { forceString: true });
+                    value.new_value = format.boolean(value.new_value, undefined, { forceString: true });
+                    break;
+                /**
+                 * many2one formatter exists but is expecting id/name_get or data
+                 * object but only the target record name is known in this context.
+                 *
+                 * Selection formatter exists but requires knowing all
+                 * possibilities and they are not given in this context.
+                 */
+                case 'char':
+                case 'many2one':
+                case 'selection':
+                    value.old_value = format.char(value.old_value);
+                    value.new_value = format.char(value.new_value);
+                    break;
+                case 'date':
+                    if (value.old_value) {
+                        value.old_value = moment.utc(value.old_value);
+                    }
+                    if (value.new_value) {
+                        value.new_value = moment.utc(value.new_value);
+                    }
+                    value.old_value = format.date(value.old_value);
+                    value.new_value = format.date(value.new_value);
+                    break;
+                case 'datetime':
+                    if (value.old_value) {
+                        value.old_value = moment.utc(value.old_value);
+                    }
+                    if (value.new_value) {
+                        value.new_value = moment.utc(value.new_value);
+                    }
+                    value.old_value = format.datetime(value.old_value);
+                    value.new_value = format.datetime(value.new_value);
+                    break;
+                case 'float':
+                    value.old_value = format.float(value.old_value);
+                    value.new_value = format.float(value.new_value);
+                    break;
+                case 'integer':
+                    value.old_value = format.integer(value.old_value);
+                    value.new_value = format.integer(value.new_value);
+                    break;
+                case 'monetary':
+                    value.old_value = format.monetary(value.old_value, undefined, { forceString: true });
+                    value.new_value = format.monetary(value.new_value, undefined, { forceString: true });
+                    break;
+                case 'text':
+                    value.old_value = format.text(value.old_value);
+                    value.new_value = format.text(value.new_value);
+                    break;
+            }
+            return value;
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Modifies the message to add the 'read more/read less' functionality
+     * All element nodes with 'data-o-mail-quote' attribute are concerned.
+     * All text nodes after a ``#stopSpelling`` element are concerned.
+     * Those text nodes need to be wrapped in a span (toggle functionality).
+     * All consecutive elements are joined in one 'read more/read less'.
+     *
+     * FIXME This method should be rewritten (task-2308951)
+     *
+     * @private
+     * @param {jQuery} $element
+     */
+    _insertReadMoreLess($element) {
+        const groups = [];
+        let readMoreNodes;
+
+        // nodeType 1: element_node
+        // nodeType 3: text_node
+        const $children = $element.contents()
+            .filter((index, content) =>
+                content.nodeType === 1 || (content.nodeType === 3 && content.nodeValue.trim())
+            );
+
+        for (const child of $children) {
+            let $child = $(child);
+
+            // Hide Text nodes if "stopSpelling"
+            if (
+                child.nodeType === 3 &&
+                $child.prevAll('[id*="stopSpelling"]').length > 0
+            ) {
+                // Convert Text nodes to Element nodes
+                $child = $('<span>', {
+                    text: child.textContent,
+                    'data-o-mail-quote': '1',
+                });
+                child.parentNode.replaceChild($child[0], child);
+            }
+
+            // Create array for each 'read more' with nodes to toggle
+            if (
+                $child.attr('data-o-mail-quote') ||
+                (
+                    $child.get(0).nodeName === 'BR' &&
+                    $child.prev('[data-o-mail-quote="1"]').length > 0
+                )
+            ) {
+                if (!readMoreNodes) {
+                    readMoreNodes = [];
+                    groups.push(readMoreNodes);
+                }
+                $child.hide();
+                readMoreNodes.push($child);
+            } else {
+                readMoreNodes = undefined;
+                this._insertReadMoreLess($child);
+            }
+        }
+
+        for (const group of groups) {
+            // Insert link just before the first node
+            const $readMoreLess = $('<a>', {
+                class: 'o_Message_readMoreLess',
+                href: '#',
+                text: READ_MORE,
+            }).insertBefore(group[0]);
+
+            // Toggle All next nodes
+            let isReadMore = true;
+            $readMoreLess.click(e => {
+                e.preventDefault();
+                isReadMore = !isReadMore;
+                for (const $child of group) {
+                    $child.hide();
+                    $child.toggle(!isReadMore);
+                }
+                $readMoreLess.text(isReadMore ? READ_MORE : READ_LESS);
+            });
+        }
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        if (!this.message) {
+            return;
+        }
+        if (this._prettyBodyRef.el && this.message.prettyBody !== this._lastPrettyBody) {
+            this._prettyBodyRef.el.innerHTML = this.message.prettyBody;
+            this._lastPrettyBody = this.message.prettyBody;
+        }
+        // Remove all readmore before if any before reinsert them with _insertReadMoreLess.
+        // This is needed because _insertReadMoreLess is working with direct DOM mutations
+        // which are not sync with Owl.
+        if (this._contentRef.el) {
+            for (const el of [...this._contentRef.el.querySelectorAll(':scope .o_Message_readMoreLess')]) {
+                el.remove();
+            }
+            this._insertReadMoreLess($(this._contentRef.el));
+            this.env.messagingBus.trigger('o-component-message-read-more-less-inserted', {
+                message: this.message,
+            });
+        }
+        this._wasSelected = this.props.isSelected;
+        this.message.refreshDateFromNow();
+        clearInterval(this._intervalId);
+        this._intervalId = setInterval(() => {
+            this.message.refreshDateFromNow();
+        }, 60 * 1000);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onChangeCheckbox() {
+        this.message.toggleCheck(this.threadView.thread, this.threadView.stringifiedDomain);
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        if (ev.target.closest('.o_channel_redirect')) {
+            this.env.messaging.openProfile({
+                id: Number(ev.target.dataset.oeId),
+                model: 'mail.channel',
+            });
+            // avoid following dummy href
+            ev.preventDefault();
+            return;
+        }
+        if (ev.target.tagName === 'A') {
+            if (ev.target.dataset.oeId && ev.target.dataset.oeModel) {
+                this.env.messaging.openProfile({
+                    id: Number(ev.target.dataset.oeId),
+                    model: ev.target.dataset.oeModel,
+                });
+                // avoid following dummy href
+                ev.preventDefault();
+            }
+            return;
+        }
+        if (
+            !isEventHandled(ev, 'Message.ClickAuthorAvatar') &&
+            !isEventHandled(ev, 'Message.ClickAuthorName') &&
+            !isEventHandled(ev, 'Message.ClickFailure')
+        ) {
+            this.state.isClicked = !this.state.isClicked;
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAuthorAvatar(ev) {
+        markEventHandled(ev, 'Message.ClickAuthorAvatar');
+        if (!this.hasAuthorOpenChat) {
+            return;
+        }
+        this.message.author.openChat();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickAuthorName(ev) {
+        markEventHandled(ev, 'Message.ClickAuthorName');
+        if (!this.message.author) {
+            return;
+        }
+        this.message.author.openProfile();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickFailure(ev) {
+        markEventHandled(ev, 'Message.ClickFailure');
+        this.message.openResendAction();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickModerationAccept(ev) {
+        ev.preventDefault();
+        this.message.moderate('accept');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickModerationAllow(ev) {
+        ev.preventDefault();
+        this.message.moderate('allow');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickModerationBan(ev) {
+        ev.preventDefault();
+        this.state.hasModerationBanDialog = true;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickModerationDiscard(ev) {
+        ev.preventDefault();
+        this.state.hasModerationDiscardDialog = true;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickModerationReject(ev) {
+        ev.preventDefault();
+        this.state.hasModerationRejectDialog = true;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickOriginThread(ev) {
+        // avoid following dummy href
+        ev.preventDefault();
+        this.message.originThread.open();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickStar(ev) {
+        ev.stopPropagation();
+        this.message.toggleStar();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickMarkAsRead(ev) {
+        ev.stopPropagation();
+        this.message.markAsRead();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickReply(ev) {
+        // Use this._wasSelected because this.props.isSelected might be changed
+        // by a global capture click handler (for example the one from Composer)
+        // before the current handler is executed. Indeed because it does a
+        // toggle it needs to take into account the value before the click.
+        if (this._wasSelected) {
+            this.env.messaging.discuss.clearReplyingToMessage();
+        } else {
+            this.message.replyTo();
+        }
+    }
+
+    /**
+     * @private
+     */
+    _onDialogClosedModerationBan() {
+        this.state.hasModerationBanDialog = false;
+    }
+
+    /**
+     * @private
+     */
+    _onDialogClosedModerationDiscard() {
+        this.state.hasModerationDiscardDialog = false;
+    }
+
+    /**
+     * @private
+     */
+    _onDialogClosedModerationReject() {
+        this.state.hasModerationRejectDialog = false;
+    }
+
+}
+
+Object.assign(Message, {
+    components,
+    defaultProps: {
+        hasCheckbox: false,
+        hasMarkAsReadIcon: false,
+        hasReplyIcon: false,
+        isSelected: false,
+        isSquashed: false,
+    },
+    props: {
+        attachmentsDetailsMode: {
+            type: String,
+            optional: true,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        hasCheckbox: Boolean,
+        hasMarkAsReadIcon: Boolean,
+        hasReplyIcon: Boolean,
+        isSelected: Boolean,
+        isSquashed: Boolean,
+        messageLocalId: String,
+        threadViewLocalId: {
+            type: String,
+            optional: true,
+        },
+    },
+    template: 'mail.Message',
+});
+
+return Message;
+
+});
diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss
new file mode 100644
index 00000000..16d9c790
--- /dev/null
+++ b/addons/mail/static/src/components/message/message.scss
@@ -0,0 +1,381 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Message {
+    display: flex;
+    flex: 0 0 auto;
+    padding: map-get($spacers, 2);
+}
+
+.o_Message_authorAvatar {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.o_Message_authorAvatarContainer {
+    position: relative;
+    height: 36px;
+    width: 36px;
+}
+
+.o_Message_authorName {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_checkbox {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_commandStar {
+    font-size: 1.3em;
+}
+
+.o_Message_Composer {
+    flex: 1 1 auto;
+}
+
+.o_Message_commands {
+    display: flex;
+    align-items: center;
+}
+
+.o_Message_content {
+    word-wrap: break-word;
+    word-break: break-word;
+
+    *:not(li):not(li div) {
+        // Message content can contain arbitrary HTML that might overflow and break
+        // the style without this rule.
+        // Lists are ignored because otherwise bullet style become hidden from overflow.
+        // It's acceptable not to manage overflow of these tags for the moment.
+        // It also excludes all div in li because 1st leaf and div child of list overflow
+        // may impact the bullet point (at least it does on Safari).
+        max-width: 100%;
+        overflow-x: auto;
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
+
+.o_Message_core {
+    min-width: 0; // allows this flex child to shrink more than its content
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_footer {
+    display: flex;
+    flex-direction: column;
+}
+
+.o_Message_header {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: baseline;
+}
+
+.o_Message_headerCommands {
+    margin-inline-end: map-get($spacers, 2);
+    align-self: center;
+
+    .o_Message_headerCommand {
+        padding-left: map-get($spacers, 2);
+        padding-right: map-get($spacers, 2);
+
+        &.o-mobile {
+            padding-left: map-get($spacers, 3);
+            padding-right: map-get($spacers, 3);
+
+            &:first-child {
+                padding-left: map-get($spacers, 2);
+            }
+
+            &:last-child {
+                padding-right: map-get($spacers, 2);
+            }
+        }
+    }
+}
+
+.o_Message_headerDate {
+    margin-inline-end: map-get($spacers, 2);
+    font-size: 0.8em;
+}
+
+.o_Message_moderationAction {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_moderationPending {
+    margin-inline-end: map-get($spacers, 3);
+}
+
+.o_Message_moderationSubHeader {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+}
+
+.o_Message_originThread {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Message_partnerImStatusIcon {
+    @include o-position-absolute($bottom: 0, $right: 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.o_Message_prettyBody {
+
+    > p:last-of-type {
+        margin-bottom: 0;
+    }
+
+}
+
+.o_Message_readMoreLess {
+    display: block;
+}
+
+.o_Message_seenIndicator {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+.o_Message_sidebar {
+    flex: 0 0 $o-mail-message-sidebar-width;
+    max-width: $o-mail-message-sidebar-width;
+    display: flex;
+    margin-inline-end: map-get($spacers, 2);
+    justify-content: center;
+
+    &.o-message-squashed {
+        align-items: flex-start;
+    }
+}
+
+.o_Message_sidebarItem {
+    margin-left: map-get($spacers, 1);
+    margin-right: map-get($spacers, 1);
+
+    &.o-message-squashed {
+        display: flex;
+    }
+}
+
+.o_Message_trackingValues {
+    margin-top: map-get($spacers, 2);
+}
+
+.o_Message_trackingValue {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.o_Message_trackingValueItem {
+    margin-inline-end: map-get($spacers, 1);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_Message {
+    background-color: white;
+
+    &:hover, &.o-clicked {
+
+        .o_Message_commands {
+            opacity: 1;
+        }
+
+        .o_Message_sidebarItem.o-message-squashed {
+            display: flex;
+        }
+
+        .o_Message_seenIndicator.o-message-squashed {
+            display: none;
+        }
+    }
+
+    .o_Message_partnerImStatusIcon {
+        color: white;
+    }
+
+    &.o-not-discussion {
+        background-color: lighten(gray('300'), 5%);
+        border-bottom: 1px solid darken(gray('300'), 5%);
+
+        .o_Message_partnerImStatusIcon {
+            color: lighten(gray('300'), 5%);
+        }
+
+        &.o-selected {
+            border-bottom: 1px solid darken(gray('400'), 5%);
+        }
+    }
+
+    &.o-selected {
+        background-color: gray('400');
+
+        .o_Message_partnerImStatusIcon {
+            color: gray('400');
+        }
+    }
+
+    &.o-starred {
+
+        .o_Message_commandStar {
+            display: flex;
+        }
+
+        .o_Message_commands {
+            display: flex;
+        }
+    }
+}
+
+.o_Message_authorName {
+    font-weight: bold;
+}
+
+.o_Message_authorRedirect {
+    cursor: pointer;
+}
+
+.o_Message_command {
+    cursor: pointer;
+    color: gray('400');
+
+    &:not(.o-mobile) {
+        &:hover {
+            filter: brightness(0.8);
+        }
+    }
+
+    &.o-mobile {
+        filter: brightness(0.8);
+
+        &:hover {
+            filter: brightness(0.75);
+        }
+    }
+
+    &.o-message-selected {
+        color: gray('500');
+    }
+}
+
+.o_Message_commandStar {
+
+    &.o-message-starred {
+        color: gold;
+
+        &:hover {
+            filter: brightness(0.9);
+        }
+    }
+}
+
+.o_Message_content .o_mention {
+    color: $o-brand-primary;
+    cursor: pointer;
+
+    &:hover {
+        color: darken($o-brand-primary, 15%);
+    }
+}
+
+.o_Message_date {
+    color: gray('500');
+
+    &.o-message-selected {
+        color: gray('600');
+    }
+}
+
+.o_Message_headerCommands:not(.o-mobile) {
+    opacity: 0;
+}
+
+.o_Message_originThread {
+    font-size: 0.8em;
+    color: gray('500');
+
+    &.o-message-selected {
+        color: gray('600');
+    }
+}
+
+.o_Message_originThreadLink {
+    font-size: 1.25em; // original size
+}
+
+.o_Message_partnerImStatusIcon:not(.o_Message_partnerImStatusIcon-mobile) {
+    font-size: x-small;
+}
+
+.o_Message_moderationAction {
+    font-weight: bold;
+    font-style: italic;
+
+    &.o-accept,
+    &.o-allow {
+        color: $o-mail-moderation-accept-color;
+        @include hover-focus {
+            color: darken($o-mail-moderation-accept-color, $emphasized-link-hover-darken-percentage);
+        }
+    }
+
+    &.o-ban,
+    &.o-discard,
+    &.o-reject {
+        color: $o-mail-moderation-reject-color;
+        @include hover-focus {
+            color: darken($o-mail-moderation-reject-color, $emphasized-link-hover-darken-percentage);
+        }
+    }
+}
+
+.o_Message_moderationPending {
+    font-style: italic;
+
+    &.o-author {
+        color: theme-color('danger');
+        font-weight: bold;
+    }
+}
+
+.o_Message_notificationIconClickable {
+    color: gray('600');
+    cursor: pointer;
+
+    &.o-error {
+        color: $red;
+    }
+}
+
+.o_Message_sidebarCommands {
+    display: none;
+}
+
+.o_Message_sidebarItem.o-message-squashed {
+    display: none;
+}
+
+.o_Message_subject {
+    font-style: italic;
+}
+
+// Used to hide buttons on rating emails in chatter
+// FIXME: should use a better approach for not having such buttons
+// in chatter of such messages, but keep having them in emails.
+.o_Message_content [summary~="o_mail_notification"] {
+    display: none;
+}
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
new file mode 100644
index 00000000..32687ea6
--- /dev/null
+++ b/addons/mail/static/src/components/message/message.xml
@@ -0,0 +1,210 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Message" owl="1">
+        <div class="o_Message"
+            t-att-class="{
+                'o-clicked': state.isClicked,
+                'o-discussion': message and (message.is_discussion or message.is_notification),
+                'o-mobile': env.messaging.device.isMobile,
+                'o-not-discussion': message and !(message.is_discussion or message.is_notification),
+                'o-notification': message and message.message_type === 'notification',
+                'o-selected': props.isSelected,
+                'o-squashed': props.isSquashed,
+                'o-starred': message and message.isStarred,
+            }" t-on-click="_onClick" t-att-data-message-local-id="message and message.localId"
+        >
+            <t t-if="message" name="rootCondition">
+                <div class="o_Message_sidebar" t-att-class="{ 'o-message-squashed': props.isSquashed }">
+                    <t t-if="!props.isSquashed">
+                        <div class="o_Message_authorAvatarContainer o_Message_sidebarItem">
+                            <img class="o_Message_authorAvatar rounded-circle" t-att-class="{ o_Message_authorRedirect: hasAuthorOpenChat, o_redirect: hasAuthorOpenChat }" t-att-src="avatar" t-on-click="_onClickAuthorAvatar" t-att-title="hasAuthorOpenChat ? OPEN_CHAT : ''" alt="Avatar"/>
+                            <t t-if="message.author and message.author.im_status">
+                                <PartnerImStatusIcon
+                                    class="o_Message_partnerImStatusIcon"
+                                    t-att-class="{
+                                        'o-message-not-discussion': !(message.is_discussion or message.is_notification),
+                                        'o-message-selected': props.isSelected,
+                                        'o_Message_partnerImStatusIcon-mobile': env.messaging.device.isMobile,
+                                    }"
+                                    hasOpenChat="hasAuthorOpenChat"
+                                    partnerLocalId="message.author.localId"
+                                />
+                            </t>
+                        </div>
+                    </t>
+                    <t t-else="">
+                        <div class="o_Message_date o_Message_sidebarItem o-message-squashed" t-att-class="{ 'o-message-selected': props.isSelected }">
+                            <t t-esc="shortTime"/>
+                        </div>
+                        <div class="o_Message_commands o_Message_sidebarCommands o_Message_sidebarItem o-message-squashed" t-att-class="{ 'o-message-selected': props.isSelected, 'o-mobile': env.messaging.device.isMobile }">
+                            <t t-if="message.message_type !== 'notification'">
+                                <div class="o_Message_command o_Message_commandStar fa"
+                                    t-att-class="{
+                                        'fa-star': message.isStarred,
+                                        'fa-star-o': !message.isStarred,
+                                        'o-message-selected': props.isSelected,
+                                        'o-message-starred': message.isStarred,
+                                        'o-mobile': env.messaging.device.isMobile,
+                                    }" t-on-click="_onClickStar"
+                                />
+                            </t>
+                        </div>
+                        <t t-if="message.isCurrentPartnerAuthor and threadView and threadView.thread and threadView.thread.hasSeenIndicators">
+                            <MessageSeenIndicator class="o_Message_seenIndicator o-message-squashed" messageLocalId="message.localId" threadLocalId="threadView.thread.localId"/>
+                        </t>
+                    </t>
+                </div>
+                <div class="o_Message_core">
+                    <t t-if="!props.isSquashed">
+                        <div class="o_Message_header">
+                            <t t-if="message.author">
+                                <div class="o_Message_authorName o_Message_authorRedirect o_redirect" t-on-click="_onClickAuthorName" title="Open profile">
+                                    <t t-esc="message.author.nameOrDisplayName"/>
+                                </div>
+                            </t>
+                            <t t-elif="message.email_from">
+                                <a class="o_Message_authorName" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}">
+                                    <t t-esc="message.email_from"/>
+                                </a>
+                            </t>
+                            <t t-else="">
+                                <div class="o_Message_authorName">
+                                    Anonymous
+                                </div>
+                            </t>
+                            <div class="o_Message_date o_Message_headerDate" t-att-class="{ 'o-message-selected': props.isSelected }" t-att-title="datetime">
+                                - <t t-esc="message.dateFromNow"/>
+                            </div>
+                            <t t-if="message.isCurrentPartnerAuthor and threadView and threadView.thread and threadView.thread.hasSeenIndicators">
+                                <MessageSeenIndicator class="o_Message_seenIndicator" messageLocalId="message.localId" threadLocalId="threadView.thread.localId"/>
+                            </t>
+                            <t t-if="threadView and message.originThread and message.originThread !== threadView.thread">
+                                <div class="o_Message_originThread" t-att-class="{ 'o-message-selected': props.isSelected }">
+                                    <t t-if="message.originThread.model === 'mail.channel'">
+                                        (from <a class="o_Message_originThreadLink" t-att-href="message.originThread.url" t-on-click="_onClickOriginThread"><t t-if="message.originThread.name">#<t t-esc="message.originThread.name"/></t><t t-else="">channel</t></a>)
+                                    </t>
+                                    <t t-else="">
+                                        on <a class="o_Message_originThreadLink" t-att-href="message.originThread.url" t-on-click="_onClickOriginThread"><t t-if="message.originThread.name"><t t-esc="message.originThread.name"/></t><t t-else="">document</t></a>
+                                    </t>
+                                </div>
+                            </t>
+                            <t t-if="message.moderation_status === 'pending_moderation' and !message.isModeratedByCurrentPartner">
+                                <span class="o_Message_moderationPending o-author" title="Your message is pending moderation.">Pending moderation</span>
+                            </t>
+                            <t t-if="threadView and message.originThread and message.originThread === threadView.thread and message.notifications.length > 0">
+                                <t t-if="message.failureNotifications.length > 0">
+                                    <span class="o_Message_notificationIconClickable o-error" t-on-click="_onClickFailure">
+                                        <i name="failureIcon" class="o_Message_notificationIcon fa fa-envelope"/>
+                                    </span>
+                                </t>
+                                <t t-else="">
+                                    <Popover>
+                                        <span class="o_Message_notificationIconClickable">
+                                            <i name="notificationIcon" class="o_Message_notificationIcon fa fa-envelope-o"/>
+                                        </span>
+                                        <t t-set="opened">
+                                            <NotificationPopover
+                                                notificationLocalIds="message.notifications.map(notification => notification.localId)"
+                                            />
+                                        </t>
+                                    </Popover>
+                                </t>
+                            </t>
+                            <div class="o_Message_commands o_Message_headerCommands" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                                <t t-if="!message.isTemporary and ((message.message_type !== 'notification' and message.originThread and message.originThread.model === 'mail.channel') or !message.isTransient) and message.moderation_status !== 'pending_moderation'">
+                                    <span class="o_Message_command o_Message_commandStar o_Message_headerCommand fa"
+                                        t-att-class="{
+                                            'fa-star': message.isStarred,
+                                            'fa-star-o': !message.isStarred,
+                                            'o-message-selected': props.isSelected,
+                                            'o-message-starred': message.isStarred,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }" t-on-click="_onClickStar" title="Mark as Todo"
+                                    />
+                                </t>
+                                <t t-if="props.hasReplyIcon">
+                                    <span class="o_Message_command o_Message_commandReply o_Message_headerCommand fa fa-reply"
+                                        t-att-class="{
+                                            'o-message-selected': props.isSelected,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }" t-on-click="_onClickReply" title="Reply"
+                                    />
+                                </t>
+                                <t t-if="props.hasMarkAsReadIcon">
+                                    <span class="o_Message_command o_Message_commandMarkAsRead o_Message_headerCommand fa fa-check"
+                                        t-att-class="{
+                                            'o-message-selected': props.isSelected,
+                                            'o-mobile': env.messaging.device.isMobile,
+                                        }" t-on-click="_onClickMarkAsRead" title="Mark as Read"
+                                    />
+                                </t>
+                            </div>
+                        </div>
+                        <t t-if="message.isModeratedByCurrentPartner">
+                            <div class="o_Message_moderationSubHeader">
+                                <t t-if="threadView and props.hasCheckbox and message.hasCheckbox">
+                                    <input class="o_Message_checkbox" type="checkbox" t-att-checked="message.isChecked(threadView.thread, threadView.stringifiedDomain) ? 'checked': ''" t-on-change="_onChangeCheckbox" t-ref="checkbox"/>
+                                </t>
+                                <span class="o_Message_moderationPending">Pending moderation:</span>
+                                <a class="o_Message_moderationAction o-accept" href="#" title="Accept" t-on-click="_onClickModerationAccept">Accept</a>
+                                <a class="o_Message_moderationAction o-reject" href="#" title="Remove message with explanation" t-on-click="_onClickModerationReject">Reject</a>
+                                <a class="o_Message_moderationAction o-discard" href="#" title="Remove message without explanation" t-on-click="_onClickModerationDiscard">Discard</a>
+                                <a class="o_Message_moderationAction o-allow" href="#" title="Add this email address to white list of people" t-on-click="_onClickModerationAllow">Always Allow</a>
+                                <a class="o_Message_moderationAction o-ban" href="#" title="Ban this email address" t-on-click="_onClickModerationBan">Ban</a>
+                            </div>
+                        </t>
+                    </t>
+                    <div class="o_Message_content" t-ref="content">
+                        <div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() -->
+                        <t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription">
+                            <p t-esc="message.subtype_description"/>
+                        </t>
+                        <t t-if="trackingValues.length > 0">
+                            <ul class="o_Message_trackingValues">
+                                <t t-foreach="trackingValues" t-as="value" t-key="value.id">
+                                    <li>
+                                        <div class="o_Message_trackingValue">
+                                            <div class="o_Message_trackingValueFieldName o_Message_trackingValueItem" t-esc="value.changed_field"/>
+                                            <t t-if="value.old_value">
+                                                <div class="o_Message_trackingValueOldValue o_Message_trackingValueItem" t-esc="value.old_value"/>
+                                            </t>
+                                            <div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/>
+                                            <t t-if="value.new_value">
+                                                <div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/>
+                                            </t>
+                                        </div>
+                                    </li>
+                                </t>
+                            </ul>
+                        </t>
+                    </div>
+                    <t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName and threadView and threadView.thread and (threadView.thread.mass_mailing or [env.messaging.inbox, env.messaging.history].includes(threadView.thread))">
+                        <p class="o_Message_subject">Subject: <t t-esc="message.subject"/></p>
+                    </t>
+                    <t t-if="message.attachments and message.attachments.length > 0">
+                        <div class="o_Message_footer">
+                            <AttachmentList
+                                class="o_Message_attachmentList"
+                                areAttachmentsDownloadable="true"
+                                areAttachmentsEditable="message.author === env.messaging.currentPartner"
+                                attachmentLocalIds="message.attachments.map(attachment => attachment.localId)"
+                                attachmentsDetailsMode="props.attachmentsDetailsMode"
+                            />
+                        </div>
+                    </t>
+                </div>
+                <t t-if="state.hasModerationBanDialog">
+                    <ModerationBanDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationBan"/>
+                </t>
+                <t t-if="state.hasModerationDiscardDialog">
+                    <ModerationDiscardDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationDiscard"/>
+                </t>
+                <t t-if="state.hasModerationRejectDialog">
+                    <ModerationRejectDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationReject"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/message/message_tests.js b/addons/mail/static/src/components/message/message_tests.js
new file mode 100644
index 00000000..67fa9b96
--- /dev/null
+++ b/addons/mail/static/src/components/message/message_tests.js
@@ -0,0 +1,1580 @@
+odoo.define('mail/static/src/components/message/message_tests.js', function (require) {
+'use strict';
+
+const components = {
+    Message: require('mail/static/src/components/message/message.js'),
+};
+const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js');
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('message', {}, function () {
+QUnit.module('message_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createMessageComponent = async (message, otherProps) => {
+            const props = Object.assign({ messageLocalId: message.localId }, otherProps);
+            await createRootComponent(this, components.Message, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('basic rendering', async function (assert) {
+    assert.expect(12);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 7, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelectorAll('.o_Message').length,
+        1,
+        "should display a message component"
+    );
+    const messageEl = document.querySelector('.o_Message');
+    assert.strictEqual(
+        messageEl.dataset.messageLocalId,
+        this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId,
+        "message component should be linked to message store model"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_sidebar`).length,
+        1,
+        "message should have a sidebar"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_sidebar .o_Message_authorAvatar`).length,
+        1,
+        "message should have author avatar in the sidebar"
+    );
+    assert.strictEqual(
+        messageEl.querySelector(`:scope .o_Message_authorAvatar`).tagName,
+        'IMG',
+        "message author avatar should be an image"
+    );
+    assert.strictEqual(
+        messageEl.querySelector(`:scope .o_Message_authorAvatar`).dataset.src,
+        '/web/image/res.partner/7/image_128',
+        "message author avatar should GET image of the related partner"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_authorName`).length,
+        1,
+        "message should display author name"
+    );
+    assert.strictEqual(
+        messageEl.querySelector(`:scope .o_Message_authorName`).textContent,
+        "Demo User",
+        "message should display correct author name"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_date`).length,
+        1,
+        "message should display date"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_commands`).length,
+        1,
+        "message should display list of commands"
+    );
+    assert.strictEqual(
+        messageEl.querySelectorAll(`:scope .o_Message_content`).length,
+        1,
+        "message should display the content"
+    );
+    assert.strictEqual(
+        messageEl.querySelector(`:scope .o_Message_prettyBody`).innerHTML,
+        "<p>Test</p>",
+        "message should display the correct content"
+    );
+});
+
+QUnit.test('moderation: as author, moderated channel with pending moderation message', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 20,
+        model: 'mail.channel',
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 1, display_name: "Admin" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        moderation_status: 'pending_moderation',
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message);
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message_moderationPending.o-author`).length,
+        1,
+        "should have the message pending moderation"
+    );
+});
+
+QUnit.test('moderation: as moderator, moderated channel with pending moderation message', async function (assert) {
+    assert.expect(9);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 20,
+        model: 'mail.channel',
+        moderators: [['link', this.env.messaging.currentPartner]],
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 7, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        moderation_status: 'pending_moderation',
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message);
+    const messageEl = document.querySelector('.o_Message');
+    assert.ok(messageEl, "should display a message");
+    assert.containsOnce(messageEl, `.o_Message_moderationSubHeader`,
+        "should have the message pending moderation"
+    );
+    assert.containsNone(messageEl, `.o_Message_checkbox`,
+        "should not have the moderation checkbox by default"
+    );
+    assert.containsN(messageEl, '.o_Message_moderationAction', 5,
+        "there should be 5 contextual moderation decisions next to the message"
+    );
+    assert.containsOnce(messageEl, '.o_Message_moderationAction.o-accept',
+        "there should be a contextual moderation decision to accept the message"
+    );
+    assert.containsOnce(messageEl, '.o_Message_moderationAction.o-reject',
+        "there should be a contextual moderation decision to reject the message"
+    );
+    assert.containsOnce(messageEl, '.o_Message_moderationAction.o-discard',
+        "there should be a contextual moderation decision to discard the message"
+    );
+    assert.containsOnce(messageEl, '.o_Message_moderationAction.o-allow',
+        "there should be a contextual moderation decision to allow the user of the message)"
+    );
+    assert.containsOnce(messageEl, '.o_Message_moderationAction.o-ban',
+        "there should be a contextual moderation decision to ban the user of the message"
+    );
+    // The actions are tested as part of discuss tests.
+});
+
+QUnit.test('Notification Sent', async function (assert) {
+    assert.expect(9);
+
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['create', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    const message = this.env.models['mail.message'].create({
+        id: 10,
+        message_type: 'email',
+        notifications: [['insert', {
+            id: 11,
+            notification_status: 'sent',
+            notification_type: 'email',
+            partner: [['insert', { id: 12, name: "Someone" }]],
+        }]],
+        originThread: [['link', threadViewer.thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIconClickable',
+        "should display the notification icon container"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should display the notification icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_notificationIcon'),
+        'fa-envelope-o',
+        "icon should represent email success"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Message_notificationIconClickable').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover',
+        "notification popover should be open"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationIcon',
+        "popover should have one icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_NotificationPopover_notificationIcon'),
+        'fa-check',
+        "popover should have the sent icon"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationPartnerName',
+        "popover should have the partner name"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationPopover_notificationPartnerName').textContent.trim(),
+        "Someone",
+        "partner name should be correct"
+    );
+});
+
+QUnit.test('Notification Error', async function (assert) {
+    assert.expect(8);
+
+    const openResendActionDef = makeDeferred();
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action,
+            'mail.mail_resend_message_action',
+            "action should be the one to resend email"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.mail_message_to_resend,
+            10,
+            "action should have correct message id"
+        );
+        openResendActionDef.resolve();
+    });
+
+    await this.start({ env: { bus } });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['create', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    const message = this.env.models['mail.message'].create({
+        id: 10,
+        message_type: 'email',
+        notifications: [['insert', {
+            id: 11,
+            notification_status: 'exception',
+            notification_type: 'email',
+        }]],
+        originThread: [['link', threadViewer.thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIconClickable',
+        "should display the notification icon container"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should display the notification icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_notificationIcon'),
+        'fa-envelope',
+        "icon should represent email error"
+    );
+    document.querySelector('.o_Message_notificationIconClickable').click();
+    await openResendActionDef;
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the resend email dialog"
+    );
+});
+
+QUnit.test("'channel_fetch' notification received is correctly handled", async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const currentPartner = this.env.models['mail.partner'].insert({
+        id: this.env.messaging.currentPartner.id,
+        display_name: "Demo User",
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        members: [
+            [['link', currentPartner]],
+            [['insert', { id: 11, display_name: "Recipient" }]]
+        ],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['link', currentPartner]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message component should not have any check (V) as message is not yet received"
+    );
+
+    // Simulate received channel fetched notification
+    const notifications = [
+        [['myDB', 'mail.channel', 11], {
+            info: 'channel_fetched',
+            last_message_id: 100,
+            partner_id: 11,
+        }],
+    ];
+    await afterNextRender(() => {
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message seen indicator component should only contain one check (V) as message is just received"
+    );
+});
+
+QUnit.test("'channel_seen' notification received is correctly handled", async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const currentPartner = this.env.models['mail.partner'].insert({
+        id: this.env.messaging.currentPartner.id,
+        display_name: "Demo User",
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        members: [
+            [['link', currentPartner]],
+            [['insert', { id: 11, display_name: "Recipient" }]]
+        ],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['link', currentPartner]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message component should not have any check (V) as message is not yet received"
+    );
+
+    // Simulate received channel seen notification
+    const notifications = [
+        [['myDB', 'mail.channel', 11], {
+            info: 'channel_seen',
+            last_message_id: 100,
+            partner_id: 11,
+        }],
+    ];
+    await afterNextRender(() => {
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        2,
+        "message seen indicator component should contain two checks (V) as message is seen"
+    );
+});
+
+QUnit.test("'channel_fetch' notification then 'channel_seen' received  are correctly handled", async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const currentPartner = this.env.models['mail.partner'].insert({
+        id: this.env.messaging.currentPartner.id,
+        display_name: "Demo User",
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        members: [
+            [['link', currentPartner]],
+            [['insert', { id: 11, display_name: "Recipient" }]]
+        ],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['link', currentPartner]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message component should not have any check (V) as message is not yet received"
+    );
+
+    // Simulate received channel fetched notification
+    let notifications = [
+        [['myDB', 'mail.channel', 11], {
+            info: 'channel_fetched',
+            last_message_id: 100,
+            partner_id: 11,
+        }],
+    ];
+    await afterNextRender(() => {
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message seen indicator component should only contain one check (V) as message is just received"
+    );
+
+    // Simulate received channel seen notification
+    notifications = [
+        [['myDB', 'mail.channel', 11], {
+            info: 'channel_seen',
+            last_message_id: 100,
+            partner_id: 11,
+        }],
+    ];
+    await afterNextRender(() => {
+        this.widget.call('bus_service', 'trigger', 'notification', notifications);
+    });
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        2,
+        "message seen indicator component should contain two checks (V) as message is now seen"
+    );
+});
+
+QUnit.test('do not show messaging seen indicator if not authored by me', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const author = this.env.models['mail.partner'].create({
+        id: 100,
+        display_name: "Demo User"
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 11,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: this.env.messaging.currentPartner.id,
+            },
+            {
+                channelId: 11,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: author.id,
+            },
+        ]]],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['link', author]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message, { threadViewLocalId: threadViewer.threadView.localId });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message_seenIndicator',
+        "message component should not have any message seen indicator"
+    );
+});
+
+QUnit.test('do not show messaging seen indicator if before last seen by all message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const currentPartner = this.env.models['mail.partner'].insert({
+        id: this.env.messaging.currentPartner.id,
+        display_name: "Demo User",
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        messageSeenIndicators: [['insert', {
+            channelId: 11,
+            messageId: 99,
+        }]],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const lastSeenMessage = this.env.models['mail.message'].create({
+        author: [['link', currentPartner]],
+        body: "<p>You already saw me</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['link', currentPartner]],
+        body: "<p>Test</p>",
+        id: 99,
+        originThread: [['link', thread]],
+    });
+    thread.update({
+       partnerSeenInfos: [['create', [
+            {
+                channelId: 11,
+                lastSeenMessage: [['link', lastSeenMessage]],
+                partnerId: this.env.messaging.currentPartner.id,
+            },
+            {
+                channelId: 11,
+                lastSeenMessage: [['link', lastSeenMessage]],
+                partnerId: 100,
+            },
+        ]]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_seenIndicator',
+        "message component should have a message seen indicator"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "message component should not have any check (V)"
+    );
+});
+
+QUnit.test('only show messaging seen indicator if authored by me, after last seen by all message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const currentPartner = this.env.models['mail.partner'].insert({
+        id: this.env.messaging.currentPartner.id,
+        display_name: "Demo User"
+    });
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'chat',
+        id: 11,
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 11,
+                lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: this.env.messaging.currentPartner.id,
+            },
+            {
+                channelId: 11,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                lastSeenMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 11,
+            messageId: 100,
+        }]],
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['link', currentPartner]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a message component"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_seenIndicator',
+        "message component should have a message seen indicator"
+    );
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        1,
+        "message component should have one check (V) because the message was fetched by everyone but no other member than author has seen the message"
+    );
+});
+
+QUnit.test('allow attachment delete on authored message', async function (assert) {
+    assert.expect(5);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        attachments: [['insert-and-replace', {
+            filename: "BLAH.jpg",
+            id: 10,
+            name: "BLAH",
+        }]],
+        author: [['link', this.env.messaging.currentPartner]],
+        body: "<p>Test</p>",
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have an attachment",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment_asideItemUnlink',
+        "should have delete attachment button"
+    );
+
+    await afterNextRender(() => document.querySelector('.o_Attachment_asideItemUnlink').click());
+    assert.containsOnce(
+        document.body,
+        '.o_AttachmentDeleteConfirmDialog',
+        "An attachment delete confirmation dialog should have been opened"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_mainText').textContent,
+        `Do you really want to delete "BLAH"?`,
+        "Confirmation dialog should contain the attachment delete confirmation text"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Attachment',
+        "should no longer have an attachment",
+    );
+});
+
+QUnit.test('prevent attachment delete on non-authored message', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        attachments: [['insert-and-replace', {
+            filename: "BLAH.jpg",
+            id: 10,
+            name: "BLAH",
+        }]],
+        author: [['insert', { id: 11, display_name: "Guy" }]],
+        body: "<p>Test</p>",
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Attachment',
+        "should have an attachment",
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Attachment_asideItemUnlink',
+        "delete attachment button should not be printed"
+    );
+});
+
+QUnit.test('subtype description should be displayed if it is different than body', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        body: "<p>Hello</p>",
+        id: 100,
+        subtype_description: 'Bonjour',
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_content',
+        "message should have content"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Message_content`).textContent,
+        "HelloBonjour",
+        "message content should display both body and subtype description when they are different"
+    );
+});
+
+QUnit.test('subtype description should not be displayed if it is similar to body', async function (assert) {
+    assert.expect(2);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        body: "<p>Hello</p>",
+        id: 100,
+        subtype_description: 'hello',
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_content',
+        "message should have content"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_Message_content`).textContent,
+        "Hello",
+        "message content should display only body when subtype description is similar"
+    );
+});
+
+QUnit.test('data-oe-id & data-oe-model link redirection on click', async function (assert) {
+    assert.expect(7);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            "action should open view"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'some.model',
+            "action should open view on 'some.model' model"
+        );
+        assert.strictEqual(
+            payload.action.res_id,
+            250,
+            "action should open view on 250"
+        );
+        assert.step('do-action:openFormView_some.model_250');
+    });
+    await this.start({ env: { bus } });
+    const message = this.env.models['mail.message'].create({
+        body: `<p><a href="#" data-oe-id="250" data-oe-model="some.model">some.model_250</a></p>`,
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_content',
+        "message should have content"
+    );
+    assert.containsOnce(
+        document.querySelector('.o_Message_content'),
+        'a',
+        "message content should have a link"
+    );
+
+    document.querySelector(`.o_Message_content a`).click();
+    assert.verifySteps(
+        ['do-action:openFormView_some.model_250'],
+        "should have open form view on related record after click on link"
+    );
+});
+
+QUnit.test('chat with author should be opened after clicking on his avatar', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 10 });
+    this.data['res.users'].records.push({ partner_id: 10 });
+    await this.start({
+        hasChatWindow: true,
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 10 }]],
+        id: 10,
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_authorAvatar',
+        "message should have the author avatar"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_authorAvatar'),
+        'o_redirect',
+        "author avatar should have the redirect style"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_authorAvatar').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window with thread should be opened after clicking on author avatar"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow_thread').dataset.correspondentId,
+        message.author.id.toString(),
+        "chat with author should be opened after clicking on his avatar"
+    );
+});
+
+QUnit.test('chat with author should be opened after clicking on his im status icon', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 10 });
+    this.data['res.users'].records.push({ partner_id: 10 });
+    await this.start({
+        hasChatWindow: true,
+    });
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 10, im_status: 'online' }]],
+        id: 10,
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_partnerImStatusIcon',
+        "message should have the author im status icon"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_partnerImStatusIcon'),
+        'o-has-open-chat',
+        "author im status icon should have the open chat style"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_Message_partnerImStatusIcon').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow_thread',
+        "chat window with thread should be opened after clicking on author im status icon"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ChatWindow_thread').dataset.correspondentId,
+        message.author.id.toString(),
+        "chat with author should be opened after clicking on his im status icon"
+    );
+});
+
+QUnit.test('open chat with author on avatar click should be disabled when currently chatting with the author', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat',
+        members: [this.data.currentPartnerId, 10],
+        public: 'private',
+    });
+    this.data['res.partner'].records.push({ id: 10 });
+    this.data['res.users'].records.push({ partner_id: 10 });
+    await this.start({
+        hasChatWindow: true,
+    });
+    const correspondent = this.env.models['mail.partner'].insert({ id: 10 });
+    const message = this.env.models['mail.message'].create({
+        author: [['link', correspondent]],
+        id: 10,
+    });
+    const thread = await correspondent.getChat();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId,
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message_authorAvatar',
+        "message should have the author avatar"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_Message_authorAvatar'),
+        'o_redirect',
+        "author avatar should not have the redirect style"
+    );
+
+    document.querySelector('.o_Message_authorAvatar').click();
+    await nextAnimationFrame();
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should have no thread opened after clicking on author avatar when currently chatting with the author"
+    );
+});
+
+QUnit.test('basic rendering of tracking value (float type)', async function (assert) {
+    assert.expect(8);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "float",
+            id: 6,
+            new_value: 45.67,
+            old_value: 12.3,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.containsOnce(
+        document.body,
+        '.o_Message_trackingValue',
+        "should display a tracking value"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_trackingValueFieldName',
+        "should display the name of the tracked field"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValueFieldName').textContent,
+        "Total:",
+        "should display the correct tracked field name (Total)",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_trackingValueOldValue',
+        "should display the old value"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValueOldValue').textContent,
+        "12.30",
+        "should display the correct old value (12.30)",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_trackingValueSeparator',
+        "should display the separator"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_trackingValueNewValue',
+        "should display the new value"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValueNewValue').textContent,
+        "45.67",
+        "should display the correct new value (45.67)",
+    );
+});
+
+QUnit.test('rendering of tracked field of type integer: from non-0 to 0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "integer",
+            id: 6,
+            new_value: 0,
+            old_value: 1,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:10",
+        "should display the correct content of tracked field of type integer: from non-0 to 0 (Total: 1 -> 0)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type integer: from 0 to non-0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "integer",
+            id: 6,
+            new_value: 1,
+            old_value: 0,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:01",
+        "should display the correct content of tracked field of type integer: from 0 to non-0 (Total: 0 -> 1)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type float: from non-0 to 0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "float",
+            id: 6,
+            new_value: 0,
+            old_value: 1,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:1.000.00",
+        "should display the correct content of tracked field of type float: from non-0 to 0 (Total: 1.00 -> 0.00)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type float: from 0 to non-0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "float",
+            id: 6,
+            new_value: 1,
+            old_value: 0,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:0.001.00",
+        "should display the correct content of tracked field of type float: from 0 to non-0 (Total: 0.00 -> 1.00)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type monetary: from non-0 to 0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "monetary",
+            id: 6,
+            new_value: 0,
+            old_value: 1,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:1.000.00",
+        "should display the correct content of tracked field of type monetary: from non-0 to 0 (Total: 1.00 -> 0.00)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type monetary: from 0 to non-0', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Total",
+            field_type: "monetary",
+            id: 6,
+            new_value: 1,
+            old_value: 0,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Total:0.001.00",
+        "should display the correct content of tracked field of type monetary: from 0 to non-0 (Total: 0.00 -> 1.00)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type boolean: from true to false', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Is Ready",
+            field_type: "boolean",
+            id: 6,
+            new_value: false,
+            old_value: true,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Is Ready:TrueFalse",
+        "should display the correct content of tracked field of type boolean: from true to false (Is Ready: True -> False)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type boolean: from false to true', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Is Ready",
+            field_type: "boolean",
+            id: 6,
+            new_value: true,
+            old_value: false,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Is Ready:FalseTrue",
+        "should display the correct content of tracked field of type boolean: from false to true (Is Ready: False -> True)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type char: from a string to empty string', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Name",
+            field_type: "char",
+            id: 6,
+            new_value: "",
+            old_value: "Marc",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Name:Marc",
+        "should display the correct content of tracked field of type char: from a string to empty string (Name: Marc ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type char: from empty string to a string', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Name",
+            field_type: "char",
+            id: 6,
+            new_value: "Marc",
+            old_value: "",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Name:Marc",
+        "should display the correct content of tracked field of type char: from empty string to a string (Name: -> Marc)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type date: from no date to a set date', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Deadline",
+            field_type: "date",
+            id: 6,
+            new_value: "2018-12-14",
+            old_value: false,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Deadline:12/14/2018",
+        "should display the correct content of tracked field of type date: from no date to a set date (Deadline: -> 12/14/2018)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type date: from a set date to no date', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Deadline",
+            field_type: "date",
+            id: 6,
+            new_value: false,
+            old_value: "2018-12-14",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Deadline:12/14/2018",
+        "should display the correct content of tracked field of type date: from a set date to no date (Deadline: 12/14/2018 ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type datetime: from no date and time to a set date and time', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Deadline",
+            field_type: "datetime",
+            id: 6,
+            new_value: "2018-12-14 13:42:28",
+            old_value: false,
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Deadline:12/14/2018 13:42:28",
+        "should display the correct content of tracked field of type datetime: from no date and time to a set date and time (Deadline: -> 12/14/2018 13:42:28)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type datetime: from a set date and time to no date and time', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Deadline",
+            field_type: "datetime",
+            id: 6,
+            new_value: false,
+            old_value: "2018-12-14 13:42:28",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Deadline:12/14/2018 13:42:28",
+        "should display the correct content of tracked field of type datetime: from a set date and time to no date and time (Deadline: 12/14/2018 13:42:28 ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type text: from some text to empty', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Name",
+            field_type: "text",
+            id: 6,
+            new_value: "",
+            old_value: "Marc",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Name:Marc",
+        "should display the correct content of tracked field of type text: from some text to empty (Name: Marc ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type text: from empty to some text', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Name",
+            field_type: "text",
+            id: 6,
+            new_value: "Marc",
+            old_value: "",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Name:Marc",
+        "should display the correct content of tracked field of type text: from empty to some text (Name: -> Marc)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type selection: from a selection to no selection', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "State",
+            field_type: "selection",
+            id: 6,
+            new_value: "",
+            old_value: "ok",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "State:ok",
+        "should display the correct content of tracked field of type selection: from a selection to no selection (State: ok ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type selection: from no selection to a selection', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "State",
+            field_type: "selection",
+            id: 6,
+            new_value: "ok",
+            old_value: "",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "State:ok",
+        "should display the correct content of tracked field of type selection: from no selection to a selection (State: -> ok)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type many2one: from having a related record to no related record', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Author",
+            field_type: "many2one",
+            id: 6,
+            new_value: "",
+            old_value: "Marc",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Author:Marc",
+        "should display the correct content of tracked field of type many2one: from having a related record to no related record (Author: Marc ->)"
+    );
+});
+
+QUnit.test('rendering of tracked field of type many2one: from no related record to having a related record', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        id: 11,
+        tracking_value_ids: [{
+            changed_field: "Author",
+            field_type: "many2one",
+            id: 6,
+            new_value: "Marc",
+            old_value: "",
+        }],
+    });
+    await this.createMessageComponent(message);
+    assert.strictEqual(
+        document.querySelector('.o_Message_trackingValue').textContent,
+        "Author:Marc",
+        "should display the correct content of tracked field of type many2one: from no related record to having a related record (Author: -> Marc)"
+    );
+});
+
+QUnit.test('message should not be considered as "clicked" after clicking on its author name', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 7, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+    document.querySelector(`.o_Message_authorName`).click();
+    await nextAnimationFrame();
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_Message`),
+        'o-clicked',
+        "message should not be considered as 'clicked' after clicking on its author name"
+    );
+});
+
+QUnit.test('message should not be considered as "clicked" after clicking on its author avatar', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const message = this.env.models['mail.message'].create({
+        author: [['insert', { id: 7, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+    });
+    await this.createMessageComponent(message);
+    document.querySelector(`.o_Message_authorAvatar`).click();
+    await nextAnimationFrame();
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_Message`),
+        'o-clicked',
+        "message should not be considered as 'clicked' after clicking on its author avatar"
+    );
+});
+
+QUnit.test('message should not be considered as "clicked" after clicking on notification failure icon', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['create', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    const message = this.env.models['mail.message'].create({
+        id: 10,
+        message_type: 'email',
+        notifications: [['insert', {
+            id: 11,
+            notification_status: 'exception',
+            notification_type: 'email',
+        }]],
+        originThread: [['link', threadViewer.thread]],
+    });
+    await this.createMessageComponent(message, {
+        threadViewLocalId: threadViewer.threadView.localId
+    });
+    document.querySelector('.o_Message_notificationIconClickable.o-error').click();
+    await nextAnimationFrame();
+    assert.doesNotHaveClass(
+        document.querySelector(`.o_Message`),
+        'o-clicked',
+        "message should not be considered as 'clicked' after clicking on notification failure icon"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js
new file mode 100644
index 00000000..21fb18a5
--- /dev/null
+++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js
@@ -0,0 +1,67 @@
+odoo.define('mail/static/src/components/message_author_prefix/message_author_prefix.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class MessageAuthorPrefix extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const message = this.env.models['mail.message'].get(props.messageLocalId);
+            const author = message ? message.author : undefined;
+            const thread = props.threadLocalId
+                ? this.env.models['mail.thread'].get(props.threadLocalId)
+                : undefined;
+            return {
+                author: author ? author.__state : undefined,
+                currentPartner: this.env.messaging.currentPartner
+                    ? this.env.messaging.currentPartner.__state
+                    : undefined,
+                message: message ? message.__state : undefined,
+                thread: thread ? thread.__state : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.message}
+     */
+    get message() {
+        return this.env.models['mail.message'].get(this.props.messageLocalId);
+    }
+
+    /**
+     * @returns {mail.thread|undefined}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+}
+
+Object.assign(MessageAuthorPrefix, {
+    props: {
+        messageLocalId: String,
+        threadLocalId: {
+            type: String,
+            optional: true,
+        },
+    },
+    template: 'mail.MessageAuthorPrefix',
+});
+
+return MessageAuthorPrefix;
+
+});
diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
new file mode 100644
index 00000000..362eaeb5
--- /dev/null
+++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss
@@ -0,0 +1,11 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MessageAuthorPrefixIcon {
+    margin-right: 3px;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
new file mode 100644
index 00000000..eddc2b01
--- /dev/null
+++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessageAuthorPrefix" owl="1">
+        <span class="o_MessageAuthorPrefix">
+            <t t-if="message">
+                <t t-if="message.author and message.author === env.messaging.currentPartner">
+                    <i class="o_MessageAuthorPrefixIcon fa fa-mail-reply"/>You:
+                </t>
+                <t t-elif="thread and message.author !== thread.correspondent">
+                    <t t-esc="message.author.nameOrDisplayName"/>:
+                </t>
+            </t>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js
new file mode 100644
index 00000000..245fd335
--- /dev/null
+++ b/addons/mail/static/src/components/message_list/message_list.js
@@ -0,0 +1,600 @@
+odoo.define('mail/static/src/components/message_list/message_list.js', function (require) {
+'use strict';
+
+const components = {
+    Message: require('mail/static/src/components/message/message.js'),
+};
+const useRefs = require('mail/static/src/component_hooks/use_refs/use_refs.js');
+const useRenderedValues = require('mail/static/src/component_hooks/use_rendered_values/use_rendered_values.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class MessageList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId);
+            const thread = threadView ? threadView.thread : undefined;
+            const threadCache = threadView ? threadView.threadCache : undefined;
+            return {
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                thread,
+                threadCache,
+                threadCacheIsAllHistoryLoaded: threadCache && threadCache.isAllHistoryLoaded,
+                threadCacheIsLoaded: threadCache && threadCache.isLoaded,
+                threadCacheIsLoadingMore: threadCache && threadCache.isLoadingMore,
+                threadCacheLastMessage: threadCache && threadCache.lastMessage,
+                threadCacheOrderedMessages: threadCache ? threadCache.orderedMessages : [],
+                threadIsTemporary: thread && thread.isTemporary,
+                threadMainCache: thread && thread.mainCache,
+                threadMessageAfterNewMessageSeparator: thread && thread.messageAfterNewMessageSeparator,
+                threadViewComponentHintList: threadView ? threadView.componentHintList : [],
+                threadViewNonEmptyMessagesLength: threadView && threadView.nonEmptyMessages.length,
+            };
+        }, {
+            compareDepth: {
+                threadCacheOrderedMessages: 1,
+                threadViewComponentHintList: 1,
+            },
+        });
+        this._getRefs = useRefs();
+        /**
+         * States whether there was at least one programmatic scroll since the
+         * last scroll event was handled (which is particularly async due to
+         * throttled behavior).
+         * Useful to avoid loading more messages or to incorrectly disabling the
+         * auto-scroll feature when the scroll was not made by the user.
+         */
+        this._isLastScrollProgrammatic = false;
+        /**
+         * Reference of the "load more" item. Useful to trigger load more
+         * on scroll when it becomes visible.
+         */
+        this._loadMoreRef = useRef('loadMore');
+        /**
+         * Snapshot computed during willPatch, which is used by patched.
+         */
+        this._willPatchSnapshot = undefined;
+        this._onScrollThrottled = _.throttle(this._onScrollThrottled.bind(this), 100);
+        /**
+         * State used by the component at the time of the render. Useful to
+         * properly handle async code.
+         */
+        this._lastRenderedValues = useRenderedValues(() => {
+            const threadView = this.threadView;
+            const thread = threadView && threadView.thread;
+            const threadCache = threadView && threadView.threadCache;
+            return {
+                componentHintList: threadView ? [...threadView.componentHintList] : [],
+                hasAutoScrollOnMessageReceived: threadView && threadView.hasAutoScrollOnMessageReceived,
+                hasScrollAdjust: this.props.hasScrollAdjust,
+                mainCache: thread && thread.mainCache,
+                order: this.props.order,
+                orderedMessages: threadCache ? [...threadCache.orderedMessages] : [],
+                thread,
+                threadCache,
+                threadCacheInitialScrollHeight: threadView && threadView.threadCacheInitialScrollHeight,
+                threadCacheInitialScrollPosition: threadView && threadView.threadCacheInitialScrollPosition,
+                threadView,
+                threadViewer: threadView && threadView.threadViewer,
+            };
+        });
+        // useUpdate must be defined after useRenderedValues to guarantee proper
+        // call order
+        useUpdate({ func: () => this._update() });
+    }
+
+    willPatch() {
+        const lastMessageRef = this.lastMessageRef;
+        this._willPatchSnapshot = {
+            isLastMessageVisible:
+                lastMessageRef &&
+                lastMessageRef.isBottomVisible({ offset: 10 }),
+            scrollHeight: this._getScrollableElement().scrollHeight,
+            scrollTop: this._getScrollableElement().scrollTop,
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Update the scroll position of the message list.
+     * This is not done in patched/mounted hooks because scroll position is
+     * dependent on UI globally. To illustrate, imagine following UI:
+     *
+     * +----------+ < viewport top = scrollable top
+     * | message  |
+     * |   list   |
+     * |          |
+     * +----------+ < scrolltop = viewport bottom = scrollable bottom
+     *
+     * Now if a composer is mounted just below the message list, it is shrinked
+     * and scrolltop is altered as a result:
+     *
+     * +----------+ < viewport top = scrollable top
+     * | message  |
+     * |   list   | < scrolltop = viewport bottom  <-+
+     * |          |                                  |-- dist = composer height
+     * +----------+ < scrollable bottom            <-+
+     * +----------+
+     * | composer |
+     * +----------+
+     *
+     * Because of this, the scroll position must be changed when whole UI
+     * is rendered. To make this simpler, this is done when <ThreadView/>
+     * component is patched. This is acceptable when <ThreadView/> has a
+     * fixed height, which is the case for the moment. task-2358066
+     */
+    adjustFromComponentHints() {
+        const { componentHintList, threadView } = this._lastRenderedValues();
+        for (const hint of componentHintList) {
+            switch (hint.type) {
+                case 'change-of-thread-cache':
+                case 'home-menu-hidden':
+                case 'home-menu-shown':
+                    // thread just became visible, the goal is to restore its
+                    // saved position if it exists or scroll to the end
+                    this._adjustScrollFromModel();
+                    break;
+                case 'message-received':
+                case 'messages-loaded':
+                case 'new-messages-loaded':
+                    // messages have been added at the end, either scroll to the
+                    // end or keep the current position
+                    this._adjustScrollForExtraMessagesAtTheEnd();
+                    break;
+                case 'more-messages-loaded':
+                    // messages have been added at the start, keep the current
+                    // position
+                    this._adjustScrollForExtraMessagesAtTheStart();
+                    break;
+            }
+            if (threadView && threadView.exists()) {
+                threadView.markComponentHintProcessed(hint);
+            }
+        }
+        this._willPatchSnapshot = undefined;
+    }
+
+    /**
+     * @param {mail.message} message
+     * @returns {string}
+     */
+    getDateDay(message) {
+        const date = message.date.format('YYYY-MM-DD');
+        if (date === moment().format('YYYY-MM-DD')) {
+            return this.env._t("Today");
+        } else if (
+            date === moment()
+                .subtract(1, 'days')
+                .format('YYYY-MM-DD')
+        ) {
+            return this.env._t("Yesterday");
+        }
+        return message.date.format('LL');
+    }
+
+    /**
+     * @returns {integer}
+     */
+    getScrollHeight() {
+        return this._getScrollableElement().scrollHeight;
+    }
+
+    /**
+     * @returns {integer}
+     */
+    getScrollTop() {
+        return this._getScrollableElement().scrollTop;
+    }
+
+    /**
+     * @returns {mail/static/src/components/message/message.js|undefined}
+     */
+    get mostRecentMessageRef() {
+        const { order } = this._lastRenderedValues();
+        if (order === 'desc') {
+            return this.messageRefs[0];
+        }
+        const { length: l, [l - 1]: mostRecentMessageRef } = this.messageRefs;
+        return mostRecentMessageRef;
+    }
+
+    /**
+     * @param {integer} messageId
+     * @returns {mail/static/src/components/message/message.js|undefined}
+     */
+    messageRefFromId(messageId) {
+        return this.messageRefs.find(ref => ref.message.id === messageId);
+    }
+
+    /**
+     * Get list of sub-components Message, ordered based on prop `order`
+     * (ASC/DESC).
+     *
+     * The asynchronous nature of OWL rendering pipeline may reveal disparity
+     * between knowledgeable state of store between components. Use this getter
+     * with extreme caution!
+     *
+     * Let's illustrate the disparity with a small example:
+     *
+     * - Suppose this component is aware of ordered (record) messages with
+     *   following IDs: [1, 2, 3, 4, 5], and each (sub-component) messages map
+     * each of these records.
+     * - Now let's assume a change in store that translate to ordered (record)
+     *   messages with following IDs: [2, 3, 4, 5, 6].
+     * - Because store changes trigger component re-rendering by their "depth"
+     *   (i.e. from parents to children), this component may be aware of
+     *   [2, 3, 4, 5, 6] but not yet sub-components, so that some (component)
+     *   messages should be destroyed but aren't yet (the ref with message ID 1)
+     *   and some do not exist yet (no ref with message ID 6).
+     *
+     * @returns {mail/static/src/components/message/message.js[]}
+     */
+    get messageRefs() {
+        const { order } = this._lastRenderedValues();
+        const refs = this._getRefs();
+        const ascOrderedMessageRefs = Object.entries(refs)
+            .filter(([refId, ref]) => (
+                    // Message refs have message local id as ref id, and message
+                    // local ids contain name of model 'mail.message'.
+                    refId.includes(this.env.models['mail.message'].modelName) &&
+                    // Component that should be destroyed but haven't just yet.
+                    ref.message
+                )
+            )
+            .map(([refId, ref]) => ref)
+            .sort((ref1, ref2) => (ref1.message.id < ref2.message.id ? -1 : 1));
+        if (order === 'desc') {
+            return ascOrderedMessageRefs.reverse();
+        }
+        return ascOrderedMessageRefs;
+    }
+
+    /**
+     * @returns {mail.message[]}
+     */
+    get orderedMessages() {
+        const threadCache = this.threadView.threadCache;
+        if (this.props.order === 'desc') {
+            return [...threadCache.orderedMessages].reverse();
+        }
+        return threadCache.orderedMessages;
+    }
+
+    /**
+     * @param {integer} value
+     */
+    setScrollTop(value) {
+        if (this._getScrollableElement().scrollTop === value) {
+            return;
+        }
+        this._isLastScrollProgrammatic = true;
+        this._getScrollableElement().scrollTop = value;
+    }
+
+    /**
+     * @param {mail.message} prevMessage
+     * @param {mail.message} message
+     * @returns {boolean}
+     */
+    shouldMessageBeSquashed(prevMessage, message) {
+        if (!this.props.hasSquashCloseMessages) {
+            return false;
+        }
+        if (Math.abs(message.date.diff(prevMessage.date)) > 60000) {
+            // more than 1 min. elasped
+            return false;
+        }
+        if (prevMessage.message_type !== 'comment' || message.message_type !== 'comment') {
+            return false;
+        }
+        if (prevMessage.author !== message.author) {
+            // from a different author
+            return false;
+        }
+        if (prevMessage.originThread !== message.originThread) {
+            return false;
+        }
+        if (
+            prevMessage.moderation_status === 'pending_moderation' ||
+            message.moderation_status === 'pending_moderation'
+        ) {
+            return false;
+        }
+        if (
+            prevMessage.notifications.length > 0 ||
+            message.notifications.length > 0
+        ) {
+            // visual about notifications is restricted to non-squashed messages
+            return false;
+        }
+        const prevOriginThread = prevMessage.originThread;
+        const originThread = message.originThread;
+        if (
+            prevOriginThread &&
+            originThread &&
+            prevOriginThread.model === originThread.model &&
+            originThread.model !== 'mail.channel' &&
+            prevOriginThread.id !== originThread.id
+        ) {
+            // messages linked to different document thread
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * @returns {mail.thread_view}
+     */
+    get threadView() {
+        return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _adjustScrollForExtraMessagesAtTheEnd() {
+        const {
+            hasAutoScrollOnMessageReceived,
+            hasScrollAdjust,
+            order,
+        } = this._lastRenderedValues();
+        if (!this._getScrollableElement() || !hasScrollAdjust) {
+            return;
+        }
+        if (!hasAutoScrollOnMessageReceived) {
+            if (order === 'desc' && this._willPatchSnapshot) {
+                const { scrollHeight, scrollTop } = this._willPatchSnapshot;
+                this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop);
+            }
+            return;
+        }
+        this._scrollToEnd();
+    }
+
+    /**
+     * @private
+     */
+    _adjustScrollForExtraMessagesAtTheStart() {
+        const {
+            hasScrollAdjust,
+            order,
+        } = this._lastRenderedValues();
+        if (
+            !this._getScrollableElement() ||
+            !hasScrollAdjust ||
+            !this._willPatchSnapshot ||
+            order === 'desc'
+        ) {
+            return;
+        }
+        const { scrollHeight, scrollTop } = this._willPatchSnapshot;
+        this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop);
+    }
+
+    /**
+     * @private
+     */
+    _adjustScrollFromModel() {
+        const {
+            hasScrollAdjust,
+            threadCacheInitialScrollHeight,
+            threadCacheInitialScrollPosition,
+        } = this._lastRenderedValues();
+        if (!this._getScrollableElement() || !hasScrollAdjust) {
+            return;
+        }
+        if (
+            threadCacheInitialScrollPosition !== undefined &&
+            this._getScrollableElement().scrollHeight === threadCacheInitialScrollHeight
+        ) {
+            this.setScrollTop(threadCacheInitialScrollPosition);
+            return;
+        }
+        this._scrollToEnd();
+        return;
+    }
+
+    /**
+     * @private
+     */
+    _checkMostRecentMessageIsVisible() {
+        const {
+            mainCache,
+            threadCache,
+            threadView,
+        } = this._lastRenderedValues();
+        if (!threadView || !threadView.exists()) {
+            return;
+        }
+        const lastMessageIsVisible =
+            threadCache &&
+            this.mostRecentMessageRef &&
+            threadCache === mainCache &&
+            this.mostRecentMessageRef.isPartiallyVisible();
+        if (lastMessageIsVisible) {
+            threadView.handleVisibleMessage(this.mostRecentMessageRef.message);
+        }
+    }
+
+    /**
+     * @private
+     * @returns {Element|undefined} Scrollable Element
+     */
+    _getScrollableElement() {
+        if (this.props.getScrollableElement) {
+            return this.props.getScrollableElement();
+        } else {
+            return this.el;
+        }
+    }
+
+    /**
+     * @private
+     * @returns {boolean}
+     */
+    _isLoadMoreVisible() {
+        const loadMore = this._loadMoreRef.el;
+        if (!loadMore) {
+            return false;
+        }
+        const loadMoreRect = loadMore.getBoundingClientRect();
+        const elRect = this._getScrollableElement().getBoundingClientRect();
+        const isInvisible = loadMoreRect.top > elRect.bottom || loadMoreRect.bottom < elRect.top;
+        return !isInvisible;
+    }
+
+    /**
+     * @private
+     */
+    _loadMore() {
+        const { threadCache } = this._lastRenderedValues();
+        if (!threadCache || !threadCache.exists()) {
+            return;
+        }
+        threadCache.loadMoreMessages();
+    }
+
+    /**
+     * Scrolls to the end of the list.
+     *
+     * @private
+     */
+    _scrollToEnd() {
+        const { order } = this._lastRenderedValues();
+        this.setScrollTop(order === 'asc' ? this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight : 0);
+    }
+
+    /**
+     * @private
+     */
+    _update() {
+        this._checkMostRecentMessageIsVisible();
+        this.adjustFromComponentHints();
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickLoadMore(ev) {
+        ev.preventDefault();
+        this._loadMore();
+    }
+
+    /**
+     * @private
+     * @param {ScrollEvent} ev
+     */
+    onScroll(ev) {
+        this._onScrollThrottled(ev);
+    }
+
+    /**
+     * @private
+     * @param {ScrollEvent} ev
+     */
+    _onScrollThrottled(ev) {
+        const {
+            order,
+            orderedMessages,
+            thread,
+            threadCache,
+            threadView,
+            threadViewer,
+        } = this._lastRenderedValues();
+        if (!this._getScrollableElement()) {
+            // could be unmounted in the meantime (due to throttled behavior)
+            return;
+        }
+        const scrollTop = this._getScrollableElement().scrollTop;
+        this.env.messagingBus.trigger('o-component-message-list-scrolled', {
+            orderedMessages,
+            scrollTop,
+            thread,
+            threadViewer,
+        });
+        if (!this._isLastScrollProgrammatic && threadView && threadView.exists()) {
+            // Margin to compensate for inaccurate scrolling to bottom and height
+            // flicker due height change of composer area.
+            const margin = 30;
+            // Automatically scroll to new received messages only when the list is
+            // currently fully scrolled.
+            const hasAutoScrollOnMessageReceived = (order === 'asc')
+                ? scrollTop >= this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight - margin
+                : scrollTop <= margin;
+            threadView.update({ hasAutoScrollOnMessageReceived });
+        }
+        if (threadViewer && threadViewer.exists()) {
+            threadViewer.saveThreadCacheScrollHeightAsInitial(this._getScrollableElement().scrollHeight, threadCache);
+            threadViewer.saveThreadCacheScrollPositionsAsInitial(scrollTop, threadCache);
+        }
+        if (!this._isLastScrollProgrammatic && this._isLoadMoreVisible()) {
+            this._loadMore();
+        }
+        this._checkMostRecentMessageIsVisible();
+        this._isLastScrollProgrammatic = false;
+    }
+
+}
+
+Object.assign(MessageList, {
+    components,
+    defaultProps: {
+        hasMessageCheckbox: false,
+        hasScrollAdjust: true,
+        hasSquashCloseMessages: false,
+        haveMessagesMarkAsReadIcon: false,
+        haveMessagesReplyIcon: false,
+        order: 'asc',
+    },
+    props: {
+        hasMessageCheckbox: Boolean,
+        hasSquashCloseMessages: Boolean,
+        haveMessagesMarkAsReadIcon: Boolean,
+        haveMessagesReplyIcon: Boolean,
+        hasScrollAdjust: Boolean,
+        /**
+         * Function returns the exact scrollable element from the parent
+         * to manage proper scroll heights which affects the load more messages.
+         */
+        getScrollableElement: {
+            type: Function,
+            optional: true,
+        },
+        order: {
+            type: String,
+            validate: prop => ['asc', 'desc'].includes(prop),
+        },
+        selectedMessageLocalId: {
+            type: String,
+            optional: true,
+        },
+        threadViewLocalId: String,
+    },
+    template: 'mail.MessageList',
+});
+
+return MessageList;
+
+});
diff --git a/addons/mail/static/src/components/message_list/message_list.scss b/addons/mail/static/src/components/message_list/message_list.scss
new file mode 100644
index 00000000..cb06adda
--- /dev/null
+++ b/addons/mail/static/src/components/message_list/message_list.scss
@@ -0,0 +1,135 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MessageList {
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    &.o-empty {
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:not(.o-empty) {
+        padding-bottom: 15px;
+    }
+}
+
+.o_MessageList_empty {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+    align-self: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    line-height: 2.5rem;
+}
+
+.o_MessageList_isLoadingMore {
+    align-self: center;
+}
+
+.o_MessageList_isLoadingMoreIcon {
+    margin-right: 3px;
+}
+
+.o_MessageList_loadMore {
+    align-self: center;
+}
+
+.o_MessageList_separator {
+    display: flex;
+    align-items: center;
+    padding: 0 0;
+    flex: 0 0 auto;
+}
+
+.o_MessageList_separatorDate {
+    padding: 15px 0;
+}
+
+.o_MessageList_separatorLine {
+    flex: 1 1 auto;
+    width: auto;
+}
+
+.o_MessageList_separatorNewMessages {
+    // bug with safari: container does not auto-grow from child size
+    padding: 0 0;
+    margin-right: 15px;
+}
+
+.o_MessageList_separatorLabel {
+    padding: 0 10px;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_MessageList {
+    background-color: white;
+}
+
+.o_MessageList_empty {
+    text-align: center;
+}
+
+.o_MessageList_emptyTitle {
+    font-weight: bold;
+    font-size: 1.3rem;
+
+    &.o-neutral-face-icon:before {
+        @extend %o-nocontent-init-image;
+        @include size(120px, 140px);
+        background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
+    }
+}
+
+.o_MessageList_loadMore {
+    cursor: pointer;
+}
+
+.o_MessageList_message.o-has-message-selection:not(.o-selected) {
+    opacity: 0.5;
+}
+
+.o_MessageList_separator {
+    font-weight: bold;
+}
+
+.o_MessageList_separatorLine {
+    border-color: gray('400');
+}
+
+.o_MessageList_separatorLineNewMessages {
+    border-color: lighten($o-brand-odoo, 15%);
+}
+
+.o_MessageList_separatorNewMessages {
+    color: lighten($o-brand-odoo, 15%);
+
+}
+
+.o_MessageList_separatorLabel {
+    background-color: white;
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_MessageList_separatorNewMessages:not(.o-disable-animation) {
+    &.fade-leave-active {
+        transition: opacity 0.5s;
+    }
+
+    &.fade-leave-to {
+        opacity: 0;
+    }
+}
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
new file mode 100644
index 00000000..c0aff715
--- /dev/null
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessageList" owl="1">
+        <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0, 'o-has-message-selection': props.selectedMessageLocalId }" t-on-scroll="onScroll">
+            <t t-if="threadView">
+                <!-- No result messages -->
+                <t t-if="threadView.nonEmptyMessages.length === 0">
+                    <div class="o_MessageList_empty o_MessageList_item">
+                        <t t-if="threadView.thread === env.messaging.inbox">
+                            <div class="o_MessageList_emptyTitle">
+                                Congratulations, your inbox is empty
+                            </div>
+                            New messages appear here.
+                        </t>
+                        <t t-elif="threadView.thread === env.messaging.starred">
+                            <div class="o_MessageList_emptyTitle">
+                                No starred messages
+                            </div>
+                            You can mark any message as 'starred', and it shows up in this mailbox.
+                        </t>
+                        <t t-elif="threadView.thread === env.messaging.history">
+                            <div class="o_MessageList_emptyTitle o-neutral-face-icon">
+                                No history messages
+                            </div>
+                            Messages marked as read will appear in the history.
+                        </t>
+                        <t t-elif="threadView.thread === env.messaging.moderation">
+                            <div class="o_MessageList_emptyTitle">
+                                You have no messages to moderate.
+                            </div>
+                            Messages pending moderation appear here.
+                        </t>
+                        <t t-else="">
+                            There are no messages in this conversation.
+                        </t>
+                    </div>
+                </t>
+                <!-- LOADING (if order asc)-->
+                <t t-if="props.order === 'asc' and orderedMessages.length > 0">
+                    <t t-call="mail.MessageList.loadMore"/>
+                </t>
+                <!-- MESSAGES -->
+                <t t-set="current_day" t-value="0"/>
+                <t t-set="prev_message" t-value="0"/>
+                <t t-foreach="orderedMessages" t-as="message" t-key="message.localId">
+                    <t t-if="message === threadView.thread.messageAfterNewMessageSeparator">
+                        <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': env.disableAnimation }" t-transition="fade">
+                            <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span>
+                        </div>
+                    </t>
+                    <t t-if="!message.isEmpty">
+                        <t t-set="message_day" t-value="getDateDay(message)"/>
+                        <t t-if="current_day !== message_day">
+                            <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item">
+                                <hr class="o_MessageList_separatorLine"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine"/>
+                                <t t-set="current_day" t-value="message_day"/>
+                                <t t-set="isMessageSquashed" t-value="false"/>
+                            </div>
+                        </t>
+                        <t t-else="">
+                            <t t-set="isMessageSquashed" t-value="shouldMessageBeSquashed(prev_message, message)"/>
+                        </t>
+                        <Message
+                            class="o_MessageList_item o_MessageList_message"
+                            t-att-class="{
+                                'o-has-message-selection': props.selectedMessageLocalId,
+                            }"
+                            hasMarkAsReadIcon="props.haveMessagesMarkAsReadIcon"
+                            hasCheckbox="props.hasMessageCheckbox"
+                            hasReplyIcon="props.haveMessagesReplyIcon"
+                            isSelected="props.selectedMessageLocalId === message.localId"
+                            isSquashed="isMessageSquashed"
+                            messageLocalId="message.localId"
+                            threadViewLocalId="threadView.localId"
+                            t-ref="{{ message.localId }}"
+                        />
+                        <t t-set="prev_message" t-value="message"/>
+                    </t>
+                </t>
+                <!-- LOADING (if order desc)-->
+                <t t-if="props.order === 'desc' and orderedMessages.length > 0">
+                    <t t-call="mail.MessageList.loadMore"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.MessageList.loadMore" owl="1">
+        <t t-if="threadView.threadCache.isLoadingMore">
+            <div class="o_MessageList_item o_MessageList_isLoadingMore">
+                <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-spinner"/>
+                Loading...
+            </div>
+        </t>
+        <t t-elif="!threadView.threadCache.isAllHistoryLoaded and !threadView.thread.isTemporary">
+            <a class="o_MessageList_item o_MessageList_loadMore" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore">
+                Load more
+            </a>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js
new file mode 100644
index 00000000..ed555b0c
--- /dev/null
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js
@@ -0,0 +1,136 @@
+odoo.define('mail/static/src/components/message_seen_indicator/message_seen_indicator.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class MessageSeenIndicator extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const message = this.env.models['mail.message'].get(props.messageLocalId);
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            const messageSeenIndicator = thread && thread.model === 'mail.channel'
+                ? this.env.models['mail.message_seen_indicator'].findFromIdentifyingData({
+                    channelId: thread.id,
+                    messageId: message.id,
+                })
+                : undefined;
+            return {
+                messageSeenIndicator: messageSeenIndicator ? messageSeenIndicator.__state : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    get indicatorTitle() {
+        if (!this.messageSeenIndicator) {
+            return '';
+        }
+        if (this.messageSeenIndicator.hasEveryoneSeen) {
+            return this.env._t("Seen by Everyone");
+        }
+        if (this.messageSeenIndicator.hasSomeoneSeen) {
+            const partnersThatHaveSeen = this.messageSeenIndicator.partnersThatHaveSeen.map(
+                partner => partner.name
+            );
+            if (partnersThatHaveSeen.length === 1) {
+                return _.str.sprintf(
+                    this.env._t("Seen by %s"),
+                    partnersThatHaveSeen[0]
+                );
+            }
+            if (partnersThatHaveSeen.length === 2) {
+                return _.str.sprintf(
+                    this.env._t("Seen by %s and %s"),
+                    partnersThatHaveSeen[0],
+                    partnersThatHaveSeen[1]
+                );
+            }
+            return _.str.sprintf(
+                this.env._t("Seen by %s, %s and more"),
+                partnersThatHaveSeen[0],
+                partnersThatHaveSeen[1]
+            );
+        }
+        if (this.messageSeenIndicator.hasEveryoneFetched) {
+            return this.env._t("Received by Everyone");
+        }
+        if (this.messageSeenIndicator.hasSomeoneFetched) {
+            const partnersThatHaveFetched = this.messageSeenIndicator.partnersThatHaveFetched.map(
+                partner => partner.name
+            );
+            if (partnersThatHaveFetched.length === 1) {
+                return _.str.sprintf(
+                    this.env._t("Received by %s"),
+                    partnersThatHaveFetched[0]
+                );
+            }
+            if (partnersThatHaveFetched.length === 2) {
+                return _.str.sprintf(
+                    this.env._t("Received by %s and %s"),
+                    partnersThatHaveFetched[0],
+                    partnersThatHaveFetched[1]
+                );
+            }
+            return _.str.sprintf(
+                this.env._t("Received by %s, %s and more"),
+                partnersThatHaveFetched[0],
+                partnersThatHaveFetched[1]
+            );
+        }
+        return '';
+    }
+
+    /**
+     * @returns {mail.message}
+     */
+    get message() {
+        return this.env.models['mail.message'].get(this.props.messageLocalId);
+    }
+
+    /**
+     * @returns {mail.message_seen_indicator}
+     */
+    get messageSeenIndicator() {
+        if (!this.thread || this.thread.model !== 'mail.channel') {
+            return undefined;
+        }
+        return this.env.models['mail.message_seen_indicator'].findFromIdentifyingData({
+            channelId: this.thread.id,
+            messageId: this.message.id,
+        });
+    }
+
+    /**
+     * @returns {mail.Thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+}
+
+Object.assign(MessageSeenIndicator, {
+    props: {
+        messageLocalId: String,
+        threadLocalId: String,
+    },
+    template: 'mail.MessageSeenIndicator',
+});
+
+return MessageSeenIndicator;
+
+});
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
new file mode 100644
index 00000000..3a9d566e
--- /dev/null
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss
@@ -0,0 +1,39 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MessageSeenIndicator {
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+}
+
+.o_MessageSeenIndicator_icon {
+
+    &.o-first {
+        padding-left: map-get($spacers, 1);
+    }
+
+    &.o-second {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+    }
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_MessageSeenIndicator {
+    opacity: 0.6;
+
+    &.o-all-seen {
+        color: $o-brand-odoo;
+    }
+
+    &:hover {
+        cursor: pointer;
+        opacity: 0.8;
+    }
+}
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
new file mode 100644
index 00000000..e905afaa
--- /dev/null
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessageSeenIndicator" owl="1">
+        <span class="o_MessageSeenIndicator" t-att-class="{ 'o-all-seen': messageSeenIndicator and messageSeenIndicator.hasEveryoneSeen }" t-att-title="indicatorTitle">
+            <t t-if="messageSeenIndicator and !messageSeenIndicator.isMessagePreviousToLastCurrentPartnerMessageSeenByEveryone">
+                <t t-if="messageSeenIndicator.hasSomeoneFetched or messageSeenIndicator.hasSomeoneSeen">
+                    <i class="o_MessageSeenIndicator_icon o-first fa fa-check"/>
+                </t>
+                <t t-if="messageSeenIndicator.hasSomeoneSeen">
+                    <i class="o_MessageSeenIndicator_icon o-second fa fa-check"/>
+                </t>
+            </t>
+        </span>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
new file mode 100644
index 00000000..fb9c6b8b
--- /dev/null
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js
@@ -0,0 +1,294 @@
+odoo.define('mail/static/src/components/message_seen_indicator/message_seen_indicator_tests', function (require) {
+'use strict';
+
+const components = {
+    MessageSendIndicator: require('mail/static/src/components/message_seen_indicator/message_seen_indicator.js'),
+};
+const {
+    afterEach,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('message_seen_indicator', {}, function () {
+QUnit.module('message_seen_indicator_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createMessageSeenIndicatorComponent = async ({ message, thread }, otherProps) => {
+            const props = Object.assign(
+                { messageLocalId: message.localId, threadLocalId: thread.localId },
+                otherProps
+            );
+            await createRootComponent(this, components.MessageSendIndicator, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('rendering when just one has received the message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 1000,
+        model: 'mail.channel',
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
+            },
+            {
+                channelId: 1000,
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 1000,
+            messageId: 100,
+        }]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageSeenIndicatorComponent({ message, thread });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator',
+        "should display a message seen indicator component"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessageSeenIndicator'),
+        'o-all-seen',
+        "indicator component should not be considered as all seen"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "should display only one seen indicator icon"
+    );
+});
+
+QUnit.test('rendering when everyone have received the message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 1000,
+        model: 'mail.channel',
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
+            },
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 1000,
+            messageId: 100,
+        }]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageSeenIndicatorComponent({ message, thread });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator',
+        "should display a message seen indicator component"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessageSeenIndicator'),
+        'o-all-seen',
+        "indicator component should not be considered as all seen"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        "should display only one seen indicator icon"
+    );
+});
+
+QUnit.test('rendering when just one has seen the message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 1000,
+        model: 'mail.channel',
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
+            },
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 99 }]],
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 1000,
+            messageId: 100,
+        }]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageSeenIndicatorComponent({ message, thread });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator',
+        "should display a message seen indicator component"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessageSeenIndicator'),
+        'o-all-seen',
+        "indicator component should not be considered as all seen"
+    );
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        2,
+        "should display two seen indicator icon"
+    );
+});
+
+QUnit.test('rendering when just one has seen & received the message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 1000,
+        model: 'mail.channel',
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
+            },
+            {
+                channelId: 1000,
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 1000,
+            messageId: 100,
+        }]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageSeenIndicatorComponent({ message, thread });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator',
+        "should display a message seen indicator component"
+    );
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessageSeenIndicator'),
+        'o-all-seen',
+        "indicator component should not be considered as all seen"
+    );
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        2,
+        "should display two seen indicator icon"
+    );
+});
+
+QUnit.test('rendering when just everyone has seen the message', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        id: 1000,
+        model: 'mail.channel',
+        partnerSeenInfos: [['create', [
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 10,
+            },
+            {
+                channelId: 1000,
+                lastFetchedMessage: [['insert', { id: 100 }]],
+                lastSeenMessage: [['insert', { id: 100 }]],
+                partnerId: 100,
+            },
+        ]]],
+        messageSeenIndicators: [['insert', {
+            channelId: 1000,
+            messageId: 100,
+        }]],
+    });
+    const message = this.env.models['mail.message'].insert({
+        author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]],
+        body: "<p>Test</p>",
+        id: 100,
+        originThread: [['link', thread]],
+    });
+    await this.createMessageSeenIndicatorComponent({ message, thread });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageSeenIndicator',
+        "should display a message seen indicator component"
+    );
+    assert.hasClass(
+        document.querySelector('.o_MessageSeenIndicator'),
+        'o-all-seen',
+        "indicator component should not considered as all seen"
+    );
+    assert.containsN(
+        document.body,
+        '.o_MessageSeenIndicator_icon',
+        2,
+        "should display two seen indicator icon"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.js b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
new file mode 100644
index 00000000..9eb7fd71
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
@@ -0,0 +1,234 @@
+odoo.define('mail/static/src/components/messaging_menu/messaging_menu.js', function (require) {
+'use strict';
+
+const components = {
+    AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'),
+    MobileMessagingNavbar: require('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js'),
+    NotificationList: require('mail/static/src/components/notification_list/notification_list.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const patchMixin = require('web.patchMixin');
+
+const { Component } = owl;
+
+class MessagingMenu extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        /**
+         * global JS generated ID for this component. Useful to provide a
+         * custom class to autocomplete input, so that click in an autocomplete
+         * item is not considered as a click away from messaging menu in mobile.
+         */
+        this.id = _.uniqueId('o_messagingMenu_');
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            return {
+                isDeviceMobile: this.env.messaging && this.env.messaging.device.isMobile,
+                isDiscussOpen: this.env.messaging && this.env.messaging.discuss.isOpen,
+                isMessagingInitialized: this.env.isMessagingInitialized(),
+                messagingMenu: this.env.messaging && this.env.messaging.messagingMenu.__state,
+            };
+        });
+
+        // bind since passed as props
+        this._onMobileNewMessageInputSelect = this._onMobileNewMessageInputSelect.bind(this);
+        this._onMobileNewMessageInputSource = this._onMobileNewMessageInputSource.bind(this);
+        this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this);
+        this._constructor(...args);
+    }
+
+    /**
+     * Allows patching constructor.
+     */
+    _constructor() {}
+
+    mounted() {
+        document.addEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    willUnmount() {
+        document.removeEventListener('click', this._onClickCaptureGlobal, true);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.discuss}
+     */
+    get discuss() {
+        return this.env.messaging && this.env.messaging.discuss;
+    }
+
+    /**
+     * @returns {mail.messaging_menu}
+     */
+    get messagingMenu() {
+        return this.env.messaging && this.env.messaging.messagingMenu;
+    }
+
+    /**
+     * @returns {string}
+     */
+    get mobileNewMessageInputPlaceholder() {
+        return this.env._t("Search user...");
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    get tabs() {
+        return [{
+            icon: 'fa fa-envelope',
+            id: 'all',
+            label: this.env._t("All"),
+        }, {
+            icon: 'fa fa-user',
+            id: 'chat',
+            label: this.env._t("Chat"),
+        }, {
+            icon: 'fa fa-users',
+            id: 'channel',
+            label: this.env._t("Channel"),
+        }];
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Closes the menu when clicking outside, if appropriate.
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCaptureGlobal(ev) {
+        if (!this.env.messaging) {
+            /**
+             * Messaging not created, which means essential models like
+             * messaging menu are not ready, so user interactions are omitted
+             * during this (short) period of time.
+             */
+            return;
+        }
+        // ignore click inside the menu
+        if (this.el.contains(ev.target)) {
+            return;
+        }
+        // in all other cases: close the messaging menu when clicking outside
+        this.messagingMenu.close();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickDesktopTabButton(ev) {
+        this.messagingMenu.update({ activeTabId: ev.currentTarget.dataset.tabId });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickNewMessage(ev) {
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.chatWindowManager.openNewMessage();
+            this.messagingMenu.close();
+        } else {
+            this.messagingMenu.toggleMobileNewMessage();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickToggler(ev) {
+        // avoid following dummy href
+        ev.preventDefault();
+        if (!this.env.messaging) {
+            /**
+             * Messaging not created, which means essential models like
+             * messaging menu are not ready, so user interactions are omitted
+             * during this (short) period of time.
+             */
+            return;
+        }
+        this.messagingMenu.toggleOpen();
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     */
+    _onHideMobileNewMessage(ev) {
+        ev.stopPropagation();
+        this.messagingMenu.toggleMobileNewMessage();
+    }
+
+    /**
+     * @private
+     * @param {Event} ev
+     * @param {Object} ui
+     * @param {Object} ui.item
+     * @param {integer} ui.item.id
+     */
+    _onMobileNewMessageInputSelect(ev, ui) {
+        this.env.messaging.openChat({ partnerId: ui.item.id });
+    }
+
+    /**
+     * @private
+     * @param {Object} req
+     * @param {string} req.term
+     * @param {function} res
+     */
+    _onMobileNewMessageInputSource(req, res) {
+        const value = _.escape(req.term);
+        this.env.models['mail.partner'].imSearch({
+            callback: partners => {
+                const suggestions = partners.map(partner => {
+                    return {
+                        id: partner.id,
+                        value: partner.nameOrDisplayName,
+                        label: partner.nameOrDisplayName,
+                    };
+                });
+                res(_.sortBy(suggestions, 'label'));
+            },
+            keyword: value,
+            limit: 10,
+        });
+    }
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {string} ev.detail.tabId
+     */
+    _onSelectMobileNavbarTab(ev) {
+        ev.stopPropagation();
+        this.messagingMenu.update({ activeTabId: ev.detail.tabId });
+    }
+
+}
+
+Object.assign(MessagingMenu, {
+    components,
+    props: {},
+    template: 'mail.MessagingMenu',
+});
+
+return patchMixin(MessagingMenu);
+
+});
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
new file mode 100644
index 00000000..e578218a
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -0,0 +1,143 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MessagingMenu_counter {
+    position: relative;
+    transform: translate(-5px, -5px);
+    margin-right: -10px; // "cancel" right padding of systray items
+}
+
+.o_MessagingMenu_dropdownMenu {
+    display: flex;
+    flex-flow: column;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow-y: auto;
+    /**
+     * Override from bootstrap .dropdown-menu to fix top alignment with other
+     * systray menu.
+     */
+    margin-top: map-get($spacers, 0);
+
+    &.o-messaging-not-initialized {
+        align-items: center;
+        justify-content: center;
+    }
+
+    &:not(.o-mobile) {
+        flex: 0 1 auto;
+        width: 350px;
+        min-height: 50px;
+        max-height: 400px;
+        z-index: 1100; // on top of chat windows
+    }
+
+    &.o-mobile {
+        flex: 1 1 auto;
+        position: fixed;
+        top: $o-mail-chat-window-header-height-mobile;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        margin: 0;
+        max-height: none;
+    }
+}
+
+.o_MessagingMenu_dropdownMenuHeader {
+
+    &:not(.o-mobile) {
+        display: flex;
+        flex-shrink: 0; // Forces Safari to not shrink below fit content
+    }
+
+    &.o-mobile {
+        display: grid;
+        grid-template-areas:
+            "top"
+            "bottom";
+        grid-template-rows: auto auto;
+        padding: 5px
+    }
+}
+
+.o_MessagingMenu_dropdownLoadingIcon {
+    margin-right: 3px;
+}
+
+.o_MessagingMenu_icon {
+    font-size: larger
+}
+
+.o_MessagingMenu_loading {
+    font-size: small;
+    position: absolute;
+    bottom: 50%;
+    right: 0;
+}
+
+.o_MessagingMenu_newMessageButton.o-mobile {
+    grid-area: top;
+    justify-self: start;
+}
+
+.o_MessagingMenu_mobileNewMessageInput {
+    grid-area: bottom;
+    padding: 8px;
+    margin-top: 10px
+}
+
+.o_MessagingMenu_notificationList.o-mobile {
+    flex: 1 1 auto;
+    overflow-y: auto;
+}
+
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+// Make hightlight more consistent, due to messaging menu looking quite similar to discuss app in mobile
+.o_MessagingMenu.o-is-open {
+    background-color: rgba(black, 0.1);
+}
+
+.o_MessagingMenu_counter {
+    background-color: $o-enterprise-primary-color;
+}
+
+.o_MessagingMenu_dropdownMenu.o-mobile {
+    border: 0;
+}
+
+.o_MessagingMenu_dropdownMenuHeader {
+    border-bottom: 1px solid gray('400');
+    z-index: 1;
+}
+
+.o_MessagingMenu_mobileNewMessageInput {
+    appearance: none;
+    border: 1px solid gray('400');
+    border-radius: 5px;
+    outline: none;
+}
+
+.o_MessagingMenu_tabButton.o-desktop {
+
+    &.o-active {
+        font-weight: bold;
+    }
+
+    &:not(:hover) {
+
+        &:not(.o-active) {
+            color: gray('500');
+        }
+    }
+}
+
+.o_MessagingMenu_toggler.o-no-notification {
+    @include o-mail-systray-no-notification-style();
+}
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
new file mode 100644
index 00000000..fc779231
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MessagingMenu" owl="1">
+        <li class="o_MessagingMenu" t-att-class="{ 'o-is-open': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': env.messaging ? env.messaging.device.isMobile : false }">
+            <a class="o_MessagingMenu_toggler" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
+                <i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/>
+                <t t-if="!env.isMessagingInitialized()">
+                    <i class="o_MessagingMenu_loading fa fa-spinner fa-spin"/>
+                </t>
+                <t t-elif="messagingMenu.counter > 0">
+                    <span class="o_MessagingMenu_counter badge badge-pill">
+                        <t t-esc="messagingMenu.counter"/>
+                    </span>
+                </t>
+            </a>
+            <t t-if="messagingMenu and messagingMenu.isOpen">
+                <div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-messaging-not-initialized': !env.messaging.isInitialized }" role="menu">
+                    <t t-if="!env.messaging.isInitialized">
+                        <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-spinner fa-spin"/>Please wait...</span>
+                    </t>
+                    <t t-else="">
+                        <div class="o_MessagingMenu_dropdownMenuHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                            <t t-if="!env.messaging.device.isMobile">
+                                <t t-foreach="['all', 'chat', 'channel']" t-as="tabId" t-key="tabId">
+                                    <button class="o_MessagingMenu_tabButton o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === tabId, }" t-on-click="_onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="tabId">
+                                        <t t-if="tabId === 'all'">All</t>
+                                        <t t-elif="tabId === 'chat'">Chat</t>
+                                        <t t-elif="tabId === 'channel'">Channels</t>
+                                    </button>
+                                </t>
+                            </t>
+                            <t t-if="env.messaging.device.isMobile">
+                                <t t-call="mail.MessagingMenu.newMessageButton"/>
+                            </t>
+                            <div class="o-autogrow"/>
+                            <t t-if="!env.messaging.device.isMobile and !discuss.isOpen">
+                                <t t-call="mail.MessagingMenu.newMessageButton"/>
+                            </t>
+                            <t t-if="env.messaging.device.isMobile and messagingMenu.isMobileNewMessageToggled">
+                                <AutocompleteInput
+                                    class="o_MessagingMenu_mobileNewMessageInput"
+                                    customClass="id + '_mobileNewMessageInputAutocomplete'"
+                                    isFocusOnMount="true"
+                                    placeholder="mobileNewMessageInputPlaceholder"
+                                    select="_onMobileNewMessageInputSelect"
+                                    source="_onMobileNewMessageInputSource"
+                                    t-on-o-hide="_onHideMobileNewMessage"
+                                />
+                            </t>
+                        </div>
+                        <NotificationList
+                            class="o_MessagingMenu_notificationList"
+                            t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                            filter="messagingMenu.activeTabId"
+                        />
+                        <t t-if="env.messaging.device.isMobile">
+                            <MobileMessagingNavbar
+                                class="o_MessagingMenu_mobileNavbar"
+                                activeTabId="messagingMenu.activeTabId"
+                                tabs="tabs"
+                                t-on-o-select-mobile-messaging-navbar-tab="_onSelectMobileNavbarTab"
+                            />
+                        </t>
+                    </t>
+                </div>
+            </t>
+        </li>
+    </t>
+
+    <t t-name="mail.MessagingMenu.newMessageButton" owl="1">
+        <button class="o_MessagingMenu_newMessageButton btn"
+            t-att-class="{
+                'btn-link': !env.messaging.device.isMobile,
+                'btn-secondary': env.messaging.device.isMobile,
+                'o-mobile': env.messaging.device.isMobile,
+            }" t-on-click="_onClickNewMessage" type="button"
+        >
+            New message
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
new file mode 100644
index 00000000..d049ab7a
--- /dev/null
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
@@ -0,0 +1,1039 @@
+odoo.define('mail/static/src/components/messaging_menu/messaging_menu_tests.js', function (require) {
+'use strict';
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const { makeTestPromise } = require('web.test_utils');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('messaging_menu', {}, function () {
+QUnit.module('messaging_menu_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.start = async params => {
+            let { discussWidget, env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+                hasMessagingMenu: true,
+            }));
+            this.discussWidget = discussWidget;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('[technical] messaging not created then becomes 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(2);
+
+    const messagingBeforeCreationDeferred = makeTestPromise();
+    await this.start({
+        messagingBeforeCreationDeferred,
+        waitUntilMessagingCondition: 'none',
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu',
+        "should have messaging menu even when messaging is not yet created"
+    );
+
+    // simulate messaging becoming created
+    messagingBeforeCreationDeferred.resolve();
+    await nextAnimationFrame();
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu',
+        "should still contain messaging menu after messaging has been created"
+    );
+});
+
+QUnit.test('[technical] no crash on attempting opening messaging menu when messaging 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.
+     *
+     * Messaging menu is not expected to be open on click because state of
+     * messaging menu requires messaging being created.
+     */
+    assert.expect(2);
+
+    await this.start({
+        messagingBeforeCreationDeferred: new Promise(() => {}), // keep messaging not created
+        waitUntilMessagingCondition: 'none',
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu',
+        "should have messaging menu even when messaging is not yet created"
+    );
+
+    let error;
+    try {
+        document.querySelector('.o_MessagingMenu_toggler').click();
+        await nextAnimationFrame();
+    } catch (err) {
+        error = err;
+    }
+    assert.notOk(
+        !!error,
+        "Should not crash on attempt to open messaging menu when messaging not created"
+    );
+    if (error) {
+        throw error;
+    }
+});
+
+QUnit.test('messaging not initialized', async function (assert) {
+    assert.expect(2);
+
+    await this.start({
+        async mockRPC(route) {
+            if (route === '/mail/init_messaging') {
+                // simulate messaging never initialized
+                return new Promise(resolve => {});
+            }
+            return this._super(...arguments);
+        },
+        waitUntilMessagingCondition: 'created',
+    });
+    assert.strictEqual(
+        document.querySelectorAll('.o_MessagingMenu_loading').length,
+        1,
+        "should display loading icon on messaging menu when messaging not yet initialized"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.strictEqual(
+        document.querySelector('.o_MessagingMenu_dropdownMenu').textContent,
+        "Please wait...",
+        "should prompt loading when opening messaging menu"
+    );
+});
+
+QUnit.test('messaging becomes initialized', async function (assert) {
+    assert.expect(2);
+
+    const messagingInitializedProm = makeTestPromise();
+
+    await this.start({
+        async mockRPC(route) {
+            const _super = this._super.bind(this, ...arguments); // limitation of class.js
+            if (route === '/mail/init_messaging') {
+                await messagingInitializedProm;
+            }
+            return _super();
+        },
+        waitUntilMessagingCondition: 'created',
+    });
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+
+    // simulate messaging becomes initialized
+    await afterNextRender(() => messagingInitializedProm.resolve());
+    assert.strictEqual(
+        document.querySelectorAll('.o_MessagingMenu_loading').length,
+        0,
+        "should no longer display loading icon on messaging menu when messaging becomes initialized"
+    );
+    assert.notOk(
+        document.querySelector('.o_MessagingMenu_dropdownMenu').textContent.includes("Please wait..."),
+        "should no longer prompt loading when opening messaging menu when messaging becomes initialized"
+    );
+});
+
+QUnit.test('basic rendering', async function (assert) {
+    assert.expect(21);
+
+    await this.start();
+    assert.strictEqual(
+        document.querySelectorAll('.o_MessagingMenu').length,
+        1,
+        "should have messaging menu"
+    );
+    assert.notOk(
+        document.querySelector('.o_MessagingMenu').classList.contains('show'),
+        "should not mark messaging menu item as shown by default"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_toggler`).length,
+        1,
+        "should have clickable element on messaging menu"
+    );
+    assert.notOk(
+        document.querySelector(`.o_MessagingMenu_toggler`).classList.contains('show'),
+        "should not mark messaging menu clickable item as shown by default"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_icon`).length,
+        1,
+        "should have icon on clickable element in messaging menu"
+    );
+    assert.ok(
+        document.querySelector(`.o_MessagingMenu_icon`).classList.contains('fa-comments'),
+        "should have 'comments' icon on clickable element in messaging menu"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
+        0,
+        "should not display any messaging menu dropdown by default"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.hasClass(
+        document.querySelector('.o_MessagingMenu'),
+        "o-is-open",
+        "should mark messaging menu as opened"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
+        1,
+        "should display messaging menu dropdown after click"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenuHeader`).length,
+        1,
+        "should have dropdown menu header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenuHeader
+            .o_MessagingMenu_tabButton
+        `).length,
+        3,
+        "should have 3 tab buttons to filter items in the header"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        1,
+        "1 tab button should be 'All'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        1,
+        "1 tab button should be 'Chat'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        1,
+        "1 tab button should be 'Channels'"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="all"]
+        `).classList.contains('o-active'),
+        "'all' tab button should be active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+        `).classList.contains('o-active'),
+        "'chat' tab button should not be active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+        `).classList.contains('o-active'),
+        "'channel' tab button should not be active"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length,
+        1,
+        "should have button to make a new message"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList
+        `).length,
+        1,
+        "should display thread preview list"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_NotificationList_noConversation
+        `).length,
+        1,
+        "should display no conversation in thread preview list"
+    );
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessagingMenu'),
+        "o-is-open",
+        "should mark messaging menu as closed"
+    );
+});
+
+QUnit.test('counter is taking into account failure notification', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 31,
+        seen_message_id: 11,
+    });
+    // message that is expected to have a failure
+    this.data['mail.message'].records.push({
+        id: 11, // random unique id, will be used to link failure to message
+        model: 'mail.channel', // expected value to link message to channel
+        res_id: 31, // id of a random channel
+    });
+    // failure that is expected to be used in the test
+    this.data['mail.notification'].records.push({
+        mail_message_id: 11, // id of the related message
+        notification_status: 'exception', // necessary value to have a failure
+    });
+    await this.start();
+
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should display a notification counter next to the messaging menu for one notification"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_MessagingMenu_counter').textContent,
+        "1",
+        "should display a counter of '1' next to the messaging menu"
+    );
+});
+
+QUnit.test('switch tab', async function (assert) {
+    assert.expect(15);
+
+    await this.start();
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length,
+        1,
+        "1 tab button should be 'All'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length,
+        1,
+        "1 tab button should be 'Chat'"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length,
+        1,
+        "1 tab button should be 'Channels'"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="all"]
+        `).classList.contains('o-active'),
+        "'all' tab button should be active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+        `).classList.contains('o-active'),
+        "'chat' tab button should not be active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+        `).classList.contains('o-active'),
+        "'channel' tab button should not be active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).click()
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="all"]
+        `).classList.contains('o-active'),
+        "'all' tab button should become inactive"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+        `).classList.contains('o-active'),
+        "'chat' tab button should not become active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+        `).classList.contains('o-active'),
+        "'channel' tab button should stay inactive"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).click()
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="all"]
+        `).classList.contains('o-active'),
+        "'all' tab button should stay active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+        `).classList.contains('o-active'),
+        "'chat' tab button should become inactive"
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+        `).classList.contains('o-active'),
+        "'channel' tab button should become active"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).click()
+    );
+    assert.ok(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="all"]
+        `).classList.contains('o-active'),
+        "'all' tab button should become active"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="chat"]
+        `).classList.contains('o-active'),
+        "'chat' tab button should stay inactive"
+    );
+    assert.notOk(
+        document.querySelector(`
+            .o_MessagingMenu_tabButton[data-tab-id="channel"]
+        `).classList.contains('o-active'),
+        "'channel' tab button should become inactive"
+    );
+});
+
+QUnit.test('new message', async function (assert) {
+    assert.expect(3);
+
+    await this.start({
+        hasChatWindow: true,
+    });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_newMessageButton`).click()
+    );
+
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open a chat window"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatWindow`).classList.contains('o-new-message'),
+        "chat window should be for new message"
+    );
+    assert.ok(
+        document.querySelector(`.o_ChatWindow`).classList.contains('o-focused'),
+        "chat window should be focused"
+    );
+});
+
+QUnit.test('no new message when discuss is open', async function (assert) {
+    assert.expect(3);
+
+    await this.start({
+        autoOpenDiscuss: true,
+        hasDiscuss: true,
+    });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length,
+        0,
+        "should not have 'new message' when discuss is open"
+    );
+
+    // simulate closing discuss app
+    await afterNextRender(() => this.discussWidget.on_detach_callback());
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length,
+        1,
+        "should have 'new message' when discuss is closed"
+    );
+
+    // simulate opening discuss app
+    await afterNextRender(() => this.discussWidget.on_attach_callback());
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length,
+        0,
+        "should not have 'new message' when discuss is open again"
+    );
+});
+
+QUnit.test('channel preview: basic rendering', async function (assert) {
+    assert.expect(9);
+
+    this.data['res.partner'].records.push({
+        id: 7, // random unique id, to link message author
+        name: "Demo", // random name, will be asserted in the test
+    });
+    // channel that is expected to be found in the test
+    this.data['mail.channel'].records.push({
+        id: 20, // random unique id, will be used to link message to channel
+        name: "General", // random name, will be asserted in the test
+    });
+    // message that is expected to be displayed in the test
+    this.data['mail.message'].records.push({
+        author_id: 7, // not current partner, will be asserted in the test
+        body: "<p>test</p>", // random body, will be asserted in the test
+        channel_ids: [20], // id of related channel
+        model: 'mail.channel', // necessary to link message to channel
+        res_id: 20, // id of related channel
+    });
+    await this.start();
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu .o_ThreadPreview
+        `).length,
+        1,
+        "should have one preview"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_sidebar
+        `).length,
+        1,
+        "preview should have a sidebar"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_content
+        `).length,
+        1,
+        "preview should have some content"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_header
+        `).length,
+        1,
+        "preview should have header in content"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_header
+            .o_ThreadPreview_name
+        `).length,
+        1,
+        "preview should have name in header of content"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_name
+        `).textContent,
+        "General", "preview should have name of channel"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_content
+            .o_ThreadPreview_core
+        `).length,
+        1,
+        "preview should have core in content"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_core
+            .o_ThreadPreview_inlineText
+        `).length,
+        1,
+        "preview should have inline text in core of content"
+    );
+    assert.strictEqual(
+        document.querySelector(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview_core
+            .o_ThreadPreview_inlineText
+        `).textContent.trim(),
+        "Demo: test",
+        "preview should have message content as inline text of core content"
+    );
+});
+
+QUnit.test('filtered previews', async function (assert) {
+    assert.expect(12);
+
+    // chat and channel expected to be found in the menu
+    this.data['mail.channel'].records.push(
+        { channel_type: "chat", id: 10 },
+        { id: 20 },
+    );
+    this.data['mail.message'].records.push(
+        {
+            channel_ids: [10], // id of related channel
+            model: 'mail.channel', // to link message to channel
+            res_id: 10, // id of related channel
+        },
+        {
+            channel_ids: [20], // id of related channel
+            model: 'mail.channel', // to link message to channel
+            res_id: 20, // id of related channel
+        },
+    );
+    await this.start();
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
+        2,
+        "should have 2 previews"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of chat"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of channel"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
+        1,
+        "should have one preview"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of chat"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        0,
+        "should not have preview of channel"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="channel"]').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview
+        `).length,
+        1,
+        "should have one preview"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        0,
+        "should not have preview of chat"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of channel"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="all"]').click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length,
+        2,
+        "should have 2 previews"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 10,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of chat"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`
+            .o_MessagingMenu_dropdownMenu
+            .o_ThreadPreview[data-thread-local-id="${
+                this.env.models['mail.thread'].findFromIdentifyingData({
+                    id: 20,
+                    model: 'mail.channel',
+                }).localId
+            }"]
+        `).length,
+        1,
+        "should have preview of channel"
+    );
+});
+
+QUnit.test('open chat window from preview', async function (assert) {
+    assert.expect(1);
+
+    // channel expected to be found in the menu, only its existence matters, data are irrelevant
+    this.data['mail.channel'].records.push({});
+    await this.start({
+        hasChatWindow: true,
+    });
+
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_toggler`).click()
+    );
+    await afterNextRender(() =>
+        document.querySelector(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).click()
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_ChatWindow`).length,
+        1,
+        "should have open a chat window"
+    );
+});
+
+QUnit.test('no code injection in message body preview', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push({
+        body: "<p><em>&shoulnotberaised</em><script>throw new Error('CodeInjectionError');</script></p>",
+        channel_ids: [11],
+    });
+    await this.start();
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_MessagingMenu_toggler`).click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu_dropdownMenu .o_ThreadPreview',
+        "should display a preview",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_core',
+        "preview should have core in content",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_inlineText',
+        "preview should have inline text in core of content",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ThreadPreview_inlineText')
+            .textContent.replace(/\s/g, ""),
+        "You:&shoulnotberaisedthrownewError('CodeInjectionError');",
+        "should display correct uninjected last message inline content"
+    );
+    assert.containsNone(
+        document.querySelector('.o_ThreadPreview_inlineText'),
+        'script',
+        "last message inline content should not have any code injection"
+    );
+});
+
+QUnit.test('no code injection in message body preview from sanitized message', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push({
+        body: "<p>&lt;em&gt;&shoulnotberaised&lt;/em&gt;&lt;script&gt;throw new Error('CodeInjectionError');&lt;/script&gt;</p>",
+        channel_ids: [11],
+    });
+    await this.start();
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_MessagingMenu_toggler`).click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu_dropdownMenu .o_ThreadPreview',
+        "should display a preview",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_core',
+        "preview should have core in content",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_inlineText',
+        "preview should have inline text in core of content",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ThreadPreview_inlineText')
+            .textContent.replace(/\s/g, ""),
+        "You:<em>&shoulnotberaised</em><script>thrownewError('CodeInjectionError');</script>",
+        "should display correct uninjected last message inline content"
+    );
+    assert.containsNone(
+        document.querySelector('.o_ThreadPreview_inlineText'),
+        'script',
+        "last message inline content should not have any code injection"
+    );
+});
+
+QUnit.test('<br/> tags in message body preview are transformed in spaces', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push({
+        body: "<p>a<br/>b<br>c<br   />d<br     ></p>",
+        channel_ids: [11],
+    });
+    await this.start();
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_MessagingMenu_toggler`).click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessagingMenu_dropdownMenu .o_ThreadPreview',
+        "should display a preview",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_core',
+        "preview should have core in content",
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_inlineText',
+        "preview should have inline text in core of content",
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ThreadPreview_inlineText').textContent,
+        "You: a b c d",
+        "should display correct last message inline content with brs replaced by spaces"
+    );
+});
+
+QUnit.test('rendering with OdooBot has a request (default)', async function (assert) {
+    assert.expect(4);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'default',
+                },
+            },
+        },
+    });
+
+    assert.ok(
+        document.querySelector('.o_MessagingMenu_counter'),
+        "should display a notification counter next to the messaging menu for OdooBot request"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_MessagingMenu_counter').textContent,
+        "1",
+        "should display a counter of '1' next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationRequest',
+        "should display a notification in the messaging menu"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationRequest_name').textContent.trim(),
+        'OdooBot has a request',
+        "notification should display that OdooBot has a request"
+    );
+});
+
+QUnit.test('rendering without OdooBot has a request (denied)', async function (assert) {
+    assert.expect(2);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'denied',
+                },
+            },
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+QUnit.test('rendering without OdooBot has a request (accepted)', async function (assert) {
+    assert.expect(2);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'granted',
+                },
+            },
+        },
+    });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+QUnit.test('respond to notification prompt (denied)', async function (assert) {
+    assert.expect(3);
+
+    await this.start({
+        env: {
+            browser: {
+                Notification: {
+                    permission: 'default',
+                    async requestPermission() {
+                        this.permission = 'denied';
+                        return this.permission;
+                    },
+                },
+            },
+        },
+    });
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_NotificationRequest').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.toast .o_notification_content',
+        "should display a toast notification with the deny confirmation"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessagingMenu_counter',
+        "should not display a notification counter next to the messaging menu"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_MessagingMenu_toggler').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_NotificationRequest',
+        "should display no notification in the messaging menu"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js
new file mode 100644
index 00000000..45b53e87
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js
@@ -0,0 +1,61 @@
+odoo.define('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class MobileMessagingNavbar extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                tabs: 2,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        this.trigger('o-select-mobile-messaging-navbar-tab', {
+            tabId: ev.currentTarget.dataset.tabId,
+        });
+    }
+
+}
+
+Object.assign(MobileMessagingNavbar, {
+    defaultProps: {
+        tabs: [],
+    },
+    props: {
+        activeTabId: String,
+        tabs: {
+            type: Array,
+            element: {
+                type: Object,
+                shape: {
+                    icon: {
+                        type: String,
+                        optional: true,
+                    },
+                    id: String,
+                    label: String,
+                },
+            },
+        },
+    },
+    template: 'mail.MobileMessagingNavbar',
+});
+
+return MobileMessagingNavbar;
+
+});
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
new file mode 100644
index 00000000..df0611f9
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
@@ -0,0 +1,43 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MobileMessagingNavbar {
+    display: flex;
+    flex: 0 0 auto;
+    z-index: 1;
+}
+
+.o_MobileMessagingNavbar_tab {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    flex: 1 1 0;
+    padding: 8px;
+}
+
+.o_MobileMessagingNavbar_tabIcon {
+    margin-bottom: 4%;
+    font-size: 1.3em;
+}
+
+.o_MobileMessagingNavbar_tabLabel {
+    font-size: 0.8em;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_MobileMessagingNavbar {
+    background-color: white;
+    box-shadow: 0 0 8px gray('400');
+}
+
+.o_MobileMessagingNavbar_tab {
+    box-shadow: 1px 0 0 gray('400');
+
+    &.o-active {
+        color: $o-brand-primary;
+    }
+}
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
new file mode 100644
index 00000000..d60611bf
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MobileMessagingNavbar" owl="1">
+        <div class="o_MobileMessagingNavbar">
+            <t t-foreach="props.tabs" t-as="tab" t-key="tab.id">
+                <div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': props.activeTabId === tab.id }" t-on-click="_onClick" t-att-data-tab-id="tab.id">
+                    <t t-if="tab.icon">
+                        <span class="o_MobileMessagingNavbar_tabIcon" t-att-class="tab.icon"/>
+                    </t>
+                    <span class="o_MobileMessagingNavbar_tabLabel"><t t-esc="tab.label"/></span>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js
new file mode 100644
index 00000000..c96bd902
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js
@@ -0,0 +1,94 @@
+odoo.define('mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const components = {
+    Dialog: require('web.OwlDialog'),
+};
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ModerationBanDialog extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                messageLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const messages = props.messageLocalIds.map(localId =>
+                this.env.models['mail.message'].get(localId)
+            );
+            return {
+                messages: messages.map(message => message ? message.__state : undefined),
+            };
+        }, {
+            compareDepth: {
+                messages: 1,
+            },
+        });
+        // to manually trigger the dialog close event
+        this._dialogRef = useRef('dialog');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.message[]}
+     */
+    get messages() {
+        return this.props.messageLocalIds.map(localId => this.env.models['mail.message'].get(localId));
+    }
+
+    /**
+     * @returns {string}
+     */
+    get CONFIRMATION() {
+        return this.env._t("Confirmation");
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickBan() {
+        this._dialogRef.comp._close();
+        this.env.models['mail.message'].moderate(this.messages, 'ban');
+    }
+
+    /**
+     * @private
+     */
+    _onClickCancel() {
+        this._dialogRef.comp._close();
+    }
+
+}
+
+Object.assign(ModerationBanDialog, {
+    components,
+    props: {
+        messageLocalIds: {
+            type: Array,
+            element: String,
+        },
+    },
+    template: 'mail.ModerationBanDialog',
+});
+
+return ModerationBanDialog;
+
+});
diff --git a/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml
new file mode 100644
index 00000000..1e29f731
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ModerationBanDialog" owl="1">
+        <Dialog contentClass="'o_ModerationBanDialog'" title="CONFIRMATION" size="'medium'" t-ref="dialog">
+            <t t-if="messages.length === 1">
+                <p>You are going to ban the following user:</p>
+            </t>
+            <t t-else="">
+                <p>You are going to ban the following users:</p>
+            </t>
+            <ul class="my-5">
+                <t t-foreach="messages" t-as="message" t-key="message.localId">
+                    <li t-esc="message.email_from"/>
+                </t>
+            </ul>
+            <p>Do you confirm the action?</p>
+            <t t-set-slot="buttons">
+                <button class="o-ban btn btn-primary" t-on-click="_onClickBan">Ban</button>
+                <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js
new file mode 100644
index 00000000..4c444683
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js
@@ -0,0 +1,109 @@
+odoo.define('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const components = {
+    Dialog: require('web.OwlDialog'),
+};
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ModerationDiscardDialog extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                messageLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const messages = props.messageLocalIds.map(localId =>
+                this.env.models['mail.message'].get(localId)
+            );
+            return {
+                messages: messages.map(message => message ? message.__state : undefined),
+            };
+        }, {
+            compareDepth: {
+                messages: 1,
+            },
+        });
+        // to manually trigger the dialog close event
+        this._dialogRef = useRef('dialog');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    getBody() {
+        if (this.messages.length === 1) {
+            return this.env._t("You are going to discard 1 message.");
+        }
+        return _.str.sprintf(
+            this.env._t("You are going to discard %s messages."),
+            this.messages.length
+        );
+    }
+
+    /**
+     * @returns {mail.message[]}
+     */
+    get messages() {
+        return this.props.messageLocalIds.map(localId =>
+            this.env.models['mail.message'].get(localId)
+        );
+    }
+
+    /**
+     * @returns {string}
+     */
+    getTitle() {
+        return this.env._t("Confirmation");
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickCancel() {
+        this._dialogRef.comp._close();
+    }
+
+    /**
+     * @private
+     */
+    _onClickDiscard() {
+        this._dialogRef.comp._close();
+        this.env.models['mail.message'].moderate(this.messages, 'discard');
+    }
+
+}
+
+Object.assign(ModerationDiscardDialog, {
+    components,
+    props: {
+        messageLocalIds: {
+            type: Array,
+            element: String,
+        },
+    },
+    template: 'mail.ModerationDiscardDialog',
+});
+
+return ModerationDiscardDialog;
+
+});
diff --git a/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml
new file mode 100644
index 00000000..58dbc14d
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ModerationDiscardDialog" owl="1">
+        <Dialog contentClass="'o_ModerationDiscardDialog'" title="getTitle()" size="'medium'" t-ref="dialog">
+            <p t-esc="getBody()"/>
+            <p>Do you confirm the action?</p>
+            <t t-set-slot="buttons">
+                <button class="o-discard btn btn-primary" t-on-click="_onClickDiscard">Discard</button>
+                <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js
new file mode 100644
index 00000000..44b82bc6
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js
@@ -0,0 +1,104 @@
+odoo.define('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const components = {
+    Dialog: require('web.OwlDialog'),
+};
+
+const { Component, useState } = owl;
+const { useRef } = owl.hooks;
+
+class ModerationRejectDialog extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                messageLocalIds: 1,
+            },
+        });
+        this.state = useState({
+            title: this.env._t("Message Rejected"),
+            comment: this.env._t("Your message was rejected by moderator."),
+        });
+        useStore(props => {
+            const messages = props.messageLocalIds.map(localId =>
+                this.env.models['mail.message'].get(localId)
+            );
+            return {
+                messages: messages.map(message => message ? message.__state : undefined),
+            };
+        }, {
+            compareDepth: {
+                messages: 1,
+            },
+        });
+        // to manually trigger the dialog close event
+        this._dialogRef = useRef('dialog');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.message[]}
+     */
+    get messages() {
+        return this.props.messageLocalIds.map(localId =>
+            this.env.models['mail.message'].get(localId)
+        );
+    }
+
+    /**
+     * @returns {string}
+     */
+    get SEND_EXPLANATION_TO_AUTHOR() {
+        return this.env._t("Send explanation to author");
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickCancel() {
+        this._dialogRef.comp._close();
+    }
+
+    /**
+     * @private
+     */
+    _onClickReject() {
+        this._dialogRef.comp._close();
+        const kwargs = {
+            title: this.state.title,
+            comment: this.state.comment,
+        };
+        this.env.models['mail.message'].moderate(this.messages, 'reject', kwargs);
+    }
+
+}
+
+Object.assign(ModerationRejectDialog, {
+    components,
+    props: {
+        messageLocalIds: {
+            type: Array,
+            element: String,
+        },
+    },
+    template: 'mail.ModerationRejectDialog',
+});
+
+return ModerationRejectDialog;
+
+});
diff --git a/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml
new file mode 100644
index 00000000..182ffc7e
--- /dev/null
+++ b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="mail.ModerationRejectDialog" owl="1">
+        <Dialog contentClass="'o_ModerationRejectDialog'" title="SEND_EXPLANATION_TO_AUTHOR" size="'medium'" t-ref="dialog">
+            <input class="o_ModerationRejectDialog_title form-control" type="text" placeholder="Subject" autofocus="autofocus" t-model="state.title"/>
+            <textarea class="o_ModerationRejectDialog_comment form-control mt16" placeholder="Mail Body" t-model="state.comment"/>
+            <t t-set-slot="buttons">
+                <button class="o-reject btn btn-primary" t-on-click="_onClickReject">Reject</button>
+                <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+</templates>
diff --git a/addons/mail/static/src/components/notification_alert/notification_alert.js b/addons/mail/static/src/components/notification_alert/notification_alert.js
new file mode 100644
index 00000000..7ef9e3b1
--- /dev/null
+++ b/addons/mail/static/src/components/notification_alert/notification_alert.js
@@ -0,0 +1,54 @@
+odoo.define('mail/static/src/components/notification_alert/notification_alert.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class NotificationAlert extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const isMessagingInitialized = this.env.isMessagingInitialized();
+            return {
+                isMessagingInitialized,
+                isNotificationBlocked: this.isNotificationBlocked,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {boolean}
+     */
+    get isNotificationBlocked() {
+        if (!this.env.isMessagingInitialized()) {
+            return false;
+        }
+        const windowNotification = this.env.browser.Notification;
+        return (
+            windowNotification &&
+            windowNotification.permission !== "granted" &&
+            !this.env.messaging.isNotificationPermissionDefault()
+        );
+    }
+
+}
+
+Object.assign(NotificationAlert, {
+    props: {},
+    template: 'mail.NotificationAlert',
+});
+
+return NotificationAlert;
+
+});
diff --git a/addons/mail/static/src/components/notification_alert/notification_alert.xml b/addons/mail/static/src/components/notification_alert/notification_alert.xml
new file mode 100644
index 00000000..3d80da13
--- /dev/null
+++ b/addons/mail/static/src/components/notification_alert/notification_alert.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationAlert" owl="1">
+        <div class="o_NotificationAlert">
+            <t t-if="env.isMessagingInitialized()">
+                <center t-if="isNotificationBlocked" class="o_notification_alert alert alert-primary">
+                    Odoo Push notifications have been blocked. Go to your browser settings to allow them.
+                </center>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/notification_group/notification_group.js b/addons/mail/static/src/components/notification_group/notification_group.js
new file mode 100644
index 00000000..17936986
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.js
@@ -0,0 +1,93 @@
+odoo.define('mail/static/src/components/notification_group/notification_group.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class NotificationGroup extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const group = this.env.models['mail.notification_group'].get(props.notificationGroupLocalId);
+            return {
+                group: group ? group.__state : undefined,
+            };
+        });
+        /**
+         * Reference of the "mark as read" button. Useful to disable the
+         * top-level click handler when clicking on this specific button.
+         */
+        this._markAsReadRef = useRef('markAsRead');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.notification_group}
+     */
+    get group() {
+        return this.env.models['mail.notification_group'].get(this.props.notificationGroupLocalId);
+    }
+
+    /**
+     * @returns {string|undefined}
+     */
+    image() {
+        if (this.group.notification_type === 'email') {
+            return '/mail/static/src/img/smiley/mailfailure.jpg';
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const markAsRead = this._markAsReadRef.el;
+        if (markAsRead && markAsRead.contains(ev.target)) {
+            // handled in `_onClickMarkAsRead`
+            return;
+        }
+        this.group.openDocuments();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickMarkAsRead(ev) {
+        this.group.openCancelAction();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+}
+
+Object.assign(NotificationGroup, {
+    props: {
+        notificationGroupLocalId: String,
+    },
+    template: 'mail.NotificationGroup',
+});
+
+return NotificationGroup;
+
+});
diff --git a/addons/mail/static/src/components/notification_group/notification_group.scss b/addons/mail/static/src/components/notification_group/notification_group.scss
new file mode 100644
index 00000000..88a67002
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.scss
@@ -0,0 +1,93 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_NotificationGroup {
+    @include o-mail-notification-list-item-layout();
+
+    &:hover .o_NotificationGroup_markAsRead {
+        // TODO also mixin this
+        // task-2258605
+        opacity: 1;
+    }
+}
+
+.o_NotificationGroup_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_NotificationGroup_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_NotificationGroup_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_NotificationGroup_counter {
+    @include o-mail-notification-list-item-counter-layout();
+}
+
+.o_NotificationGroup_date {
+    @include o-mail-notification-list-item-date-layout();
+}
+
+.o_NotificationGroup_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_NotificationGroup_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_NotificationGroup_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_NotificationGroup_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_NotificationGroup_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-layout();
+}
+
+.o_NotificationGroup_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_NotificationGroup_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_NotificationGroup {
+    @include o-mail-notification-list-item-style();
+}
+
+.o_NotificationGroup_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_NotificationGroup_counter {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_NotificationGroup_date {
+    @include o-mail-notification-list-item-date-style();
+}
+
+.o_NotificationGroup_image {
+    @include o-mail-notification-list-item-image-style();
+}
+
+.o_NotificationGroup_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-style();
+}
+
+.o_NotificationGroup_name {
+    @include o-mail-notification-list-item-bold-style();
+}
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
new file mode 100644
index 00000000..c2f3dceb
--- /dev/null
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationGroup" owl="1">
+        <div class="o_NotificationGroup" t-on-click="_onClick">
+            <t t-if="group">
+                <div class="o_NotificationGroup_sidebar">
+                    <div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem">
+                        <img class="o_NotificationGroup_image rounded-circle" t-att-src="image()" alt="Message delivery failure image"/>
+                    </div>
+                </div>
+                <div class="o_NotificationGroup_content">
+                    <div class="o_NotificationGroup_header">
+                        <span class="o_NotificationGroup_name">
+                            <t t-esc="group.res_model_name"/>
+                        </span>
+                        <span class="o_NotificationGroup_counter">
+                            (<t t-esc="group.notifications.length"/>)
+                        </span>
+                        <span class="o-autogrow"/>
+                        <span class="o_NotificationGroup_date">
+                            <t t-esc="group.date.fromNow()"/>
+                        </span>
+                    </div>
+                    <div class="o_NotificationGroup_core">
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText">
+                            <t t-if="group.notification_type === 'email'">
+                                An error occurred when sending an email.
+                            </t>
+                        </span>
+                        <span class="o-autogrow"/>
+                        <span class="o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check" title="Discard message delivery failures" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/notification_list/notification_list.js b/addons/mail/static/src/components/notification_list/notification_list.js
new file mode 100644
index 00000000..33737ba4
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list.js
@@ -0,0 +1,226 @@
+odoo.define('mail/static/src/components/notification_list/notification_list.js', function (require) {
+'use strict';
+
+const components = {
+    NotificationGroup: require('mail/static/src/components/notification_group/notification_group.js'),
+    NotificationRequest: require('mail/static/src/components/notification_request/notification_request.js'),
+    ThreadNeedactionPreview: require('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js'),
+    ThreadPreview: require('mail/static/src/components/thread_preview/thread_preview.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class NotificationList extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        this.storeProps = useStore((...args) => this._useStoreSelector(...args), {
+            compareDepth: {
+                // list + notification object created in useStore
+                notifications: 2,
+            },
+        });
+    }
+
+    mounted() {
+        this._loadPreviews();
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {Object[]}
+     */
+    get notifications() {
+        const { notifications } = this.storeProps;
+        return notifications;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Load previews of given thread. Basically consists of fetching all missing
+     * last messages of each thread.
+     *
+     * @private
+     */
+    async _loadPreviews() {
+        const threads = this.notifications
+            .filter(notification => notification.thread && notification.thread.exists())
+            .map(notification => notification.thread);
+        this.env.models['mail.thread'].loadPreviews(threads);
+    }
+
+    /**
+     * @private
+     * @param {Object} props
+     */
+    _useStoreSelector(props) {
+        const threads = this._useStoreSelectorThreads(props);
+        let threadNeedactionNotifications = [];
+        if (props.filter === 'all') {
+            // threads with needactions
+            threadNeedactionNotifications = this.env.models['mail.thread']
+                .all(t => t.model !== 'mail.box' && t.needactionMessagesAsOriginThread.length > 0)
+                .sort((t1, t2) => {
+                    if (t1.needactionMessagesAsOriginThread.length > 0 && t2.needactionMessagesAsOriginThread.length === 0) {
+                        return -1;
+                    }
+                    if (t1.needactionMessagesAsOriginThread.length === 0 && t2.needactionMessagesAsOriginThread.length > 0) {
+                        return 1;
+                    }
+                    if (t1.lastNeedactionMessageAsOriginThread && t2.lastNeedactionMessageAsOriginThread) {
+                        return t1.lastNeedactionMessageAsOriginThread.date.isBefore(t2.lastNeedactionMessageAsOriginThread.date) ? 1 : -1;
+                    }
+                    if (t1.lastNeedactionMessageAsOriginThread) {
+                        return -1;
+                    }
+                    if (t2.lastNeedactionMessageAsOriginThread) {
+                        return 1;
+                    }
+                    return t1.id < t2.id ? -1 : 1;
+                })
+                .map(thread => {
+                    return {
+                        thread,
+                        type: 'thread_needaction',
+                        uniqueId: thread.localId + '_needaction',
+                    };
+                });
+        }
+        // thread notifications
+        const threadNotifications = threads
+            .sort((t1, t2) => {
+                if (t1.localMessageUnreadCounter > 0 && t2.localMessageUnreadCounter === 0) {
+                    return -1;
+                }
+                if (t1.localMessageUnreadCounter === 0 && t2.localMessageUnreadCounter > 0) {
+                    return 1;
+                }
+                if (t1.lastMessage && t2.lastMessage) {
+                    return t1.lastMessage.date.isBefore(t2.lastMessage.date) ? 1 : -1;
+                }
+                if (t1.lastMessage) {
+                    return -1;
+                }
+                if (t2.lastMessage) {
+                    return 1;
+                }
+                return t1.id < t2.id ? -1 : 1;
+            })
+            .map(thread => {
+                return {
+                    thread,
+                    type: 'thread',
+                    uniqueId: thread.localId,
+                };
+            });
+        let notifications = threadNeedactionNotifications.concat(threadNotifications);
+        if (props.filter === 'all') {
+            const notificationGroups = this.env.messaging.notificationGroupManager.groups;
+            notifications = Object.values(notificationGroups)
+                .sort((group1, group2) =>
+                    group1.date.isAfter(group2.date) ? -1 : 1
+                ).map(notificationGroup => {
+                    return {
+                        notificationGroup,
+                        uniqueId: notificationGroup.localId,
+                    };
+                }).concat(notifications);
+        }
+        // native notification request
+        if (props.filter === 'all' && this.env.messaging.isNotificationPermissionDefault()) {
+            notifications.unshift({
+                type: 'odoobotRequest',
+                uniqueId: 'odoobotRequest',
+            });
+        }
+        return {
+            isDeviceMobile: this.env.messaging.device.isMobile,
+            notifications,
+        };
+    }
+
+    /**
+     * @private
+     * @param {Object} props
+     * @throws {Error} in case `props.filter` is not supported
+     * @returns {mail.thread[]}
+     */
+    _useStoreSelectorThreads(props) {
+        if (props.filter === 'mailbox') {
+            return this.env.models['mail.thread']
+                .all(thread => thread.isPinned && thread.model === 'mail.box')
+                .sort((mailbox1, mailbox2) => {
+                    if (mailbox1 === this.env.messaging.inbox) {
+                        return -1;
+                    }
+                    if (mailbox2 === this.env.messaging.inbox) {
+                        return 1;
+                    }
+                    if (mailbox1 === this.env.messaging.starred) {
+                        return -1;
+                    }
+                    if (mailbox2 === this.env.messaging.starred) {
+                        return 1;
+                    }
+                    const mailbox1Name = mailbox1.displayName;
+                    const mailbox2Name = mailbox2.displayName;
+                    mailbox1Name < mailbox2Name ? -1 : 1;
+                });
+        } else if (props.filter === 'channel') {
+            return this.env.models['mail.thread']
+                .all(thread =>
+                    thread.channel_type === 'channel' &&
+                    thread.isPinned &&
+                    thread.model === 'mail.channel'
+                )
+                .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1);
+        } else if (props.filter === 'chat') {
+            return this.env.models['mail.thread']
+                .all(thread =>
+                    thread.isChatChannel &&
+                    thread.isPinned &&
+                    thread.model === 'mail.channel'
+                )
+                .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1);
+        } else if (props.filter === 'all') {
+            // "All" filter is for channels and chats
+            return this.env.models['mail.thread']
+                .all(thread => thread.isPinned && thread.model === 'mail.channel')
+                .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1);
+        } else {
+            throw new Error(`Unsupported filter ${props.filter}`);
+        }
+    }
+
+}
+
+Object.assign(NotificationList, {
+    _allowedFilters: ['all', 'mailbox', 'channel', 'chat'],
+    components,
+    defaultProps: {
+        filter: 'all',
+    },
+    props: {
+        filter: {
+            type: String,
+            validate: prop => NotificationList._allowedFilters.includes(prop),
+        },
+    },
+    template: 'mail.NotificationList',
+});
+
+return NotificationList;
+
+});
diff --git a/addons/mail/static/src/components/notification_list/notification_list.scss b/addons/mail/static/src/components/notification_list/notification_list.scss
new file mode 100644
index 00000000..18e31149
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list.scss
@@ -0,0 +1,37 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+ .o_NotificationList {
+    display: flex;
+    flex-flow: column;
+    overflow: auto;
+
+    &.o-empty {
+        justify-content: center;
+    }
+}
+
+.o_NotificationList_noConversation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: map-get($spacers, 4) map-get($spacers, 2);
+}
+
+.o_NotificationList_separator {
+    flex: 0 0 auto;
+    width: map-get($sizes, 100);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_NotificationList_separator {
+    border-bottom: $border-width solid $border-color;
+}
+
+.o_NotificationList_noConversation {
+    color: $text-muted;
+}
diff --git a/addons/mail/static/src/components/notification_list/notification_list.xml b/addons/mail/static/src/components/notification_list/notification_list.xml
new file mode 100644
index 00000000..e3bfbf38
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list.xml
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationList" owl="1">
+        <div class="o_NotificationList" t-att-class="{ 'o-empty': notifications.length === 0 }">
+            <t t-if="notifications.length === 0">
+                <div class="o_NotificationList_noConversation">
+                    No conversation yet...
+                </div>
+            </t>
+            <t t-else="">
+                <t t-foreach="notifications" t-as="notification" t-key="notification.uniqueId">
+                    <t t-if="notification.type === 'thread' and notification.thread">
+                        <ThreadPreview
+                            class="o_NotificationList_preview"
+                            t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                            threadLocalId="notification.thread.localId"
+                        />
+                    </t>
+                    <t t-if="notification.type === 'thread_needaction' and notification.thread">
+                        <ThreadNeedactionPreview
+                            class="o_NotificationList_preview"
+                            t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                            threadLocalId="notification.thread.localId"
+                        />
+                    </t>
+                    <t t-if="notification.notificationGroup">
+                        <NotificationGroup
+                            class="o_NotificationList_group"
+                            notificationGroupLocalId="notification.notificationGroup.localId"
+                        />
+                    </t>
+                    <t t-if="notification.type === 'odoobotRequest'">
+                        <NotificationRequest
+                            class="o_NotificationList_notificationRequest"
+                            t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                        />
+                    </t>
+                    <t t-if="!notification_last">
+                        <div class="o_NotificationList_separator"/>
+                    </t>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss
new file mode 100644
index 00000000..af98a9fb
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss
@@ -0,0 +1,179 @@
+// -----------------------------------------------------------------------------
+// Layout
+// -----------------------------------------------------------------------------
+
+@mixin o-mail-notification-list-item-layout {
+    display: flex;
+    flex: 0 0 auto; // Without this, Safari shrinks parent regardless of child content
+    align-items: center;
+    padding: map-get($spacers, 1);
+
+    &.o-mobile {
+        padding: map-get($spacers, 2);
+    }
+}
+
+@mixin o-mail-notification-list-item-content-layout {
+    display: flex;
+    flex-flow: column;
+    flex: 1 1 auto;
+    align-self: flex-start;
+    min-width: 0; // needed for flex to work correctly
+    margin: map-get($spacers, 2);
+}
+
+@mixin o-mail-notification-list-item-core-layout {
+    display: flex;
+}
+
+@mixin o-mail-notification-list-item-core-item-layout {
+    margin: map-get($spacers, 0) map-get($spacers, 2);
+
+    &:first-child {
+        margin-inline-start: map-get($spacers, 0);
+    }
+
+    &:last-child {
+        margin-inline-end: map-get($spacers, 0);
+    }
+}
+
+@mixin o-mail-notification-list-item-counter-layout() {
+    margin: map-get($spacers, 0) map-get($spacers, 2);
+}
+
+@mixin o-mail-notification-list-item-date-layout() {
+    flex: 0 0 auto;
+}
+
+@mixin o-mail-notification-list-item-header-layout {
+    display: flex;
+    margin-bottom: map-get($spacers, 1);
+}
+
+@mixin o-mail-notification-list-item-image-layout {
+    width: map-get($sizes, 100);
+    height: map-get($sizes, 100);
+}
+
+@mixin o-mail-notification-list-item-image-container-layout {
+    position: relative;
+    width: 40px;
+    height: 40px;
+}
+
+@mixin o-mail-notification-list-item-inline-text-layout {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.o-empty::before {
+        content: '\00a0'; // keep line-height as if it had content
+    }
+}
+
+@mixin o-mail-notification-list-item-mark-as-read-layout() {
+    display: flex;
+    flex: 0 0 auto;
+}
+
+@mixin o-mail-notification-list-item-name-layout {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.o-mobile {
+        font-size: 1.1em;
+    }
+}
+
+@mixin o-mail-notification-list-item-partner-im-status-icon-layout {
+    @include o-position-absolute($bottom: 0, $right: 0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin o-mail-notification-list-item-sidebar-layout {
+    margin: map-get($spacers, 1);
+}
+
+// -----------------------------------------------------------------------------
+// Style
+// -----------------------------------------------------------------------------
+
+$o-mail-notification-list-item-background-color: $white !default;
+$o-mail-notification-list-item-hover-background-color:
+    darken($o-mail-notification-list-item-background-color, 7%) !default;
+
+$o-mail-notification-list-item-muted-background-color: gray('100') !default;
+$o-mail-notification-list-item-muted-hover-background-color:
+    darken($o-mail-notification-list-item-muted-background-color, 7%) !default;
+
+@mixin o-mail-notification-list-item-style {
+    cursor: pointer;
+    user-select: none;
+    background-color: $o-mail-notification-list-item-background-color;
+
+    &:hover {
+        background-color: $o-mail-notification-list-item-hover-background-color;
+    }
+
+    &.o-muted {
+        background-color: $o-mail-notification-list-item-muted-background-color;
+
+        &:hover {
+            background-color: $o-mail-notification-list-item-muted-hover-background-color;
+        }
+    }
+}
+
+@mixin o-mail-notification-list-item-bold-style {
+    font-weight: bold;
+
+    &.o-muted {
+        font-weight: initial;
+    }
+}
+
+@mixin o-mail-notification-list-item-core-style {
+    color: gray('500');
+}
+
+@mixin o-mail-notification-list-item-date-style() {
+    @include o-mail-notification-list-item-bold-style();
+    font-size: x-small;
+    color: $o-brand-primary;
+}
+
+@mixin o-mail-notification-list-item-image-style {
+    object-fit: cover;
+}
+
+@mixin o-mail-notification-list-item-mark-as-read-style() {
+    opacity: 0;
+
+    &:hover {
+        color: gray('600');
+    }
+}
+
+@mixin o-mail-notification-list-item-hover-partner-im-status-icon-style {
+    color: $o-mail-notification-list-item-hover-background-color;
+}
+
+@mixin o-mail-notification-list-item-muted-hover-partner-im-status-icon-style {
+    color: $o-mail-notification-list-item-muted-hover-background-color;
+}
+
+@mixin o-mail-notification-list-item-partner-im-status-icon-style {
+    color: $o-mail-notification-list-item-background-color;
+
+    &:not(.o-mobile) {
+        font-size: x-small;
+    }
+
+    &.o-muted {
+        color: $o-mail-notification-list-item-muted-background-color;
+    }
+}
diff --git a/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js b/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js
new file mode 100644
index 00000000..223ce363
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js
@@ -0,0 +1,546 @@
+odoo.define('mail/static/src/components/notification_list/notification_list_notification_group_tests.js', function (require) {
+'use strict';
+
+const components = {
+    NotificationList: require('mail/static/src/components/notification_list/notification_list.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('notification_list', {}, function () {
+QUnit.module('notification_list_notification_group_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        /**
+         * @param {Object} param0
+         * @param {string} [param0.filter='all']
+         */
+        this.createNotificationListComponent = async ({ filter = 'all' } = {}) => {
+            await createRootComponent(this, components.NotificationList, {
+                props: { filter },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('notification group basic layout', async function (assert) {
+    assert.expect(10);
+
+    // message that is expected to have a failure
+    this.data['mail.message'].records.push({
+        id: 11, // random unique id, will be used to link failure to message
+        message_type: 'email', // message must be email (goal of the test)
+        model: 'mail.channel', // expected value to link message to channel
+        res_id: 31, // id of a random channel
+        res_model_name: "Channel", // random res model name, will be asserted in the test
+    });
+    // failure that is expected to be used in the test
+    this.data['mail.notification'].records.push({
+        mail_message_id: 11, // id of the related message
+        notification_status: 'exception', // necessary value to have a failure
+        notification_type: 'email', // expected failure type for email message
+    });
+    await this.start();
+    await this.createNotificationListComponent();
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup',
+        "should have 1 notification group"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_name',
+        "should have 1 group name"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_name').textContent,
+        "Channel",
+        "should have model name as group name"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have only 1 notification in the group"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_date',
+        "should have 1 group date"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_date').textContent,
+        "a few seconds ago",
+        "should have the group date corresponding to now"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_inlineText',
+        "should have 1 group text"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_inlineText').textContent.trim(),
+        "An error occurred when sending an email.",
+        "should have the group text corresponding to email"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_markAsRead',
+        "should have 1 mark as read button"
+    );
+});
+
+QUnit.test('mark as read', async function (assert) {
+    assert.expect(6);
+
+    // message that is expected to have a failure
+    this.data['mail.message'].records.push({
+        id: 11, // random unique id, will be used to link failure to message
+        message_type: 'email', // message must be email (goal of the test)
+        model: 'mail.channel', // expected value to link message to channel
+        res_id: 31, // id of a random channel
+        res_model_name: "Channel", // random res model name, will be asserted in the test
+    });
+    // failure that is expected to be used in the test
+    this.data['mail.notification'].records.push({
+        mail_message_id: 11, // id of the related message
+        notification_status: 'exception', // necessary value to have a failure
+        notification_type: 'email', // expected failure type for email message
+    });
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action,
+            'mail.mail_resend_cancel_action',
+            "action should be the one to cancel email"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.default_model,
+            'mail.channel',
+            "action should have the group model as default_model"
+        );
+        assert.strictEqual(
+            payload.options.additional_context.unread_counter,
+            1,
+            "action should have the group notification length as unread_counter"
+        );
+    });
+    await this.start({ env: { bus } });
+    await this.createNotificationListComponent();
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_markAsRead',
+        "should have 1 mark as read button"
+    );
+
+    document.querySelector('.o_NotificationGroup_markAsRead').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the cancel email dialog"
+    );
+});
+
+QUnit.test('grouped notifications by document', async function (assert) {
+    // If some failures linked to a document refers to a same document, a single
+    // notification should group all those failures.
+    assert.expect(5);
+
+    this.data['mail.message'].records.push(
+        // first message that is expected to have a failure
+        {
+            id: 11, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // same model as second message (and not `mail.channel`)
+            res_id: 31, // same res_id as second message
+            res_model_name: "Partner", // random related model name
+        },
+        // second message that is expected to have a failure
+        {
+            id: 12, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // same model as first message (and not `mail.channel`)
+            res_id: 31, // same res_id as first message
+            res_model_name: "Partner", // same related model name for consistency
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // first failure that is expected to be used in the test
+        {
+            mail_message_id: 11, // id of the related first message
+            notification_status: 'exception', // one possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        },
+        // second failure that is expected to be used in the test
+        {
+            mail_message_id: 12, // id of the related second message
+            notification_status: 'bounce', // other possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        }
+    );
+    await this.start({ hasChatWindow: true });
+    await this.createNotificationListComponent();
+
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup',
+        "should have 1 notification group"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(2)",
+        "should have 2 notifications in the group"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should have no chat window initially"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_NotificationGroup').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the thread in a chat window after clicking on it"
+    );
+});
+
+QUnit.test('grouped notifications by document model', async function (assert) {
+    // If all failures linked to a document model refers to different documents,
+    // a single notification should group all failures that are linked to this
+    // document model.
+    assert.expect(12);
+
+    this.data['mail.message'].records.push(
+        // first message that is expected to have a failure
+        {
+            id: 11, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // same model as second message (and not `mail.channel`)
+            res_id: 31, // different res_id from second message
+            res_model_name: "Partner", // random related model name
+        },
+        // second message that is expected to have a failure
+        {
+            id: 12, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // same model as first message (and not `mail.channel`)
+            res_id: 32, // different res_id from first message
+            res_model_name: "Partner", // same related model name for consistency
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // first failure that is expected to be used in the test
+        {
+            mail_message_id: 11, // id of the related first message
+            notification_status: 'exception', // one possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        },
+        // second failure that is expected to be used in the test
+        {
+            mail_message_id: 12, // id of the related second message
+            notification_status: 'bounce', // other possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        }
+    );
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.name,
+            "Mail Failures",
+            "action should have 'Mail Failures' as name",
+        );
+        assert.strictEqual(
+            payload.action.type,
+            'ir.actions.act_window',
+            "action should have the type act_window"
+        );
+        assert.strictEqual(
+            payload.action.view_mode,
+            'kanban,list,form',
+            "action should have 'kanban,list,form' as view_mode"
+        );
+        assert.strictEqual(
+            JSON.stringify(payload.action.views),
+            JSON.stringify([[false, 'kanban'], [false, 'list'], [false, 'form']]),
+            "action should have correct views"
+        );
+        assert.strictEqual(
+            payload.action.target,
+            'current',
+            "action should have 'current' as target"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'res.partner',
+            "action should have the group model as res_model"
+        );
+        assert.strictEqual(
+            JSON.stringify(payload.action.domain),
+            JSON.stringify([['message_has_error', '=', true]]),
+            "action should have 'message_has_error' as domain"
+        );
+    });
+
+    await this.start({ env: { bus } });
+    await this.createNotificationListComponent();
+
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup',
+        "should have 1 notification group"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(2)",
+        "should have 2 notifications in the group"
+    );
+
+    document.querySelector('.o_NotificationGroup').click();
+    assert.verifySteps(
+        ['do_action'],
+        "should do an action to display the related records"
+    );
+});
+
+QUnit.test('different mail.channel are not grouped', async function (assert) {
+    // `mail.channel` is a special case where notifications are not grouped when
+    // they are linked to different channels, even though the model is the same.
+    assert.expect(6);
+
+    this.data['mail.channel'].records.push({ id: 31 }, { id: 32 });
+    this.data['mail.message'].records.push(
+        // first message that is expected to have a failure
+        {
+            id: 11, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'mail.channel', // testing a channel is the goal of the test
+            res_id: 31, // different res_id from second message
+            res_model_name: "Channel", // random related model name
+        },
+        // second message that is expected to have a failure
+        {
+            id: 12, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'mail.channel', // testing a channel is the goal of the test
+            res_id: 32, // different res_id from first message
+            res_model_name: "Channel", // same related model name for consistency
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // first failure that is expected to be used in the test
+        {
+            mail_message_id: 11, // id of the related first message
+            notification_status: 'exception', // one possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        },
+        // second failure that is expected to be used in the test
+        {
+            mail_message_id: 12, // id of the related second message
+            notification_status: 'bounce', // other possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        }
+    );
+    await this.start({
+        hasChatWindow: true, // needed to assert thread.open
+    });
+    await this.createNotificationListComponent();
+    assert.containsN(
+        document.body,
+        '.o_NotificationGroup',
+        2,
+        "should have 2 notifications group"
+    );
+    const groups = document.querySelectorAll('.o_NotificationGroup');
+    assert.containsOnce(
+        groups[0],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in first group"
+    );
+    assert.containsOnce(
+        groups[1],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in second group"
+    );
+
+    await afterNextRender(() => groups[0].click());
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the channel related to the first group in a chat window"
+    );
+});
+
+QUnit.test('multiple grouped notifications by document model, sorted by date desc', async function (assert) {
+    assert.expect(9);
+
+    this.data['mail.message'].records.push(
+        // first message that is expected to have a failure
+        {
+            date: moment.utc().format("YYYY-MM-DD HH:mm:ss"), // random date
+            id: 11, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // different model from second message
+            res_id: 31, // random unique id, useful to link failure to message
+            res_model_name: "Partner", // random related model name
+        },
+        // second message that is expected to have a failure
+        {
+            // random date, later than first message
+            date: moment.utc().add(1, 'days').format("YYYY-MM-DD HH:mm:ss"),
+            id: 12, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.company', // different model from first message
+            res_id: 32, // random unique id, useful to link failure to message
+            res_model_name: "Company", // random related model name
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // first failure that is expected to be used in the test
+        {
+            mail_message_id: 11, // id of the related first message
+            notification_status: 'exception', // one possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        },
+        // second failure that is expected to be used in the test
+        {
+            mail_message_id: 12, // id of the related second message
+            notification_status: 'bounce', // other possible value to have a failure
+            notification_type: 'email', // expected failure type for email message
+        }
+    );
+    await this.start();
+    await this.createNotificationListComponent();
+    assert.containsN(
+        document.body,
+        '.o_NotificationGroup',
+        2,
+        "should have 2 notifications group"
+    );
+    const groups = document.querySelectorAll('.o_NotificationGroup');
+    assert.containsOnce(
+        groups[0],
+        '.o_NotificationGroup_name',
+        "should have 1 group name in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_name').textContent,
+        "Company",
+        "should have first model name as group name"
+    );
+    assert.containsOnce(
+        groups[0],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in first group"
+    );
+    assert.strictEqual(
+        groups[0].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in first group"
+    );
+    assert.containsOnce(
+        groups[1],
+        '.o_NotificationGroup_name',
+        "should have 1 group name in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_name').textContent,
+        "Partner",
+        "should have second model name as group name"
+    );
+    assert.containsOnce(
+        groups[1],
+        '.o_NotificationGroup_counter',
+        "should have 1 group counter in second group"
+    );
+    assert.strictEqual(
+        groups[1].querySelector('.o_NotificationGroup_counter').textContent.trim(),
+        "(1)",
+        "should have 1 notification in second group"
+    );
+});
+
+QUnit.test('non-failure notifications are ignored', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.message'].records.push(
+        // message that is expected to have a notification
+        {
+            id: 11, // random unique id, will be used to link failure to message
+            message_type: 'email', // message must be email (goal of the test)
+            model: 'res.partner', // random model
+            res_id: 31, // random unique id, useful to link failure to message
+        }
+    );
+    this.data['mail.notification'].records.push(
+        // notification that is expected to be used in the test
+        {
+            mail_message_id: 11, // id of the related first message
+            notification_status: 'ready', // non-failure status
+            notification_type: 'email', // expected notification type for email message
+        },
+    );
+    await this.start();
+    await this.createNotificationListComponent();
+    assert.containsNone(
+        document.body,
+        '.o_NotificationGroup',
+        "should have 0 notification group"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/notification_list/notification_list_tests.js b/addons/mail/static/src/components/notification_list/notification_list_tests.js
new file mode 100644
index 00000000..24df5b22
--- /dev/null
+++ b/addons/mail/static/src/components/notification_list/notification_list_tests.js
@@ -0,0 +1,162 @@
+odoo.define('mail/static/src/components/notification_list/notification_list_tests.js', function (require) {
+'use strict';
+
+const components = {
+    NotificationList: require('mail/static/src/components/notification_list/notification_list.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('notification_list', {}, function () {
+QUnit.module('notification_list_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        /**
+         * @param {Object} param0
+         * @param {string} [param0.filter='all']
+         */
+        this.createNotificationListComponent = async ({ filter = 'all' }) => {
+            await createRootComponent(this, components.NotificationList, {
+                props: { filter },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('marked as read thread notifications are ordered by last message date', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push(
+        { id: 100, name: "Channel 2019" },
+        { id: 200, name: "Channel 2020" }
+    );
+    this.data['mail.message'].records.push(
+        {
+            channel_ids: [100],
+            date: "2019-01-01 00:00:00",
+            id: 42,
+            model: 'mail.channel',
+            res_id: 100,
+        },
+        {
+            channel_ids: [200],
+            date: "2020-01-01 00:00:00",
+            id: 43,
+            model: 'mail.channel',
+            res_id: 200,
+        }
+    );
+    await this.start();
+    await this.createNotificationListComponent({ filter: 'all' });
+    assert.containsN(
+        document.body,
+        '.o_ThreadPreview',
+        2,
+        "there should be two thread previews"
+    );
+    const threadPreviewElList = document.querySelectorAll('.o_ThreadPreview');
+    assert.strictEqual(
+        threadPreviewElList[0].querySelector(':scope .o_ThreadPreview_name').textContent,
+        'Channel 2020',
+        "First channel in the list should be the channel of 2020 (more recent last message)"
+    );
+    assert.strictEqual(
+        threadPreviewElList[1].querySelector(':scope .o_ThreadPreview_name').textContent,
+        'Channel 2019',
+        "Second channel in the list should be the channel of 2019 (least recent last message)"
+    );
+});
+
+QUnit.test('thread notifications are re-ordered on receiving a new message', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records.push(
+        { id: 100, name: "Channel 2019" },
+        { id: 200, name: "Channel 2020" }
+    );
+    this.data['mail.message'].records.push(
+        {
+            channel_ids: [100],
+            date: "2019-01-01 00:00:00",
+            id: 42,
+            model: 'mail.channel',
+            res_id: 100,
+        },
+        {
+            channel_ids: [200],
+            date: "2020-01-01 00:00:00",
+            id: 43,
+            model: 'mail.channel',
+            res_id: 200,
+        }
+    );
+    await this.start();
+    await this.createNotificationListComponent({ filter: 'all' });
+    assert.containsN(
+        document.body,
+        '.o_ThreadPreview',
+        2,
+        "there should be two thread previews"
+    );
+
+    await afterNextRender(() => {
+        const messageData = {
+            author_id: [7, "Demo User"],
+            body: "<p>New message !</p>",
+            channel_ids: [100],
+            date: "2020-03-23 10:00:00",
+            id: 44,
+            message_type: 'comment',
+            model: 'mail.channel',
+            record_name: 'Channel 2019',
+            res_id: 100,
+        };
+        this.widget.call('bus_service', 'trigger', 'notification', [
+            [['my-db', 'mail.channel', 100], messageData]
+        ]);
+    });
+    assert.containsN(
+        document.body,
+        '.o_ThreadPreview',
+        2,
+        "there should still be two thread previews"
+    );
+    const threadPreviewElList = document.querySelectorAll('.o_ThreadPreview');
+    assert.strictEqual(
+        threadPreviewElList[0].querySelector(':scope .o_ThreadPreview_name').textContent,
+        'Channel 2019',
+        "First channel in the list should now be 'Channel 2019'"
+    );
+    assert.strictEqual(
+        threadPreviewElList[1].querySelector(':scope .o_ThreadPreview_name').textContent,
+        'Channel 2020',
+        "Second channel in the list should now be 'Channel 2020'"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.js b/addons/mail/static/src/components/notification_popover/notification_popover.js
new file mode 100644
index 00000000..6be3647e
--- /dev/null
+++ b/addons/mail/static/src/components/notification_popover/notification_popover.js
@@ -0,0 +1,95 @@
+odoo.define('mail/static/src/components/notification_popover/notification_popover.js', function (require) {
+'use strict';
+
+const { Component } = owl;
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+class NotificationPopover extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                notificationLocalIds: 1,
+            },
+        });
+        useStore(props => {
+            const notifications = props.notificationLocalIds.map(
+                notificationLocalId => this.env.models['mail.notification'].get(notificationLocalId)
+            );
+            return {
+                notifications: notifications.map(notification => notification ? notification.__state : undefined),
+            };
+        }, {
+            compareDepth: {
+                notifications: 1,
+            },
+        });
+    }
+
+    /**
+     * @returns {string}
+     */
+    get iconClass() {
+        switch (this.notification.notification_status) {
+            case 'sent':
+                return 'fa fa-check';
+            case 'bounce':
+                return 'fa fa-exclamation';
+            case 'exception':
+                return 'fa fa-exclamation';
+            case 'ready':
+                return 'fa fa-send-o';
+            case 'canceled':
+                return 'fa fa-trash-o';
+        }
+        return '';
+    }
+
+    /**
+     * @returns {string}
+     */
+    get iconTitle() {
+        switch (this.notification.notification_status) {
+            case 'sent':
+                return this.env._t("Sent");
+            case 'bounce':
+                return this.env._t("Bounced");
+            case 'exception':
+                return this.env._t("Error");
+            case 'ready':
+                return this.env._t("Ready");
+            case 'canceled':
+                return this.env._t("Canceled");
+        }
+        return '';
+    }
+
+    /**
+     * @returns {mail.notification[]}
+     */
+    get notifications() {
+        return this.props.notificationLocalIds.map(
+            notificationLocalId => this.env.models['mail.notification'].get(notificationLocalId)
+        );
+    }
+
+}
+
+Object.assign(NotificationPopover, {
+    props: {
+        notificationLocalIds: {
+            type: Array,
+            element: String,
+        },
+    },
+    template: 'mail.NotificationPopover',
+});
+
+return NotificationPopover;
+
+});
diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.scss b/addons/mail/static/src/components/notification_popover/notification_popover.scss
new file mode 100644
index 00000000..06b4201c
--- /dev/null
+++ b/addons/mail/static/src/components/notification_popover/notification_popover.scss
@@ -0,0 +1,7 @@
+// -----------------------------------------------------------------------------
+// Layout
+// -----------------------------------------------------------------------------
+
+.o_NotificationPopover_notificationIcon {
+    margin-inline-end: map-get($spacers, 2);
+}
diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.xml b/addons/mail/static/src/components/notification_popover/notification_popover.xml
new file mode 100644
index 00000000..cf5aa027
--- /dev/null
+++ b/addons/mail/static/src/components/notification_popover/notification_popover.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationPopover" owl="1">
+        <div class="o_NotificationPopover">
+            <t t-foreach="notifications" t-as="notification" t-key="notification.localId">
+                <div class="o_NotificationPopover_notification">
+                    <i class="o_NotificationPopover_notificationIcon" t-att-class="iconClass" t-att-title="iconTitle" role="img"/>
+                    <t t-if="notification.partner">
+                        <span class="o_NotificationPopover_notificationPartnerName" t-esc="notification.partner.nameOrDisplayName"/>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/notification_request/notification_request.js b/addons/mail/static/src/components/notification_request/notification_request.js
new file mode 100644
index 00000000..54dcbbd4
--- /dev/null
+++ b/addons/mail/static/src/components/notification_request/notification_request.js
@@ -0,0 +1,94 @@
+odoo.define('mail/static/src/components/notification_request/notification_request.js', function (require) {
+'use strict';
+
+const components = {
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class NotificationRequest extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            return {
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                partnerRoot: this.env.messaging.partnerRoot
+                    ? this.env.messaging.partnerRoot.__state
+                    : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {string}
+     */
+    getHeaderText() {
+        return _.str.sprintf(
+            this.env._t("%s has a request"),
+            this.env.messaging.partnerRoot.nameOrDisplayName
+        );
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Handle the response of the user when prompted whether push notifications
+     * are granted or denied.
+     *
+     * @private
+     * @param {string} value
+     */
+    _handleResponseNotificationPermission(value) {
+        // manually force recompute because the permission is not in the store
+        this.env.messaging.messagingMenu.update();
+        if (value !== 'granted') {
+            this.env.services['bus_service'].sendNotification(
+                this.env._t("Permission denied"),
+                this.env._t("Odoo will not have the permission to send native notifications on this device.")
+            );
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClick() {
+        const windowNotification = this.env.browser.Notification;
+        const def = windowNotification && windowNotification.requestPermission();
+        if (def) {
+            def.then(this._handleResponseNotificationPermission.bind(this));
+        }
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+}
+
+Object.assign(NotificationRequest, {
+    components,
+    props: {},
+    template: 'mail.NotificationRequest',
+});
+
+return NotificationRequest;
+
+});
diff --git a/addons/mail/static/src/components/notification_request/notification_request.scss b/addons/mail/static/src/components/notification_request/notification_request.scss
new file mode 100644
index 00000000..e2fcb81d
--- /dev/null
+++ b/addons/mail/static/src/components/notification_request/notification_request.scss
@@ -0,0 +1,77 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_NotificationRequest {
+    @include o-mail-notification-list-item-layout();
+}
+
+.o_NotificationRequest_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_NotificationRequest_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_NotificationRequest_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_NotificationRequest_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_NotificationRequest_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_NotificationRequest_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_NotificationRequest_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_NotificationRequest_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_NotificationRequest_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-layout();
+}
+
+.o_NotificationRequest_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_NotificationRequest {
+    @include o-mail-notification-list-item-style();
+
+    &:hover {
+        .o_NotificationRequest_partnerImStatusIcon {
+            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
+        }
+    }
+}
+
+.o_NotificationRequest_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_NotificationRequest_image {
+    @include o-mail-notification-list-item-image-style();
+}
+
+.o_NotificationRequest_name {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_NotificationRequest_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-style();
+}
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
new file mode 100644
index 00000000..f59c671a
--- /dev/null
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.NotificationRequest" owl="1">
+        <div class="o_NotificationRequest" t-on-click="_onClick">
+            <div class="o_NotificationRequest_sidebar">
+                <div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem">
+                    <img class="o_NotificationRequest_image rounded-circle" src="/mail/static/src/img/odoobot.png" alt="Avatar of OdooBot"/>
+                    <PartnerImStatusIcon
+                        class="o_NotificationRequest_partnerImStatusIcon"
+                        t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"
+                        partnerLocalId="env.messaging.partnerRoot.localId"
+                    />
+                </div>
+            </div>
+            <div class="o_NotificationRequest_content">
+                <div class="o_NotificationRequest_header">
+                    <span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                        <t t-esc="getHeaderText()"/>
+                    </span>
+                </div>
+                <div class="o_NotificationRequest_core">
+                    <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText">
+                        Enable desktop notifications to chat.
+                    </span>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js
new file mode 100644
index 00000000..e4af9da6
--- /dev/null
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js
@@ -0,0 +1,74 @@
+odoo.define('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class PartnerImStatusIcon extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const partner = this.env.models['mail.partner'].get(props.partnerLocalId);
+            return {
+                partner,
+                partnerImStatus: partner && partner.im_status,
+                partnerRoot: this.env.messaging.partnerRoot,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.partner}
+     */
+    get partner() {
+        return this.env.models['mail.partner'].get(this.props.partnerLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        if (!this.props.hasOpenChat) {
+            return;
+        }
+        this.partner.openChat();
+    }
+
+}
+
+Object.assign(PartnerImStatusIcon, {
+    defaultProps: {
+        hasBackground: true,
+        hasOpenChat: false,
+    },
+    props: {
+        partnerLocalId: String,
+        hasBackground: Boolean,
+        /**
+         * Determines whether a click on `this` should open a chat with
+         * `this.partner`.
+         */
+        hasOpenChat: Boolean,
+    },
+    template: 'mail.PartnerImStatusIcon',
+});
+
+return PartnerImStatusIcon;
+
+});
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
new file mode 100644
index 00000000..608c281a
--- /dev/null
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss
@@ -0,0 +1,59 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_PartnerImStatusIcon {
+    display: flex;
+    flex-flow: column;
+
+    width: 1.2em;
+    height: 1.2em;
+    line-height: 1.3em;
+}
+
+.o_PartnerImStatusIcon_outerBackground {
+    transform: scale(1.5);
+}
+
+.o-background {
+    transform: scale(1);
+    margin-inline-end: map-get($spacers, 1);
+    margin-top: 2px;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_PartnerImStatusIcon {
+    &.o-has-open-chat {
+        cursor: pointer;
+    }
+}
+
+.o_PartnerImStatusIcon_innerBackground {
+    color: white;
+}
+
+.o_PartnerImStatusIcon_icon {
+
+    &.o-away {
+        color: theme-color('warning');
+    }
+
+    &.o-bot {
+        color: $o-enterprise-primary-color;
+    }
+
+    &.o-offline {
+        color: gray('700');
+    }
+
+    &.o-online {
+        color: $o-enterprise-primary-color;
+    }
+}
+
+
+
+
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
new file mode 100644
index 00000000..ca20a547
--- /dev/null
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.PartnerImStatusIcon" owl="1">
+        <span class="o_PartnerImStatusIcon fa-stack"
+            t-att-class="{
+                'o-away': partner and partner.im_status === 'away',
+                'o-background': !props.hasBackground,
+                'o-bot': partner and env.messaging.partnerRoot === partner,
+                'o-has-open-chat': props.hasOpenChat,
+                'o-offline': partner and partner.im_status === 'offline',
+                'o-online': partner and partner.im_status === 'online',
+            }"
+            t-on-click="_onClick"
+            t-att-data-partner-local-id="partner ? partner.localId : undefined"
+        >
+            <t t-if="partner" name="rootCondition">
+                <t t-if="props.hasBackground">
+                    <i class="o_PartnerImStatusIcon_outerBackground fa fa-circle fa-stack-1x"/>
+                    <i class="o_PartnerImStatusIcon_innerBackground fa fa-circle fa-stack-1x"/>
+                </t>
+                <t t-if="partner.im_status === 'online'">
+                    <i class="o_PartnerImStatusIcon_icon o-online fa fa-circle fa-stack-1x" title="Online" role="img" aria-label="User is online"/>
+                </t>
+                <t t-if="partner.im_status === 'away'">
+                    <i class="o_PartnerImStatusIcon_icon o-away fa fa-circle fa-stack-1x" title="Idle" role="img" aria-label="User is idle"/>
+                </t>
+                <t t-if="partner.im_status === 'offline'">
+                    <i class="o_PartnerImStatusIcon_icon o-offline fa fa-circle-o fa-stack-1x" title="Offline" role="img" aria-label="User is offline"/>
+                </t>
+                <t t-if="partner === env.messaging.partnerRoot">
+                    <i class="o_PartnerImStatusIcon_icon o-bot fa fa-heart fa-stack-1x" title="Bot" role="img" aria-label="User is a bot"/>
+                </t>
+            </t>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js
new file mode 100644
index 00000000..1a68a5e0
--- /dev/null
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js
@@ -0,0 +1,145 @@
+odoo.define('mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js', function (require) {
+'use strict';
+
+const components = {
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('partner_im_status_icon', {}, function () {
+QUnit.module('partner_im_status_icon_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createPartnerImStatusIcon = async partner => {
+            await createRootComponent(this, components.PartnerImStatusIcon, {
+                props: { partnerLocalId: partner.localId },
+                target: this.widget.el
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('initially online', async function (assert) {
+    assert.expect(3);
+
+    await this.start();
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        name: "Demo User",
+        im_status: 'online',
+    });
+    await this.createPartnerImStatusIcon(partner);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon`).length,
+        1,
+        "should have partner IM status icon"
+    );
+    assert.strictEqual(
+        document.querySelector(`.o_PartnerImStatusIcon`).dataset.partnerLocalId,
+        partner.localId,
+        "partner IM status icon should be linked to partner with ID 7"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length,
+        1,
+        "partner IM status icon should have online status rendering"
+    );
+});
+
+QUnit.test('initially offline', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        name: "Demo User",
+        im_status: 'offline',
+    });
+    await this.createPartnerImStatusIcon(partner);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-offline`).length,
+        1,
+        "partner IM status icon should have offline status rendering"
+    );
+});
+
+QUnit.test('initially away', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        name: "Demo User",
+        im_status: 'away',
+    });
+    await this.createPartnerImStatusIcon(partner);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-away`).length,
+        1,
+        "partner IM status icon should have away status rendering"
+    );
+});
+
+QUnit.test('change icon on change partner im_status', async function (assert) {
+    assert.expect(4);
+
+    await this.start();
+    const partner = this.env.models['mail.partner'].create({
+        id: 7,
+        name: "Demo User",
+        im_status: 'online',
+    });
+    await this.createPartnerImStatusIcon(partner);
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length,
+        1,
+        "partner IM status icon should have online status rendering"
+    );
+
+    await afterNextRender(() => partner.update({ im_status: 'offline' }));
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-offline`).length,
+        1,
+        "partner IM status icon should have offline status rendering"
+    );
+
+    await afterNextRender(() => partner.update({ im_status: 'away' }));
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-away`).length,
+        1,
+        "partner IM status icon should have away status rendering"
+    );
+
+    await afterNextRender(() => partner.update({ im_status: 'online' }));
+    assert.strictEqual(
+        document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length,
+        1,
+        "partner IM status icon should have online status rendering in the end"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.js b/addons/mail/static/src/components/thread_icon/thread_icon.js
new file mode 100644
index 00000000..71017ec0
--- /dev/null
+++ b/addons/mail/static/src/components/thread_icon/thread_icon.js
@@ -0,0 +1,64 @@
+odoo.define('mail/static/src/components/thread_icon/thread_icon.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadTypingIcon: require('mail/static/src/components/thread_typing_icon/thread_typing_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ThreadIcon extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            const correspondent = thread ? thread.correspondent : undefined;
+            return {
+                correspondent,
+                correspondentImStatus: correspondent && correspondent.im_status,
+                history: this.env.messaging.history,
+                inbox: this.env.messaging.inbox,
+                moderation: this.env.messaging.moderation,
+                partnerRoot: this.env.messaging.partnerRoot,
+                starred: this.env.messaging.starred,
+                thread,
+                threadChannelType: thread && thread.channel_type,
+                threadModel: thread && thread.model,
+                threadOrderedOtherTypingMembersLength: thread && thread.orderedOtherTypingMembers.length,
+                threadPublic: thread && thread.public,
+                threadTypingStatusText: thread && thread.typingStatusText,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+}
+
+Object.assign(ThreadIcon, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.ThreadIcon',
+});
+
+return ThreadIcon;
+
+});
diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.scss b/addons/mail/static/src/components/thread_icon/thread_icon.scss
new file mode 100644
index 00000000..3824ec44
--- /dev/null
+++ b/addons/mail/static/src/components/thread_icon/thread_icon.scss
@@ -0,0 +1,26 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadIcon {
+    display: flex;
+    width: 13px;
+    justify-content: center;
+    flex: 0 0 auto;
+}
+
+.o_ThreadIcon_typing {
+    flex: 1 1 auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ThreadIcon_away {
+    color: theme-color('warning');
+}
+
+.o_ThreadIcon_online {
+    color: $o-enterprise-primary-color;
+}
diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.xml b/addons/mail/static/src/components/thread_icon/thread_icon.xml
new file mode 100644
index 00000000..95c4694a
--- /dev/null
+++ b/addons/mail/static/src/components/thread_icon/thread_icon.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadIcon" owl="1">
+        <div class="o_ThreadIcon">
+            <t t-if="thread" name="rootCondition">
+                <t t-if="thread.channel_type === 'channel'">
+                    <t t-if="thread.public === 'private'">
+                        <!-- AKU TODO: channel of type 'groups' should maybe also have lock icon -->
+                        <div class="o_ThreadIcon_channelPrivate fa fa-lock" title="Private channel"/>
+                    </t>
+                    <t t-else="">
+                        <div class="o_ThreadIcon_channelPublic fa fa-hashtag" title="Public channel"/>
+                    </t>
+                </t>
+                <t t-elif="thread.channel_type === 'chat' and thread.correspondent">
+                    <t t-if="thread.orderedOtherTypingMembers.length > 0">
+                        <ThreadTypingIcon
+                            class="o_ThreadIcon_typing"
+                            animation="'pulse'"
+                            title="thread.typingStatusText"
+                        />
+                    </t>
+                    <t t-elif="thread.correspondent.im_status === 'online'">
+                        <div class="o_ThreadIcon_online fa fa-circle" title="Online"/>
+                    </t>
+                    <t t-elif="thread.correspondent.im_status === 'offline'">
+                        <div class="o_ThreadIcon_offline fa fa-circle-o" title="Offline"/>
+                    </t>
+                    <t t-elif="thread.correspondent.im_status === 'away'">
+                        <div class="o_ThreadIcon_away fa fa-circle" title="Away"/>
+                    </t>
+                    <t t-elif="thread.correspondent === env.messaging.partnerRoot">
+                        <div class="o_ThreadIcon_online fa fa-heart" title="Bot"/>
+                    </t>
+                    <t t-else="" name="noImStatusCondition">
+                        <div class="o_ThreadIcon_noImStatus fa fa-question-circle" title="No IM status available"/>
+                    </t>
+                </t>
+                <t t-elif="thread.model === 'mail.box'">
+                    <t t-if="thread === env.messaging.inbox">
+                        <div class="o_ThreadIcon_mailboxInbox fa fa-inbox"/>
+                    </t>
+                    <t t-elif="thread === env.messaging.starred">
+                        <div class="o_ThreadIcon_mailboxStarred fa fa-star-o"/>
+                    </t>
+                    <t t-elif="thread === env.messaging.history">
+                        <div class="o_ThreadIcon_mailboxHistory fa fa-history"/>
+                    </t>
+                    <t t-elif="thread === env.messaging.moderation">
+                        <div class="o_ThreadIcon_mailboxModeration fa fa-envelope"/>
+                    </t>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_icon/thread_icon_tests.js b/addons/mail/static/src/components/thread_icon/thread_icon_tests.js
new file mode 100644
index 00000000..d233d6f8
--- /dev/null
+++ b/addons/mail/static/src/components/thread_icon/thread_icon_tests.js
@@ -0,0 +1,118 @@
+odoo.define('mail/static/src/components/thread_icon/thread_icon_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('thread_icon', {}, function () {
+QUnit.module('thread_icon_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createThreadIcon = async thread => {
+            await createRootComponent(this, components.ThreadIcon, {
+                props: { threadLocalId: thread.localId },
+                target: this.widget.el
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('chat: correspondent is typing', async function (assert) {
+    assert.expect(5);
+
+    this.data['res.partner'].records.push({
+        id: 17,
+        im_status: 'online',
+        name: 'Demo',
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat',
+        id: 20,
+        members: [this.data.currentPartnerId, 17],
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadIcon(thread);
+
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadIcon',
+        "should have thread icon"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadIcon_online',
+        "should have thread icon with partner im status icon 'online'"
+    );
+
+    // simulate receive typing notification from demo "is typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadIcon_typing',
+        "should have thread icon with partner currently typing"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ThreadIcon_typing').title,
+        "Demo is typing...",
+        "title of icon should tell demo is currently typing"
+    );
+
+    // simulate receive typing notification from demo "no longer is typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: false,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadIcon_online',
+        "should have thread icon with partner im status icon 'online' (no longer typing)"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js
new file mode 100644
index 00000000..b70c8f6b
--- /dev/null
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js
@@ -0,0 +1,151 @@
+odoo.define('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js', function (require) {
+'use strict';
+
+const components = {
+    MessageAuthorPrefix: require('mail/static/src/components/message_author_prefix/message_author_prefix.js'),
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const mailUtils = require('mail.utils');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ThreadNeedactionPreview extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            const mainThreadCache = thread ? thread.mainCache : undefined;
+            let lastNeedactionMessageAsOriginThreadAuthor;
+            let lastNeedactionMessageAsOriginThread;
+            let threadCorrespondent;
+            if (thread) {
+                lastNeedactionMessageAsOriginThread = mainThreadCache.lastNeedactionMessageAsOriginThread;
+                threadCorrespondent = thread.correspondent;
+            }
+            if (lastNeedactionMessageAsOriginThread) {
+                lastNeedactionMessageAsOriginThreadAuthor = lastNeedactionMessageAsOriginThread.author;
+            }
+            return {
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                lastNeedactionMessageAsOriginThread: lastNeedactionMessageAsOriginThread ? lastNeedactionMessageAsOriginThread.__state : undefined,
+                lastNeedactionMessageAsOriginThreadAuthor: lastNeedactionMessageAsOriginThreadAuthor
+                    ? lastNeedactionMessageAsOriginThreadAuthor.__state
+                    : undefined,
+                thread: thread ? thread.__state : undefined,
+                threadCorrespondent: threadCorrespondent
+                    ? threadCorrespondent.__state
+                    : undefined,
+            };
+        });
+        /**
+         * Reference of the "mark as read" button. Useful to disable the
+         * top-level click handler when clicking on this specific button.
+         */
+        this._markAsReadRef = useRef('markAsRead');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Get the image route of the thread.
+     *
+     * @returns {string}
+     */
+    image() {
+        if (this.thread.moduleIcon) {
+            return this.thread.moduleIcon;
+        }
+        if (this.thread.correspondent) {
+            return this.thread.correspondent.avatarUrl;
+        }
+        if (this.thread.model === 'mail.channel') {
+            return `/web/image/mail.channel/${this.thread.id}/image_128`;
+        }
+        return '/mail/static/src/img/smiley/avatar.jpg';
+    }
+
+    /**
+     * Get inline content of the last message of this conversation.
+     *
+     * @returns {string}
+     */
+    get inlineLastNeedactionMessageBody() {
+        if (!this.thread.lastNeedactionMessage) {
+            return '';
+        }
+        return mailUtils.htmlToTextContentInline(this.thread.lastNeedactionMessage.prettyBody);
+    }
+
+    /**
+     * Get inline content of the last message of this conversation.
+     *
+     * @returns {string}
+     */
+    get inlineLastNeedactionMessageAsOriginThreadBody() {
+        if (!this.thread.lastNeedactionMessageAsOriginThread) {
+            return '';
+        }
+        return mailUtils.htmlToTextContentInline(this.thread.lastNeedactionMessageAsOriginThread.prettyBody);
+    }
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const markAsRead = this._markAsReadRef.el;
+        if (markAsRead && markAsRead.contains(ev.target)) {
+            // handled in `_onClickMarkAsRead`
+            return;
+        }
+        this.thread.open();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickMarkAsRead(ev) {
+        this.env.models['mail.message'].markAllAsRead([
+            ['model', '=', this.thread.model],
+            ['res_id', '=', this.thread.id],
+        ]);
+    }
+
+}
+
+Object.assign(ThreadNeedactionPreview, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.ThreadNeedactionPreview',
+});
+
+return ThreadNeedactionPreview;
+
+});
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
new file mode 100644
index 00000000..5de87f8b
--- /dev/null
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss
@@ -0,0 +1,108 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadNeedactionPreview {
+    @include o-mail-notification-list-item-layout();
+
+    &:hover .o_ThreadNeedactionPreview_markAsRead {
+        opacity: 1;
+    }
+}
+
+.o_ThreadNeedactionPreview_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_ThreadNeedactionPreview_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_ThreadNeedactionPreview_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_ThreadNeedactionPreview_counter {
+    @include o-mail-notification-list-item-counter-layout();
+}
+
+.o_ThreadNeedactionPreview_date {
+    @include o-mail-notification-list-item-date-layout();
+}
+
+.o_ThreadNeedactionPreview_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_ThreadNeedactionPreview_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_ThreadNeedactionPreview_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_ThreadNeedactionPreview_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_ThreadNeedactionPreview_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-layout();
+}
+
+.o_ThreadNeedactionPreview_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_ThreadNeedactionPreview_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-layout();
+}
+
+.o_ThreadNeedactionPreview_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ThreadNeedactionPreview {
+    @include o-mail-notification-list-item-style();
+    background-color: rgba($o-brand-primary, 0.1);
+
+    &:hover {
+        background-color: rgba($o-brand-primary, 0.2);
+
+        .o_ThreadNeedactionPreview_partnerImStatusIcon {
+            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
+        }
+    }
+}
+
+.o_ThreadNeedactionPreview_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_ThreadNeedactionPreview_counter {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_ThreadNeedactionPreview_date {
+    @include o-mail-notification-list-item-date-style();
+}
+
+.o_ThreadNeedactionPreview_image {
+    @include o-mail-notification-list-item-image-style();
+}
+
+.o_ThreadNeedactionPreview_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-style();
+}
+
+.o_ThreadNeedactionPreview_name {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_ThreadNeedactionPreview_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-style();
+}
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
new file mode 100644
index 00000000..3fd33224
--- /dev/null
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadNeedactionPreview" owl="1">
+        <!--
+            The preview template is used by the discuss in mobile, and by the systray
+            menu in order to show preview of threads.
+        -->
+        <div class="o_ThreadNeedactionPreview" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+            <t t-if="thread">
+                <div class="o_ThreadNeedactionPreview_sidebar">
+                    <div class="o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem">
+                        <img class="o_ThreadNeedactionPreview_image" t-att-src="image()" alt="Thread Image"/>
+                        <t t-if="thread.correspondent and thread.correspondent.im_status">
+                            <PartnerImStatusIcon
+                                class="o_ThreadNeedactionPreview_partnerImStatusIcon"
+                                t-att-class="{
+                                    'o-mobile': env.messaging.device.isMobile,
+                                }"
+                                partnerLocalId="thread.correspondent.localId"
+                            />
+                        </t>
+                    </div>
+                </div>
+                <div class="o_ThreadNeedactionPreview_content">
+                    <div class="o_ThreadNeedactionPreview_header">
+                        <span class="o_ThreadNeedactionPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }">
+                            <t t-esc="thread.displayName"/>
+                        </span>
+                        <span class="o_ThreadNeedactionPreview_counter">
+                            (<t t-esc="thread.needactionMessagesAsOriginThread.length"/>)
+                        </span>
+                        <span class="o-autogrow"/>
+                        <t t-if="thread.lastNeedactionMessageAsOriginThread">
+                            <span class="o_ThreadNeedactionPreview_date">
+                                <t t-esc="thread.lastNeedactionMessageAsOriginThread.date.fromNow()"/>
+                            </span>
+                        </t>
+                    </div>
+                    <div class="o_ThreadNeedactionPreview_core">
+                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }">
+                            <t t-if="thread.lastNeedactionMessageAsOriginThread and thread.lastNeedactionMessageAsOriginThread.author">
+                                <MessageAuthorPrefix
+                                    messageLocalId="thread.lastNeedactionMessageAsOriginThread.localId"
+                                    threadLocalId="thread.localId"
+                                />
+                            </t>
+                            <t t-esc="inlineLastNeedactionMessageAsOriginThreadBody"/>
+                        </span>
+                        <span class="o-autogrow"/>
+                        <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js
new file mode 100644
index 00000000..ca1fe22c
--- /dev/null
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js
@@ -0,0 +1,457 @@
+odoo.define('mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadNeedactionPreview: require('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+const Bus = require('web.Bus');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('thread_needaction_preview', {}, function () {
+QUnit.module('thread_needaction_preview_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createThreadNeedactionPreviewComponent = async props => {
+            await createRootComponent(this, components.ThreadNeedactionPreview, {
+                props,
+                target: this.widget.el
+            });
+        };
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('mark as read', async function (assert) {
+    assert.expect(5);
+
+    this.data['mail.message'].records.push({
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+        async mockRPC(route, args) {
+            if (route.includes('mark_all_as_read')) {
+                assert.step('mark_all_as_read');
+                assert.deepEqual(
+                    args.kwargs.domain,
+                    [
+                        ['model', '=', 'res.partner'],
+                        ['res_id', '=', 11],
+                    ],
+                    "should mark all as read the correct thread"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview_markAsRead',
+        "should have 1 mark as read button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadNeedactionPreview_markAsRead').click()
+    );
+    assert.verifySteps(
+        ['mark_all_as_read'],
+        "should have marked the thread as read"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should not have opened the thread"
+    );
+});
+
+QUnit.test('click on preview should mark as read and open the thread', async function (assert) {
+    assert.expect(6);
+
+    this.data['mail.message'].records.push({
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+        async mockRPC(route, args) {
+            if (route.includes('mark_all_as_read')) {
+                assert.step('mark_all_as_read');
+                assert.deepEqual(
+                    args.kwargs.domain,
+                    [
+                        ['model', '=', 'res.partner'],
+                        ['res_id', '=', 11],
+                    ],
+                    "should mark all as read the correct thread"
+                );
+            }
+            return this._super(...arguments);
+        },
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview',
+        "should have a preview initially"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should have no chat window initially"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadNeedactionPreview').click()
+    );
+    assert.verifySteps(
+        ['mark_all_as_read'],
+        "should have marked the message as read on clicking on the preview"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the thread on clicking on the preview"
+    );
+});
+
+QUnit.test('click on expand from chat window should close the chat window and open the form view', async function (assert) {
+    assert.expect(8);
+
+    const bus = new Bus();
+    bus.on('do-action', null, payload => {
+        assert.step('do_action');
+        assert.strictEqual(
+            payload.action.res_id,
+            11,
+            "should redirect to the id of the thread"
+        );
+        assert.strictEqual(
+            payload.action.res_model,
+            'res.partner',
+            "should redirect to the model of the thread"
+        );
+    });
+    this.data['mail.message'].records.push({
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        env: { bus },
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview',
+        "should have a preview initially"
+    );
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadNeedactionPreview').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the thread on clicking on the preview"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindowHeader_commandExpand',
+        "should have an expand button"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ChatWindowHeader_commandExpand').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should have closed the chat window on clicking expand"
+    );
+    assert.verifySteps(
+        ['do_action'],
+        "should have done an action to open the form view"
+    );
+});
+
+QUnit.test('[technical] opening a non-channel chat window should not call channel_fold', async function (assert) {
+    // channel_fold should not be called when opening non-channels in chat
+    // window, because there is no server sync of fold state for them.
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+        async mockRPC(route, args) {
+            if (route.includes('channel_fold')) {
+                const message = "should not call channel_fold when opening a non-channel chat window";
+                assert.step(message);
+                console.error(message);
+                throw Error(message);
+            }
+            return this._super(...arguments);
+        },
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview',
+        "should have a preview initially"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should have no chat window initially"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadNeedactionPreview').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the chat window on clicking on the preview"
+    );
+});
+
+QUnit.test('preview should display last needaction message preview even if there is a more recent message that is not needaction in the thread', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Stranger",
+    });
+    this.data['mail.message'].records.push({
+        author_id: 11,
+        body: "I am the oldest but needaction",
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.message'].records.push({
+        author_id: this.data.currentPartnerId,
+        body: "I am more recent",
+        id: 22,
+        model: 'res.partner',
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview_inlineText',
+        "should have a preview from the last message"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_ThreadNeedactionPreview_inlineText').textContent,
+        'Stranger: I am the oldest but needaction',
+        "the displayed message should be the one that needs action even if there is a more recent message that is not needaction on the thread"
+    );
+});
+
+QUnit.test('needaction preview should only show on its origin thread', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 12 });
+    this.data['mail.message'].records.push({
+        channel_ids: [12],
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({ hasMessagingMenu: true });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadNeedactionPreview',
+        "should have only one preview"
+    );
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'res.partner',
+    });
+    assert.containsOnce(
+        document.body,
+        `.o_ThreadNeedactionPreview[data-thread-local-id="${thread.localId}"]`,
+        "preview should be on the origin thread"
+    );
+});
+
+QUnit.test('chat window header should not have unread counter for non-channel thread', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 11 });
+    this.data['mail.message'].records.push({
+        author_id: 11,
+        body: 'not empty',
+        id: 21,
+        model: 'res.partner',
+        needaction: true,
+        needaction_partner_ids: [this.data.currentPartnerId],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        mail_message_id: 21,
+        notification_status: 'sent',
+        notification_type: 'inbox',
+        res_partner_id: this.data.currentPartnerId,
+    });
+    await this.start({
+        hasChatWindow: true,
+        hasMessagingMenu: true,
+    });
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-cache-loaded-messages',
+        func: () => document.querySelector('.o_MessagingMenu_toggler').click(),
+        message: "should wait until inbox loaded initial needaction messages",
+        predicate: ({ threadCache }) => {
+            return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox';
+        },
+    }));
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadNeedactionPreview').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ChatWindow',
+        "should have opened the chat window on clicking on the preview"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindowHeader_counter',
+        "chat window header should not have unread counter for non-channel thread"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.js b/addons/mail/static/src/components/thread_preview/thread_preview.js
new file mode 100644
index 00000000..94df29e0
--- /dev/null
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.js
@@ -0,0 +1,130 @@
+odoo.define('mail/static/src/components/thread_preview/thread_preview.js', function (require) {
+'use strict';
+
+const components = {
+    MessageAuthorPrefix: require('mail/static/src/components/message_author_prefix/message_author_prefix.js'),
+    PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const mailUtils = require('mail.utils');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ThreadPreview extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            let lastMessageAuthor;
+            let lastMessage;
+            if (thread) {
+                const orderedMessages = thread.orderedMessages;
+                lastMessage = orderedMessages[orderedMessages.length - 1];
+            }
+            if (lastMessage) {
+                lastMessageAuthor = lastMessage.author;
+            }
+            return {
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                lastMessage: lastMessage ? lastMessage.__state : undefined,
+                lastMessageAuthor: lastMessageAuthor
+                    ? lastMessageAuthor.__state
+                    : undefined,
+                thread: thread ? thread.__state : undefined,
+                threadCorrespondent: thread && thread.correspondent
+                    ? thread.correspondent.__state
+                    : undefined,
+            };
+        });
+        /**
+         * Reference of the "mark as read" button. Useful to disable the
+         * top-level click handler when clicking on this specific button.
+         */
+        this._markAsReadRef = useRef('markAsRead');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Get the image route of the thread.
+     *
+     * @returns {string}
+     */
+    image() {
+        if (this.thread.correspondent) {
+            return this.thread.correspondent.avatarUrl;
+        }
+        return `/web/image/mail.channel/${this.thread.id}/image_128`;
+    }
+
+    /**
+     * Get inline content of the last message of this conversation.
+     *
+     * @returns {string}
+     */
+    get inlineLastMessageBody() {
+        if (!this.thread.lastMessage) {
+            return '';
+        }
+        return mailUtils.htmlToTextContentInline(this.thread.lastMessage.prettyBody);
+    }
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const markAsRead = this._markAsReadRef.el;
+        if (markAsRead && markAsRead.contains(ev.target)) {
+            // handled in `_onClickMarkAsRead`
+            return;
+        }
+        this.thread.open();
+        if (!this.env.messaging.device.isMobile) {
+            this.env.messaging.messagingMenu.close();
+        }
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickMarkAsRead(ev) {
+        if (this.thread.lastNonTransientMessage) {
+            this.thread.markAsSeen(this.thread.lastNonTransientMessage);
+        }
+    }
+
+}
+
+Object.assign(ThreadPreview, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.ThreadPreview',
+});
+
+return ThreadPreview;
+
+});
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.scss b/addons/mail/static/src/components/thread_preview/thread_preview.scss
new file mode 100644
index 00000000..772d63e2
--- /dev/null
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.scss
@@ -0,0 +1,117 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadPreview {
+    @include o-mail-notification-list-item-layout();
+
+    &:hover .o_ThreadPreview_markAsRead {
+        opacity: 1;
+    }
+}
+
+.o_ThreadPreview_content {
+    @include o-mail-notification-list-item-content-layout();
+}
+
+.o_ThreadPreview_core {
+    @include o-mail-notification-list-item-core-layout();
+}
+
+.o_ThreadPreview_coreItem {
+    @include o-mail-notification-list-item-core-item-layout();
+}
+
+.o_ThreadPreview_counter {
+    @include o-mail-notification-list-item-counter-layout();
+}
+
+.o_ThreadPreview_date {
+    @include o-mail-notification-list-item-date-layout();
+}
+
+.o_ThreadPreview_header {
+    @include o-mail-notification-list-item-header-layout();
+}
+
+.o_ThreadPreview_image {
+    @include o-mail-notification-list-item-image-layout();
+}
+
+.o_ThreadPreview_imageContainer {
+    @include o-mail-notification-list-item-image-container-layout();
+}
+
+.o_ThreadPreview_inlineText {
+    @include o-mail-notification-list-item-inline-text-layout();
+}
+
+.o_ThreadPreview_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-layout();
+}
+
+.o_ThreadPreview_name {
+    @include o-mail-notification-list-item-name-layout();
+}
+
+.o_ThreadPreview_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-layout();
+}
+
+.o_ThreadPreview_sidebar {
+    @include o-mail-notification-list-item-sidebar-layout();
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ThreadPreview {
+    @include o-mail-notification-list-item-style();
+
+    &:hover {
+        .o_ThreadPreview_partnerImStatusIcon {
+            @include o-mail-notification-list-item-hover-partner-im-status-icon-style();
+        }
+    }
+
+    &.o-muted {
+        &:hover {
+            .o_ThreadPreview_partnerImStatusIcon {
+                @include o-mail-notification-list-item-muted-hover-partner-im-status-icon-style();
+            }
+        }
+    }
+}
+
+.o_ThreadPreview_core {
+    @include o-mail-notification-list-item-core-style();
+}
+
+.o_ThreadPreview_counter {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_ThreadPreview_date {
+    @include o-mail-notification-list-item-date-style();
+
+    &.o-muted {
+        color: gray('500');
+    }
+}
+
+.o_ThreadPreview_image {
+    @include o-mail-notification-list-item-image-style();
+}
+
+.o_ThreadPreview_markAsRead {
+    @include o-mail-notification-list-item-mark-as-read-style();
+}
+
+.o_ThreadPreview_name {
+    @include o-mail-notification-list-item-bold-style();
+}
+
+.o_ThreadPreview_partnerImStatusIcon {
+    @include o-mail-notification-list-item-partner-im-status-icon-style();
+}
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
new file mode 100644
index 00000000..8a4baf3d
--- /dev/null
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadPreview" owl="1">
+        <!--
+            The preview template is used by the discuss in mobile, and by the systray
+            menu in order to show preview of threads.
+        -->
+        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+            <t t-if="thread">
+                <div class="o_ThreadPreview_sidebar">
+                    <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
+                        <img class="o_ThreadPreview_image rounded-circle" t-att-src="image()" alt="Thread Image"/>
+                        <t t-if="thread.correspondent and thread.correspondent.im_status">
+                            <PartnerImStatusIcon
+                                class="o_ThreadPreview_partnerImStatusIcon"
+                                t-att-class="{
+                                    'o-mobile': env.messaging.device.isMobile,
+                                    'o-muted': thread.localMessageUnreadCounter === 0,
+                                }"
+                                partnerLocalId="thread.correspondent.localId"
+                            />
+                        </t>
+                    </div>
+                </div>
+                <div class="o_ThreadPreview_content">
+                    <div class="o_ThreadPreview_header">
+                        <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                            <t t-esc="thread.displayName"/>
+                        </span>
+                        <t t-if="thread.localMessageUnreadCounter > 0">
+                            <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                                (<t t-esc="thread.localMessageUnreadCounter"/>)
+                            </span>
+                        </t>
+                        <span class="o-autogrow"/>
+                        <t t-if="thread.lastMessage">
+                            <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }">
+                                <t t-esc="thread.lastMessage.date.fromNow()"/>
+                            </span>
+                        </t>
+                    </div>
+                    <div class="o_ThreadPreview_core">
+                        <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }">
+                            <t t-if="thread.lastMessage and thread.lastMessage.author">
+                                <MessageAuthorPrefix
+                                    messageLocalId="thread.lastMessage.localId"
+                                    threadLocalId="thread.localId"
+                                />
+                            </t>
+                            <t t-esc="inlineLastMessageBody"/>
+                        </span>
+                        <span class="o-autogrow"/>
+                        <t t-if="thread.localMessageUnreadCounter > 0">
+                            <span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/>
+                        </t>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
new file mode 100644
index 00000000..981abf6b
--- /dev/null
+++ b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js
@@ -0,0 +1,114 @@
+odoo.define('mail/static/src/components/thread_preview/thread_preview_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadPreview: require('mail/static/src/components/thread_preview/thread_preview.js'),
+};
+
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('thread_preview', {}, function () {
+QUnit.module('thread_preview_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createThreadPreviewComponent = async props => {
+            await createRootComponent(this, components.ThreadPreview, {
+                props,
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('mark as read', async function (assert) {
+    assert.expect(8);
+    this.data['mail.channel'].records.push({
+        id: 11,
+        message_unread_counter: 1,
+    });
+    this.data['mail.message'].records.push({
+        channel_ids: [11],
+        id: 100,
+        model: 'mail.channel',
+        res_id: 11,
+    });
+
+    await this.start({
+        hasChatWindow: true,
+        async mockRPC(route, args) {
+            if (route.includes('channel_seen')) {
+                assert.step('channel_seen');
+            }
+            return this._super(...arguments);
+        },
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'mail.channel',
+    });
+    await this.createThreadPreviewComponent({ threadLocalId: thread.localId });
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_markAsRead',
+        "should have the mark as read button"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should have an unread counter"
+    );
+
+    await afterNextRender(() =>
+        document.querySelector('.o_ThreadPreview_markAsRead').click()
+    );
+    assert.verifySteps(
+        ['channel_seen'],
+        "should have marked the thread as seen"
+    );
+    assert.hasClass(
+        document.querySelector('.o_ThreadPreview'),
+        'o-muted',
+        "should be muted once marked as read"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_markAsRead',
+        "should no longer have the mark as read button"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ThreadPreview_counter',
+        "should no longer have an unread counter"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_ChatWindow',
+        "should not have opened the thread"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js
new file mode 100644
index 00000000..f053abc7
--- /dev/null
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js
@@ -0,0 +1,52 @@
+odoo.define('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadTypingIcon: require('mail/static/src/components/thread_typing_icon/thread_typing_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ThreadTextualTypingStatus extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const thread = this.env.models['mail.thread'].get(props.threadLocalId);
+            return {
+                threadOrderedOtherTypingMembersLength: thread && thread.orderedOtherTypingMembersLength,
+                threadTypingStatusText: thread && thread.typingStatusText,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.thread}
+     */
+    get thread() {
+        return this.env.models['mail.thread'].get(this.props.threadLocalId);
+    }
+
+}
+
+Object.assign(ThreadTextualTypingStatus, {
+    components,
+    props: {
+        threadLocalId: String,
+    },
+    template: 'mail.ThreadTextualTypingStatus',
+});
+
+return ThreadTextualTypingStatus;
+
+});
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss
new file mode 100644
index 00000000..4cb9e1cf
--- /dev/null
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss
@@ -0,0 +1,12 @@
+
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadTextualTypingStatus {
+    display: flex;
+}
+
+.o_ThreadTextualTypingStatus_separator {
+    width: map-get($spacers, 1);
+}
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
new file mode 100644
index 00000000..722d0738
--- /dev/null
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadTextualTypingStatus" owl="1">
+        <div class="o_ThreadTextualTypingStatus">
+            <t t-if="thread and thread.orderedOtherTypingMembers.length > 0">
+                <ThreadTypingIcon animation="'pulse'" size="'medium'"/>
+                <span class="o_ThreadTextualTypingStatus_separator"/>
+                <span t-esc="thread.typingStatusText"/>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js
new file mode 100644
index 00000000..284ca788
--- /dev/null
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js
@@ -0,0 +1,367 @@
+odoo.define('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadTextualTypingStatus: require('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    nextAnimationFrame,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('thread_textual_typing_status', {}, function () {
+QUnit.module('thread_textual_typing_status_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        this.createThreadTextualTypingStatusComponent = async thread => {
+            await createRootComponent(this, components.ThreadTextualTypingStatus, {
+                props: { threadLocalId: thread.localId },
+                target: this.widget.el,
+            });
+        };
+
+        this.start = async params => {
+            const { env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    async afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('receive other member typing status "is typing"', async function (assert) {
+    assert.expect(2);
+
+    this.data['res.partner'].records.push({ id: 17, name: 'Demo' });
+    this.data['mail.channel'].records.push({
+        id: 20,
+        members: [this.data.currentPartnerId, 17],
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadTextualTypingStatusComponent(thread);
+
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should display no one is currently typing"
+    );
+
+    // simulate receive typing notification from demo
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Demo is typing...",
+        "Should display that demo user is typing"
+    );
+});
+
+QUnit.test('receive other member typing status "is typing" then "no longer is typing"', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({ id: 17, name: 'Demo' });
+    this.data['mail.channel'].records.push({
+        id: 20,
+        members: [this.data.currentPartnerId, 17],
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadTextualTypingStatusComponent(thread);
+
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should display no one is currently typing"
+    );
+
+    // simulate receive typing notification from demo "is typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Demo is typing...",
+        "Should display that demo user is typing"
+    );
+
+    // simulate receive typing notification from demo "is no longer typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: false,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should no longer display that demo user is typing"
+    );
+});
+
+QUnit.test('assume other member typing status becomes "no longer is typing" after 60 seconds without any updated typing status', async function (assert) {
+    assert.expect(3);
+
+    this.data['res.partner'].records.push({ id: 17, name: 'Demo' });
+    this.data['mail.channel'].records.push({
+        id: 20,
+        members: [this.data.currentPartnerId, 17],
+    });
+    await this.start({
+        hasTimeControl: true,
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadTextualTypingStatusComponent(thread);
+
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should display no one is currently typing"
+    );
+
+    // simulate receive typing notification from demo "is typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Demo is typing...",
+        "Should display that demo user is typing"
+    );
+
+    await afterNextRender(() => this.env.testUtils.advanceTime(60 * 1000));
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should no longer display that demo user is typing"
+    );
+});
+
+QUnit.test ('other member typing status "is typing" refreshes 60 seconds timer of assuming no longer typing', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({ id: 17, name: 'Demo' });
+    this.data['mail.channel'].records.push({
+        id: 20,
+        members: [this.data.currentPartnerId, 17],
+    });
+    await this.start({
+        hasTimeControl: true,
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadTextualTypingStatusComponent(thread);
+
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should display no one is currently typing"
+    );
+
+    // simulate receive typing notification from demo "is typing"
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 17,
+            partner_name: "Demo",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Demo is typing...",
+        "Should display that demo user is typing"
+    );
+
+    // simulate receive typing notification from demo "is typing" again after 50s.
+    await this.env.testUtils.advanceTime(50 * 1000);
+    const typingData = {
+        info: 'typing_status',
+        is_typing: true,
+        partner_id: 17,
+        partner_name: "Demo",
+    };
+    const notification = [[false, 'mail.channel', 20], typingData];
+    this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    await this.env.testUtils.advanceTime(50 * 1000);
+    await nextAnimationFrame();
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Demo is typing...",
+        "Should still display that demo user is typing after 100 seconds (refreshed is typing status at 50s => (100 - 50) = 50s < 60s after assuming no-longer typing)"
+    );
+
+    await afterNextRender(() => this.env.testUtils.advanceTime(11 * 1000));
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should no longer display that demo user is typing after 111 seconds (refreshed is typing status at 50s => (111 - 50) = 61s > 60s after assuming no-longer typing)"
+    );
+});
+
+QUnit.test('receive several other members typing status "is typing"', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push(
+        { id: 10, name: 'Other10' },
+        { id: 11, name: 'Other11' },
+        { id: 12, name: 'Other12' }
+    );
+    this.data['mail.channel'].records.push({
+        id: 20,
+        members: [this.data.currentPartnerId, 10, 11, 12],
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel',
+    });
+    await this.createThreadTextualTypingStatusComponent(thread);
+
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "",
+        "Should display no one is currently typing"
+    );
+
+    // simulate receive typing notification from other10 (is typing)
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 10,
+            partner_name: "Other10",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Other10 is typing...",
+        "Should display that 'Other10' member is typing"
+    );
+
+    // simulate receive typing notification from other11 (is typing)
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 11,
+            partner_name: "Other11",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Other10 and Other11 are typing...",
+        "Should display that members 'Other10' and 'Other11' are typing (order: longer typer named first)"
+    );
+
+    // simulate receive typing notification from other12 (is typing)
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 12,
+            partner_name: "Other12",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Other10, Other11 and more are typing...",
+        "Should display that members 'Other10', 'Other11' and more (at least 1 extra member) are typing (order: longer typer named first)"
+    );
+
+    // simulate receive typing notification from other10 (no longer is typing)
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: false,
+            partner_id: 10,
+            partner_name: "Other10",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Other11 and Other12 are typing...",
+        "Should display that members 'Other11' and 'Other12' are typing ('Other10' stopped typing)"
+    );
+
+    // simulate receive typing notification from other10 (is typing again)
+    await afterNextRender(() => {
+        const typingData = {
+            info: 'typing_status',
+            is_typing: true,
+            partner_id: 10,
+            partner_name: "Other10",
+        };
+        const notification = [[false, 'mail.channel', 20], typingData];
+        this.widget.call('bus_service', 'trigger', 'notification', [notification]);
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadTextualTypingStatus').textContent,
+        "Other11, Other12 and more are typing...",
+        "Should display that members 'Other11' and 'Other12' and more (at least 1 extra member) are typing (order by longer typer, 'Other10' just recently restarted typing)"
+    );
+});
+
+});
+});
+});
+
+});
diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js
new file mode 100644
index 00000000..4c94a749
--- /dev/null
+++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js
@@ -0,0 +1,41 @@
+odoo.define('mail/static/src/components/thread_typing_icon/thread_typing_icon.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class ThreadTypingIcon extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+    }
+
+}
+
+Object.assign(ThreadTypingIcon, {
+    defaultProps: {
+        animation: 'none',
+        size: 'small',
+    },
+    props: {
+        animation: {
+            type: String,
+            validate: prop => ['bounce', 'none', 'pulse'].includes(prop),
+        },
+        size: {
+            type: String,
+            validate: prop => ['small', 'medium'].includes(prop),
+        },
+        title: {
+            type: String,
+            optional: true,
+        }
+    },
+    template: 'mail.ThreadTypingIcon',
+});
+
+return ThreadTypingIcon;
+
+});
diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss
new file mode 100644
index 00000000..ac3c5b2f
--- /dev/null
+++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss
@@ -0,0 +1,108 @@
+// ------------------------------------------------------------------
+// Variables
+// ------------------------------------------------------------------
+
+$o-thread-typing-icon-size-medium: 5px;
+$o-thread-typing-icon-size-small: 3px;
+
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadTypingIcon {
+    display: flex;
+    align-items: center;
+}
+
+.o_ThreadTypingIcon_dot {
+    display: flex;
+    flex: 0 0 auto;
+}
+
+.o_ThreadTypingIcon_separator {
+    min-width: 1px;
+    flex: 1 0 auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ThreadTypingIcon_dot {
+    border-radius: 50%;
+    background: gray('500');
+
+    &.o-sizeMedium {
+        width: $o-thread-typing-icon-size-medium;
+        height: $o-thread-typing-icon-size-medium;
+    }
+
+    &.o-sizeSmall {
+        width: $o-thread-typing-icon-size-small;
+        height: $o-thread-typing-icon-size-small;
+    }
+}
+
+// ------------------------------------------------------------------
+// Animation
+// ------------------------------------------------------------------
+
+.o_ThreadTypingIcon_dot.o-animationBounce {
+
+    // Note: duplicated animation because dependent on size, and current SASS version doesn't support var()
+    &.o-sizeMedium {
+        animation: o_ThreadTypingIcon_dot_animationBounce_sizeMedium_animation 1.5s linear infinite;
+    }
+
+    &.o-sizeSmall {
+        animation: o_ThreadTypingIcon_dot_animationBounce_sizeSmall_animation 1.5s linear infinite;
+    }
+
+    &.o_ThreadTypingIcon_dot2 {
+        animation-delay: -1.35s;
+    }
+
+    &.o_ThreadTypingIcon_dot3 {
+        animation-delay: -1.2s;
+    }
+}
+
+.o_ThreadTypingIcon_dot.o-animationPulse {
+    animation: o_ThreadTypingIcon_dot_animationPulse_animation 1.5s linear infinite;
+
+    &.o_ThreadTypingIcon_dot2 {
+        animation-delay: -1.35s;
+    }
+
+    &.o_ThreadTypingIcon_dot3 {
+        animation-delay: -1.2s;
+    }
+}
+
+@keyframes o_ThreadTypingIcon_dot_animationBounce_sizeMedium_animation {
+    0%, 40%, 100% {
+        transform: initial;
+    }
+    20% {
+        transform: translateY(-$o-thread-typing-icon-size-medium);
+    }
+}
+
+@keyframes o_ThreadTypingIcon_dot_animationBounce_sizeSmall_animation {
+    0%, 40%, 100% {
+        transform: initial;
+    }
+    20% {
+        transform: translateY(-$o-thread-typing-icon-size-small);
+    }
+}
+
+
+@keyframes o_ThreadTypingIcon_dot_animationPulse_animation {
+    0%, 40%, 100% {
+        opacity: initial;
+    }
+    20% {
+        opacity: 25%;
+    }
+}
diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
new file mode 100644
index 00000000..1bdb4ada
--- /dev/null
+++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadTypingIcon" owl="1">
+        <div class="o_ThreadTypingIcon" t-att-title="props.title">
+            <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot1" t-att-class="{
+                'o-animationBounce': props.animation === 'bounce',
+                'o-animationPulse': props.animation === 'pulse',
+                'o-sizeMedium': props.size === 'medium',
+                'o-sizeSmall': props.size === 'small',
+            }"/>
+            <span class="o_ThreadTypingIcon_separator"/>
+            <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot2" t-att-class="{
+                'o-animationBounce': props.animation === 'bounce',
+                'o-animationPulse': props.animation === 'pulse',
+                'o-sizeMedium': props.size === 'medium',
+                'o-sizeSmall': props.size === 'small',
+            }"/>
+            <span class="o_ThreadTypingIcon_separator"/>
+            <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot3" t-att-class="{
+                'o-animationBounce': props.animation === 'bounce',
+                'o-animationPulse': props.animation === 'pulse',
+                'o-sizeMedium': props.size === 'medium',
+                'o-sizeSmall': props.size === 'small',
+            }"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_view/thread_view.js b/addons/mail/static/src/components/thread_view/thread_view.js
new file mode 100644
index 00000000..2399fd16
--- /dev/null
+++ b/addons/mail/static/src/components/thread_view/thread_view.js
@@ -0,0 +1,222 @@
+odoo.define('mail/static/src/components/thread_view/thread_view.js', function (require) {
+'use strict';
+
+const components = {
+    Composer: require('mail/static/src/components/composer/composer.js'),
+    MessageList: require('mail/static/src/components/message_list/message_list.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
+
+const { Component } = owl;
+const { useRef } = owl.hooks;
+
+class ThreadView extends Component {
+
+    /**
+     * @param {...any} args
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore((...args) => this._useStoreSelector(...args), {
+            compareDepth: {
+                threadTextInputSendShortcuts: 1,
+            },
+        });
+        useUpdate({ func: () => this._update() });
+        /**
+         * Reference of the composer. Useful to set focus on composer when
+         * thread has the focus.
+         */
+        this._composerRef = useRef('composer');
+        /**
+         * Reference of the message list. Useful to determine scroll positions.
+         */
+        this._messageListRef = useRef('messageList');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Focus the thread. If it has a composer, focus it.
+     */
+    focus() {
+        if (!this._composerRef.comp) {
+            return;
+        }
+        this._composerRef.comp.focus();
+    }
+
+    /**
+     * Focusout the thread.
+     */
+    focusout() {
+        if (!this._composerRef.comp) {
+            return;
+        }
+        this._composerRef.comp.focusout();
+    }
+
+    /**
+     * Get the scroll height in the message list.
+     *
+     * @returns {integer|undefined}
+     */
+    getScrollHeight() {
+        if (!this._messageListRef.comp) {
+            return undefined;
+        }
+        return this._messageListRef.comp.getScrollHeight();
+    }
+
+    /**
+     * Get the scroll position in the message list.
+     *
+     * @returns {integer|undefined}
+     */
+    getScrollTop() {
+        if (!this._messageListRef.comp) {
+            return undefined;
+        }
+        return this._messageListRef.comp.getScrollTop();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    onScroll(ev) {
+        if (!this._messageListRef.comp) {
+            return;
+        }
+        this._messageListRef.comp.onScroll(ev);
+    }
+
+    /**
+     * @returns {mail.thread_view}
+     */
+    get threadView() {
+        return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Called when thread component is mounted or patched.
+     *
+     * @private
+     */
+    _update() {
+        this.trigger('o-rendered');
+    }
+
+    /**
+     * Returns data selected from the store.
+     *
+     * @private
+     * @param {Object} props
+     * @returns {Object}
+     */
+    _useStoreSelector(props) {
+        const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId);
+        const thread = threadView ? threadView.thread : undefined;
+        const threadCache = threadView ? threadView.threadCache : undefined;
+        const correspondent = thread && thread.correspondent;
+        return {
+            composer: thread && thread.composer,
+            correspondentId: correspondent && correspondent.id,
+            isDeviceMobile: this.env.messaging.device.isMobile,
+            thread,
+            threadCacheIsLoaded: threadCache && threadCache.isLoaded,
+            threadIsTemporary: thread && thread.isTemporary,
+            threadMassMailing: thread && thread.mass_mailing,
+            threadModel: thread && thread.model,
+            threadTextInputSendShortcuts: thread && thread.textInputSendShortcuts || [],
+            threadView,
+            threadViewIsLoading: threadView && threadView.isLoading,
+        };
+    }
+
+}
+
+Object.assign(ThreadView, {
+    components,
+    defaultProps: {
+        composerAttachmentsDetailsMode: 'auto',
+        hasComposer: false,
+        hasMessageCheckbox: false,
+        hasSquashCloseMessages: false,
+        haveMessagesMarkAsReadIcon: false,
+        haveMessagesReplyIcon: false,
+        isDoFocus: false,
+        order: 'asc',
+        showComposerAttachmentsExtensions: true,
+        showComposerAttachmentsFilenames: true,
+    },
+    props: {
+        composerAttachmentsDetailsMode: {
+            type: String,
+            validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop),
+        },
+        hasComposer: Boolean,
+        hasComposerCurrentPartnerAvatar: {
+            type: Boolean,
+            optional: true,
+        },
+        hasComposerSendButton: {
+            type: Boolean,
+            optional: true,
+        },
+        /**
+         * If set, determines whether the composer should display status of
+         * members typing on related thread. When this prop is not provided,
+         * it defaults to composer component default value.
+         */
+        hasComposerThreadTyping: {
+            type: Boolean,
+            optional: true,
+        },
+        hasMessageCheckbox: Boolean,
+        hasScrollAdjust: {
+            type: Boolean,
+            optional: true,
+        },
+        hasSquashCloseMessages: Boolean,
+        haveMessagesMarkAsReadIcon: Boolean,
+        haveMessagesReplyIcon: Boolean,
+        /**
+         * Determines whether this should become focused.
+         */
+        isDoFocus: Boolean,
+        order: {
+            type: String,
+            validate: prop => ['asc', 'desc'].includes(prop),
+        },
+        selectedMessageLocalId: {
+            type: String,
+            optional: true,
+        },
+        /**
+         * Function returns the exact scrollable element from the parent
+         * to manage proper scroll heights which affects the load more messages.
+         */
+        getScrollableElement: {
+            type: Function,
+            optional: true,
+        },
+        showComposerAttachmentsExtensions: Boolean,
+        showComposerAttachmentsFilenames: Boolean,
+        threadViewLocalId: String,
+    },
+    template: 'mail.ThreadView',
+});
+
+return ThreadView;
+
+});
diff --git a/addons/mail/static/src/components/thread_view/thread_view.scss b/addons/mail/static/src/components/thread_view/thread_view.scss
new file mode 100644
index 00000000..0db54501
--- /dev/null
+++ b/addons/mail/static/src/components/thread_view/thread_view.scss
@@ -0,0 +1,38 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ThreadView {
+    display: flex;
+    position: relative;
+    flex-flow: column;
+    overflow: auto;
+}
+
+.o_ThreadView_composer {
+    flex: 0 0 auto;
+}
+
+.o_ThreadView_loading {
+    display: flex;
+    align-self: center;
+    flex: 1 1 auto;
+    align-items: center;
+}
+
+.o_ThreadView_messageList {
+    flex: 1 1 auto;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ThreadView {
+    background-color: gray('100');
+
+}
+
+.o_ThreadView_loadingIcon {
+    margin-right: 3px;
+}
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
new file mode 100644
index 00000000..8f06bf39
--- /dev/null
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ThreadView" owl="1">
+        <div class="o_ThreadView" t-att-data-correspondent-id="threadView and threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView and threadView.thread and threadView.thread.localId">
+            <t t-if="threadView">
+                <t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition">
+                    <div class="o_ThreadView_loading">
+                        <span><i class="o_ThreadView_loadingIcon fa fa-spinner fa-spin" title="Loading..." role="img"/>Loading...</span>
+                    </div>
+                </t>
+                <t t-elif="threadView.threadCache.isLoaded or threadView.thread.isTemporary">
+                    <MessageList
+                        class="o_ThreadView_messageList"
+                        getScrollableElement= "props.getScrollableElement"
+                        hasMessageCheckbox="props.hasMessageCheckbox"
+                        hasScrollAdjust="props.hasScrollAdjust"
+                        hasSquashCloseMessages="props.hasSquashCloseMessages"
+                        haveMessagesMarkAsReadIcon="props.haveMessagesMarkAsReadIcon"
+                        haveMessagesReplyIcon="props.haveMessagesReplyIcon"
+                        order="props.order"
+                        selectedMessageLocalId="props.selectedMessageLocalId"
+                        threadViewLocalId="threadView.localId"
+                        t-ref="messageList"
+                    />
+                </t>
+                <t t-elif="props.hasComposer">
+                    <div class="o-autogrow"/>
+                </t>
+                <t t-if="props.hasComposer">
+                    <Composer
+                        class="o_ThreadView_composer"
+                        attachmentsDetailsMode="props.composerAttachmentsDetailsMode"
+                        composerLocalId="threadView.thread.composer.localId"
+                        hasCurrentPartnerAvatar="props.hasComposerCurrentPartnerAvatar"
+                        hasSendButton="props.hasComposerSendButton"
+                        hasThreadTyping="props.hasComposerThreadTyping"
+                        isCompact="(threadView.thread.model === 'mail.channel' and threadView.thread.mass_mailing) ? false : undefined"
+                        isDoFocus="props.isDoFocus"
+                        showAttachmentsExtensions="props.showComposerAttachmentsExtensions"
+                        showAttachmentsFilenames="props.showComposerAttachmentsFilenames"
+                        textInputSendShortcuts="threadView.textInputSendShortcuts"
+                        t-ref="composer"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/components/thread_view/thread_view_tests.js b/addons/mail/static/src/components/thread_view/thread_view_tests.js
new file mode 100644
index 00000000..58a05989
--- /dev/null
+++ b/addons/mail/static/src/components/thread_view/thread_view_tests.js
@@ -0,0 +1,1809 @@
+odoo.define('mail/static/src/components/thread_view/thread_view_tests.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadView: require('mail/static/src/components/thread_view/thread_view.js'),
+};
+const {
+    afterEach,
+    afterNextRender,
+    beforeEach,
+    createRootComponent,
+    dragenterFiles,
+    start,
+} = require('mail/static/src/utils/test_utils.js');
+
+QUnit.module('mail', {}, function () {
+QUnit.module('components', {}, function () {
+QUnit.module('thread_view', {}, function () {
+QUnit.module('thread_view_tests.js', {
+    beforeEach() {
+        beforeEach(this);
+
+        /**
+         * @param {mail.thread_view} threadView
+         * @param {Object} [otherProps={}]
+         * @param {Object} [param2={}]
+         * @param {boolean} [param2.isFixedSize=false]
+         */
+        this.createThreadViewComponent = async (threadView, otherProps = {}, { isFixedSize = false } = {}) => {
+            let target;
+            if (isFixedSize) {
+                // needed to allow scrolling in some tests
+                const div = document.createElement('div');
+                Object.assign(div.style, {
+                    display: 'flex',
+                    'flex-flow': 'column',
+                    height: '300px',
+                });
+                this.widget.el.append(div);
+                target = div;
+            } else {
+                target = this.widget.el;
+            }
+            const props = Object.assign({ threadViewLocalId: threadView.localId }, otherProps);
+            await createRootComponent(this, components.ThreadView, { props, target });
+        };
+
+        this.start = async params => {
+            const { afterEvent, env, widget } = await start(Object.assign({}, params, {
+                data: this.data,
+            }));
+            this.afterEvent = afterEvent;
+            this.env = env;
+            this.widget = widget;
+        };
+    },
+    afterEach() {
+        afterEach(this);
+    },
+});
+
+QUnit.test('dragover files on thread with composer', async function (assert) {
+    assert.expect(1);
+
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'channel',
+        id: 100,
+        members: [['insert', [
+            {
+                email: "john@example.com",
+                id: 9,
+                name: "John",
+            },
+            {
+                email: "fred@example.com",
+                id: 10,
+                name: "Fred",
+            },
+        ]]],
+        model: 'mail.channel',
+        name: "General",
+        public: 'public',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    await afterNextRender(() =>
+        dragenterFiles(document.querySelector('.o_ThreadView'))
+    );
+    assert.ok(
+        document.querySelector('.o_Composer_dropZone'),
+        "should have dropzone when dragging file over the thread"
+    );
+});
+
+QUnit.test('message list desc order', async function (assert) {
+    assert.expect(5);
+
+    for (let i = 0; i <= 60; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [100],
+            model: 'mail.channel',
+            res_id: 100,
+        });
+    }
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'channel',
+        id: 100,
+        members: [['insert', [
+            {
+                email: "john@example.com",
+                id: 9,
+                name: "John",
+            },
+            {
+                email: "fred@example.com",
+                id: 10,
+                name: "Fred",
+            },
+        ]]],
+        model: 'mail.channel',
+        name: "General",
+        public: 'public',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => this.createThreadViewComponent(threadViewer.threadView, { order: 'desc' }, { isFixedSize: true }),
+        message: "should wait until channel 100 loaded initial messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 100
+            );
+        },
+    });
+    const messageItems = document.querySelectorAll(`.o_MessageList_item`);
+    assert.notOk(
+        messageItems[0].classList.contains("o_MessageList_loadMore"),
+        "load more link should NOT be before messages"
+    );
+    assert.ok(
+        messageItems[messageItems.length - 1].classList.contains("o_MessageList_loadMore"),
+        "load more link should be after messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        30,
+        "should have 30 messages at the beginning"
+    );
+
+    // scroll to bottom
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            const messageList = document.querySelector('.o_ThreadView_messageList');
+            messageList.scrollTop = messageList.scrollHeight - messageList.clientHeight;
+        },
+        message: "should wait until channel 100 loaded more messages after scrolling to bottom",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'more-messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 100
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        60,
+        "should have 60 messages after scrolled to bottom"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop = 0;
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        60,
+        "scrolling to top should not trigger any message fetching"
+    );
+});
+
+QUnit.test('message list asc order', async function (assert) {
+    assert.expect(5);
+
+    for (let i = 0; i <= 60; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [100],
+            model: 'mail.channel',
+            res_id: 100,
+        });
+    }
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'channel',
+        id: 100,
+        members: [['insert', [
+            {
+                email: "john@example.com",
+                id: 9,
+                name: "John",
+            },
+            {
+                email: "fred@example.com",
+                id: 10,
+                name: "Fred",
+            },
+        ]]],
+        model: 'mail.channel',
+        name: "General",
+        public: 'public',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => this.createThreadViewComponent(threadViewer.threadView, { order: 'asc' }, { isFixedSize: true }),
+        message: "should wait until channel 100 loaded initial messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 100
+            );
+        },
+    });
+    const messageItems = document.querySelectorAll(`.o_MessageList_item`);
+    assert.notOk(
+        messageItems[messageItems.length - 1].classList.contains("o_MessageList_loadMore"),
+        "load more link should be before messages"
+    );
+    assert.ok(
+        messageItems[0].classList.contains("o_MessageList_loadMore"),
+        "load more link should NOT be after messages"
+    );
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        30,
+        "should have 30 messages at the beginning"
+    );
+
+    // scroll to top
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => document.querySelector(`.o_ThreadView_messageList`).scrollTop = 0,
+        message: "should wait until channel 100 loaded more messages after scrolling to top",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'more-messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 100
+            );
+        },
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        60,
+        "should have 60 messages after scrolled to top"
+    );
+
+    // scroll to bottom
+    await afterNextRender(() => {
+        document.querySelector(`.o_ThreadView_messageList`).scrollTop =
+            document.querySelector(`.o_ThreadView_messageList`).scrollHeight;
+    });
+    assert.strictEqual(
+        document.querySelectorAll(`.o_Message`).length,
+        60,
+        "scrolling to bottom should not trigger any message fetching"
+    );
+});
+
+QUnit.test('mark channel as fetched when a new message is loaded and as seen when focusing composer [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(8);
+
+    this.data['res.partner'].records.push({
+        email: "fred@example.com",
+        id: 10,
+        name: "Fred",
+    });
+    this.data['res.users'].records.push({
+        id: 10,
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'chat',
+        id: 100,
+        is_pinned: true,
+        members: [this.data.currentPartnerId, 10],
+    });
+    await this.start({
+        mockRPC(route, args) {
+            if (args.method === 'channel_fetched') {
+                assert.strictEqual(
+                    args.args[0][0],
+                    100,
+                    'channel_fetched is called on the right channel id'
+                );
+                assert.strictEqual(
+                    args.model,
+                    'mail.channel',
+                    'channel_fetched is called on the right channel model'
+                );
+                assert.step('rpc:channel_fetch');
+            } else if (args.method === 'channel_seen') {
+                assert.strictEqual(
+                    args.args[0][0],
+                    100,
+                    'channel_seen is called on the right channel id'
+                );
+                assert.strictEqual(
+                    args.model,
+                    'mail.channel',
+                    'channel_seeb is called on the right channel model'
+                );
+                assert.step('rpc:channel_seen');
+            }
+            return this._super(...arguments);
+        }
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 100,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    await afterNextRender(async () => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 10,
+            },
+            message_content: "new message",
+            uuid: thread.uuid,
+        },
+    }));
+    assert.verifySteps(
+        ['rpc:channel_fetch'],
+        "Channel should have been fetched but not seen yet"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(),
+        message: "should wait until last seen by current partner message id changed after focusing the thread",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 100 &&
+                thread.model === 'mail.channel'
+            );
+        },
+    }));
+    assert.verifySteps(
+        ['rpc:channel_seen'],
+        "Channel should have been marked as seen after threadView got the focus"
+    );
+});
+
+QUnit.test('mark channel as fetched and seen when a new message is loaded if composer is focused [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(4);
+
+    this.data['res.partner'].records.push({
+        id: 10,
+    });
+    this.data['res.users'].records.push({
+        id: 10,
+        partner_id: 10,
+    });
+    this.data['mail.channel'].records.push({
+        id: 100,
+    });
+    await this.start({
+        mockRPC(route, args) {
+            if (args.method === 'channel_fetched' && args.args[0] === 100) {
+                throw new Error("'channel_fetched' RPC must not be called for created channel as message is directly seen");
+            } else if (args.method === 'channel_seen') {
+                assert.strictEqual(
+                    args.args[0][0],
+                    100,
+                    'channel_seen is called on the right channel id'
+                );
+                assert.strictEqual(
+                    args.model,
+                    'mail.channel',
+                    'channel_seen is called on the right channel model'
+                );
+                assert.step('rpc:channel_seen');
+            }
+            return this._super(...arguments);
+        }
+    });
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 100,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    // simulate receiving a message
+    await this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => this.env.services.rpc({
+            route: '/mail/chat_post',
+            params: {
+                context: {
+                    mockedUserId: 10,
+                },
+                message_content: "<p>fdsfsd</p>",
+                uuid: thread.uuid,
+            },
+        }),
+        message: "should wait until last seen by current partner message id changed after receiving a message while thread is focused",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 100 &&
+                thread.model === 'mail.channel'
+            );
+        },
+    });
+    assert.verifySteps(
+        ['rpc:channel_seen'],
+        "Channel should have been mark as seen directly"
+    );
+});
+
+QUnit.test('show message subject if thread is mailing channel', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [100],
+        model: 'mail.channel',
+        res_id: 100,
+        subject: "Salutations, voyageur",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].create({
+        channel_type: 'channel',
+        id: 100,
+        mass_mailing: true,
+        model: 'mail.channel',
+        name: "General",
+        public: 'public',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView);
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display a single message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_subject',
+        "should display subject of the message"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_Message_subject').textContent,
+        "Subject: Salutations, voyageur",
+        "Subject of the message should be 'Salutations, voyageur'"
+    );
+});
+
+QUnit.test('[technical] new messages separator on posting message', async function (assert) {
+    // technical as we need to remove focus from text input to avoid `channel_seen` call
+    assert.expect(4);
+
+    this.data['mail.channel'].records = [{
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        message_unread_counter: 0,
+        seen_message_id: 10,
+        name: "General",
+    }];
+    this.data['mail.message'].records.push({
+        body: "first message",
+        channel_ids: [20],
+        id: 10,
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display one message in thread initially"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "hey !"));
+    await afterNextRender(() => {
+        // need to remove focus from text area to avoid channel_seen
+        document.querySelector('.o_Composer_buttonSend').focus();
+        document.querySelector('.o_Composer_buttonSend').click();
+
+    });
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "should display 2 messages (initial & newly posted), after posting a message"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "still no separator shown when current partner posted a message"
+    );
+});
+
+QUnit.test('new messages separator on receiving new message [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(6);
+
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    this.data['mail.channel'].records.push({
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        message_unread_counter: 0,
+        name: "General",
+        seen_message_id: 1,
+        uuid: 'randomuuid',
+    });
+    this.data['mail.message'].records.push({
+        body: "blah",
+        channel_ids: [20],
+        id: 1,
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_message',
+        "should have an initial message"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+
+    document.querySelector('.o_ComposerTextInput_textarea').blur();
+    // simulate receiving a message
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => this.env.services.rpc({
+            route: '/mail/chat_post',
+            params: {
+                context: {
+                    mockedUserId: 42,
+                },
+                message_content: "hu",
+                uuid: thread.uuid,
+            },
+        }),
+        message: "should wait until new message is received",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                threadViewer.thread.id === 20 &&
+                threadViewer.thread.model === 'mail.channel' &&
+                hint.type === 'message-received'
+            );
+        },
+    });
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "should now have 2 messages after receiving a new message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "'new messages' separator should be shown"
+    );
+
+    assert.containsOnce(
+        document.body,
+        `.o_MessageList_separatorNewMessages ~ .o_Message[data-message-local-id="${
+            this.env.models['mail.message'].findFromIdentifyingData({ id: 2 }).localId
+        }"]`,
+        "'new messages' separator should be shown above new message received"
+    );
+
+    await afterNextRender(() => this.afterEvent({
+        eventName: 'o-thread-last-seen-by-current-partner-message-id-changed',
+        func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(),
+        message: "should wait until last seen by current partner message id changed after focusing the thread",
+        predicate: ({ thread }) => {
+            return (
+                thread.id === 20 &&
+                thread.model === 'mail.channel'
+            );
+        },
+    }));
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "'new messages' separator should no longer be shown as last message has been seen"
+    );
+});
+
+QUnit.test('new messages separator on posting message', async function (assert) {
+    assert.expect(4);
+
+    this.data['mail.channel'].records = [{
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        message_unread_counter: 0,
+        name: "General",
+    }];
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_message',
+        "should have no messages"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "should not display 'new messages' separator"
+    );
+
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "hey !"));
+    await afterNextRender(() =>
+        document.querySelector('.o_Composer_buttonSend').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should have the message current partner just posted"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "still no separator shown when current partner posted a message"
+    );
+});
+
+QUnit.test('basic rendering of canceled notification', async function (assert) {
+    assert.expect(8);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['res.partner'].records.push({ id: 12, name: "Someone" });
+    this.data['mail.message'].records.push({
+        body: "not empty",
+        channel_ids: [11],
+        id: 10,
+        message_type: 'email',
+        model: 'mail.channel',
+        notification_ids: [11],
+        res_id: 11,
+    });
+    this.data['mail.notification'].records.push({
+        failure_type: 'SMTP',
+        id: 11,
+        mail_message_id: 10,
+        notification_status: 'canceled',
+        notification_type: 'email',
+        res_partner_id: 12,
+    });
+    await this.start();
+    const threadViewer = await this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "thread become loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIconClickable',
+        "should display the notification icon container on the message"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message_notificationIcon',
+        "should display the notification icon on the message"
+    );
+    assert.hasClass(
+        document.querySelector('.o_Message_notificationIcon'),
+        'fa-envelope-o',
+        "notification icon shown on the message should represent email"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector('.o_Message_notificationIconClickable').click();
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover',
+        "notification popover should be opened after notification has been clicked"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationIcon',
+        "an icon should be shown in notification popover"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationIcon.fa.fa-trash-o',
+        "the icon shown in notification popover should be the canceled icon"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_NotificationPopover_notificationPartnerName',
+        "partner name should be shown in notification popover"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_NotificationPopover_notificationPartnerName').textContent.trim(),
+        "Someone",
+        "partner name shown in notification popover should be the one concerned by the notification"
+    );
+});
+
+QUnit.test('should scroll to bottom on receiving new message if the list is initially scrolled to bottom (asc order)', async function (assert) {
+    assert.expect(2);
+
+    // Needed partner & user to allow simulation of message reception
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i <= 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => this.createThreadViewComponent(
+            threadViewer.threadView,
+            { order: 'asc' },
+            { isFixedSize: true },
+        ),
+        message: "should wait until channel 20 scrolled initially",
+        predicate: data => threadViewer === data.threadViewer,
+    });
+    const initialMessageList = document.querySelector('.o_ThreadView_messageList');
+    assert.strictEqual(
+        initialMessageList.scrollTop,
+        initialMessageList.scrollHeight - initialMessageList.clientHeight,
+        "should have scrolled to bottom of channel 20 initially"
+    );
+
+    // simulate receiving a message
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () =>
+            this.env.services.rpc({
+                route: '/mail/chat_post',
+                params: {
+                    context: {
+                        mockedUserId: 42,
+                    },
+                    message_content: "hello",
+                    uuid: thread.uuid,
+                },
+            }),
+        message: "should wait until channel 20 scrolled after receiving a message",
+        predicate: data => threadViewer === data.threadViewer,
+    });
+    const messageList = document.querySelector('.o_ThreadView_messageList');
+    assert.strictEqual(
+        messageList.scrollTop,
+        messageList.scrollHeight - messageList.clientHeight,
+        "should scroll to bottom on receiving new message because the list is initially scrolled to bottom"
+    );
+});
+
+QUnit.test('should not scroll on receiving new message if the list is initially scrolled anywhere else than bottom (asc order)', async function (assert) {
+    assert.expect(3);
+
+    // Needed partner & user to allow simulation of message reception
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    this.data['mail.channel'].records.push({ id: 20 });
+    for (let i = 0; i <= 10; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [20],
+        });
+    }
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => this.createThreadViewComponent(
+            threadViewer.threadView,
+            { order: 'asc' },
+            { isFixedSize: true },
+        ),
+        message: "should wait until channel 20 scrolled initially",
+        predicate: data => threadViewer === data.threadViewer,
+    });
+    const initialMessageList = document.querySelector('.o_ThreadView_messageList');
+    assert.strictEqual(
+        initialMessageList.scrollTop,
+        initialMessageList.scrollHeight - initialMessageList.clientHeight,
+        "should have scrolled to bottom of channel 20 initially"
+    );
+
+    await this.afterEvent({
+        eventName: 'o-component-message-list-scrolled',
+        func: () => initialMessageList.scrollTop = 0,
+        message: "should wait until channel 20 processed manual scroll",
+        predicate: data => threadViewer === data.threadViewer,
+    });
+    assert.strictEqual(
+        initialMessageList.scrollTop,
+        0,
+        "should have scrolled to the top of channel 20 manually"
+    );
+
+    // simulate receiving a message
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () =>
+            this.env.services.rpc({
+                route: '/mail/chat_post',
+                params: {
+                    context: {
+                        mockedUserId: 42,
+                    },
+                    message_content: "hello",
+                    uuid: thread.uuid,
+                },
+            }),
+        message: "should wait until channel 20 processed new message hint",
+        predicate: data => threadViewer === data.threadViewer && data.hint.type === 'message-received',
+    });
+    assert.strictEqual(
+        document.querySelector('.o_ThreadView_messageList').scrollTop,
+        0,
+        "should not scroll on receiving new message because the list is initially scrolled anywhere else than bottom"
+    );
+});
+
+QUnit.test("delete all attachments of message without content should no longer display the message", async function (assert) {
+    assert.expect(2);
+
+    this.data['ir.attachment'].records.push({
+        id: 143,
+        mimetype: 'text/plain',
+        name: "Blah.txt",
+    });
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            attachment_ids: [143],
+            channel_ids: [11],
+            id: 101,
+        }
+    );
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', { id: 11, model: 'mail.channel' }]],
+    });
+    // wait for messages of the thread to be loaded
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "thread become loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be 1 message displayed initially"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_Attachment[data-attachment-local-id="${
+            this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId
+        }"] .o_Attachment_asideItemUnlink`).click();
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click()
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "message should no longer be displayed after removing all its attachments (empty content)"
+    );
+});
+
+QUnit.test('delete all attachments of a message with some text content should still keep it displayed', async function (assert) {
+    assert.expect(2);
+
+    this.data['ir.attachment'].records.push({
+        id: 143,
+        mimetype: 'text/plain',
+        name: "Blah.txt",
+    });
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            attachment_ids: [143],
+            body: "Some content",
+            channel_ids: [11],
+            id: 101,
+        },
+    );
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', { id: 11, model: 'mail.channel' }]],
+    });
+    // wait for messages of the thread to be loaded
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "thread become loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be 1 message displayed initially"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_Attachment[data-attachment-local-id="${
+            this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId
+        }"] .o_Attachment_asideItemUnlink`).click();
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "message should still be displayed after removing its attachments (non-empty content)"
+    );
+});
+
+QUnit.test('delete all attachments of a message with tracking fields should still keep it displayed', async function (assert) {
+    assert.expect(2);
+
+    this.data['ir.attachment'].records.push({
+        id: 143,
+        mimetype: 'text/plain',
+        name: "Blah.txt",
+    });
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            attachment_ids: [143],
+            channel_ids: [11],
+            id: 101,
+            tracking_value_ids: [6]
+        },
+    );
+    this.data['mail.tracking.value'].records.push({
+        changed_field: "Name",
+        field_type: "char",
+        id: 6,
+        new_value: "New name",
+        old_value: "Old name",
+    });
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', { id: 11, model: 'mail.channel' }]],
+    });
+    // wait for messages of the thread to be loaded
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "thread become loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "there should be 1 message displayed initially"
+    );
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_Attachment[data-attachment-local-id="${
+            this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId
+        }"] .o_Attachment_asideItemUnlink`).click();
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click()
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "message should still be displayed after removing its attachments (non-empty content)"
+    );
+});
+
+QUnit.test('Post a message containing an email address followed by a mention on another line', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['res.partner'].records.push({
+        id: 25,
+        email: "testpartner@odoo.com",
+        name: "TestPartner",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "email@odoo.com\n"));
+    await afterNextRender(() => {
+        ["@", "T", "e"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_mail_redirect[data-oe-id="25"][data-oe-model="res.partner"]:contains("@TestPartner")`,
+        "Conversation should have a message that has been posted, which contains partner mention"
+    );
+});
+
+QUnit.test(`Mention a partner with special character (e.g. apostrophe ')`, async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['res.partner'].records.push({
+        id: 1952,
+        email: "usatyi@example.com",
+        name: "Pynya's spokesman",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => {
+        ["@", "P", "y", "n"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_mail_redirect[data-oe-id="1952"][data-oe-model="res.partner"]:contains("@Pynya's spokesman")`,
+        "Conversation should have a message that has been posted, which contains partner mention"
+    );
+});
+
+QUnit.test('mention 2 different partners that have the same name', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['res.partner'].records.push(
+        {
+            id: 25,
+            email: "partner1@example.com",
+            name: "TestPartner",
+        }, {
+            id: 26,
+            email: "partner2@example.com",
+            name: "TestPartner",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => {
+        ["@", "T", "e"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[0].click());
+    await afterNextRender(() => {
+        ["@", "T", "e"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[1].click());
+    await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click());
+    assert.containsOnce(document.body, '.o_Message_content', 'should have one message after posting it');
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_mail_redirect[data-oe-id="25"][data-oe-model="res.partner"]:contains("@TestPartner")`,
+        "message should contain the first partner mention"
+    );
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_mail_redirect[data-oe-id="26"][data-oe-model="res.partner"]:contains("@TestPartner")`,
+        "message should also contain the second partner mention"
+    );
+});
+
+QUnit.test('mention a channel with space in the name', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General good boy",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 7,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector('.o_Message_content'),
+        '.o_channel_redirect',
+        "message must contain a link to the mentioned channel"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_channel_redirect').textContent,
+        '#General good boy',
+        "link to the channel must contains # + the channel name"
+    );
+});
+
+QUnit.test('mention a channel with "&" in the name', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General & good",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 7,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() =>
+        document.querySelector('.o_ComposerSuggestion').click()
+    );
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector('.o_Message_content'),
+        '.o_channel_redirect',
+        "message should contain a link to the mentioned channel"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_channel_redirect').textContent,
+        '#General & good',
+        "link to the channel must contains # + the channel name"
+    );
+});
+
+QUnit.test('mention a channel on a second line when the first line contains #', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General good",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 7,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#blabla\n#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_ComposerSuggestion').click();
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector('.o_Message_content'),
+        '.o_channel_redirect',
+        "message should contain a link to the mentioned channel"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_channel_redirect').textContent,
+        '#General good',
+        "link to the channel must contains # + the channel name"
+    );
+});
+
+QUnit.test('mention a channel when replacing the space after the mention by another char', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 7,
+        name: "General good",
+    });
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 7,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+
+    await afterNextRender(() => {
+        document.querySelector(`.o_ComposerTextInput_textarea`).focus();
+        document.execCommand('insertText', false, "#");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_ComposerSuggestion').click();
+    });
+    await afterNextRender(() => {
+        const text = document.querySelector(`.o_ComposerTextInput_textarea`).value;
+        document.querySelector(`.o_ComposerTextInput_textarea`).value = text.slice(0, -1);
+        document.execCommand('insertText', false, ", test");
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keydown'));
+        document.querySelector(`.o_ComposerTextInput_textarea`)
+            .dispatchEvent(new window.KeyboardEvent('keyup'));
+    });
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.containsOnce(
+        document.querySelector('.o_Message_content'),
+        '.o_channel_redirect',
+        "message should contain a link to the mentioned channel"
+    );
+    assert.strictEqual(
+        document.querySelector('.o_channel_redirect').textContent,
+        '#General good',
+        "link to the channel must contains # + the channel name"
+    );
+});
+
+QUnit.test('mention 2 different channels that have the same name', async function (assert) {
+    assert.expect(3);
+
+    this.data['mail.channel'].records.push(
+        {
+            id: 11,
+            name: "my channel",
+            public: 'public', // mentioning another channel is possible only from a public channel
+        },
+        {
+            id: 12,
+            name: "my channel",
+        },
+    );
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 11,
+        model: 'mail.channel',
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => {
+        ["#", "m", "y"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[0].click());
+    await afterNextRender(() => {
+        ["#", "m", "y"].forEach((char)=>{
+            document.execCommand('insertText', false, char);
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keydown'));
+            document.querySelector(`.o_ComposerTextInput_textarea`)
+                .dispatchEvent(new window.KeyboardEvent('keyup'));
+        });
+    });
+    await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[1].click());
+    await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click());
+    assert.containsOnce(document.body, '.o_Message_content', 'should have one message after posting it');
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_channel_redirect[data-oe-id="11"][data-oe-model="mail.channel"]:contains("#my channel")`,
+        "message should contain the first channel mention"
+    );
+    assert.containsOnce(
+        document.querySelector(`.o_Message_content`),
+        `.o_channel_redirect[data-oe-id="12"][data-oe-model="mail.channel"]:contains("#my channel")`,
+        "message should also contain the second channel mention"
+    );
+});
+
+QUnit.test('show empty placeholder when thread contains no message', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    await this.start();
+    const threadViewer = await this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "should wait until thread becomes loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_empty',
+        "message list empty placeholder should be shown as thread does not contain any messages"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "no message should be shown as thread does not contain any"
+    );
+});
+
+QUnit.test('show empty placeholder when thread contains only empty messages', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message'].records.push(
+        {
+            channel_ids: [11],
+            id: 101,
+        },
+    );
+    await this.start();
+    const threadViewer = await this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "thread become loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_empty',
+        "message list empty placeholder should be shown as thread contain only empty messages"
+    );
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "no message should be shown as thread contains only empty ones"
+    );
+});
+
+QUnit.test('message with subtype should be displayed (and not considered as empty)', async function (assert) {
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({ id: 11 });
+    this.data['mail.message.subtype'].records.push({
+        description: "Task created",
+        id: 10,
+    });
+    this.data['mail.message'].records.push(
+        {
+            channel_ids: [11],
+            id: 101,
+            subtype_id: 10,
+        },
+    );
+    await this.start();
+    const threadViewer = await this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView);
+        },
+        message: "should wait until thread becomes loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsOnce(
+        document.body,
+        '.o_Message',
+        "should display 1 message (message with subtype description 'task created')"
+    );
+    assert.strictEqual(
+        document.body.querySelector('.o_Message_content').textContent,
+        "Task created",
+        "message should have 'Task created' (from its subtype description)"
+    );
+});
+
+QUnit.test('[technical] message list with a full page of empty messages should show load more if there are other messages', async function (assert) {
+    // Technical assumptions :
+    // - message_fetch fetching exactly 30 messages,
+    // - empty messages not being displayed
+    // - auto-load more being triggered on scroll, not automatically when the 30 first messages are empty
+    assert.expect(2);
+
+    this.data['mail.channel'].records.push({
+        id: 11,
+    });
+    for (let i = 0; i <= 30; i++) {
+        this.data['mail.message'].records.push({
+            body: "not empty",
+            channel_ids: [11],
+        });
+    }
+    for (let i = 0; i <= 30; i++) {
+        this.data['mail.message'].records.push({
+            channel_ids: [11],
+        });
+    }
+    await this.start();
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['insert', {
+            id: 11,
+            model: 'mail.channel',
+        }]],
+    });
+    await this.afterEvent({
+        eventName: 'o-thread-view-hint-processed',
+        func: () => {
+            this.createThreadViewComponent(threadViewer.threadView, { order: 'asc' }, { isFixedSize: true });
+        },
+        message: "should wait until thread becomes loaded with messages",
+        predicate: ({ hint, threadViewer }) => {
+            return (
+                hint.type === 'messages-loaded' &&
+                threadViewer.thread.model === 'mail.channel' &&
+                threadViewer.thread.id === 11
+            );
+        },
+    });
+    assert.containsNone(
+        document.body,
+        '.o_Message',
+        "No message should be shown as all 30 first messages are empty"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_loadMore',
+        "Load more button should be shown as there are more messages to show"
+    );
+});
+
+QUnit.test('first unseen message should be directly preceded by the new message separator if there is a transient message just before it while composer is not focused [REQUIRE FOCUS]', async function (assert) {
+    // The goal of removing the focus is to ensure the thread is not marked as seen automatically.
+    // Indeed that would trigger channel_seen no matter what, which is already covered by other tests.
+    // The goal of this test is to cover the conditions specific to transient messages,
+    // and the conditions from focus would otherwise shadow them.
+    assert.expect(3);
+
+    this.data['mail.channel_command'].records.push({ name: 'who' });
+    // Needed partner & user to allow simulation of message reception
+    this.data['res.partner'].records.push({
+        id: 11,
+        name: "Foreigner partner",
+    });
+    this.data['res.users'].records.push({
+        id: 42,
+        name: "Foreigner user",
+        partner_id: 11,
+    });
+    this.data['mail.channel'].records = [{
+        channel_type: 'channel',
+        id: 20,
+        is_pinned: true,
+        name: "General",
+        uuid: 'channel20uuid',
+    }];
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    // send a command that leads to receiving a transient message
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "/who"));
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+
+    // composer is focused by default, we remove that focus
+    document.querySelector('.o_ComposerTextInput_textarea').blur();
+    // simulate receiving a message
+    await afterNextRender(() => this.env.services.rpc({
+        route: '/mail/chat_post',
+        params: {
+            context: {
+                mockedUserId: 42,
+            },
+            message_content: "test",
+            uuid: 'channel20uuid',
+        },
+    }));
+    assert.containsN(
+        document.body,
+        '.o_Message',
+        2,
+        "should display 2 messages (the transient & the received message), after posting a command"
+    );
+    assert.containsOnce(
+        document.body,
+        '.o_MessageList_separatorNewMessages',
+        "separator should be shown as a message has been received"
+    );
+    assert.containsOnce(
+        document.body,
+        `.o_Message[data-message-local-id="${
+            this.env.models['mail.message'].find(m => m.isTransient).localId
+        }"] + .o_MessageList_separatorNewMessages`,
+        "separator should be shown just after transient message"
+    );
+});
+
+QUnit.test('composer should be focused automatically after clicking on the send button [REQUIRE FOCUS]', async function (assert) {
+    assert.expect(1);
+
+    this.data['mail.channel'].records.push({id: 20,});
+    await this.start();
+    const thread = this.env.models['mail.thread'].findFromIdentifyingData({
+        id: 20,
+        model: 'mail.channel'
+    });
+    const threadViewer = this.env.models['mail.thread_viewer'].create({
+        hasThreadView: true,
+        thread: [['link', thread]],
+    });
+    await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true });
+    document.querySelector('.o_ComposerTextInput_textarea').focus();
+    await afterNextRender(() => document.execCommand('insertText', false, "Dummy Message"));
+    await afterNextRender(() => {
+        document.querySelector('.o_Composer_buttonSend').click();
+    });
+    assert.hasClass(
+        document.querySelector('.o_Composer'),
+        'o-focused',
+        "composer should be focused automatically after clicking on the send button"
+    );
+});
+
+});
+});
+});
+
+});
-- 
cgit v1.2.3