diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js
index bafaee60a9a..1f5d054f418 100644
--- a/addons/mail/static/src/components/chatter/chatter.js
+++ b/addons/mail/static/src/components/chatter/chatter.js
@@ -2,6 +2,7 @@
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 import { useUpdate } from '@mail/component_hooks/use_update/use_update';
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model/use_ref_to_model';
 
 const { Component } = owl;
 const { useRef } = owl.hooks;
@@ -14,6 +15,7 @@ export class Chatter extends Component {
     constructor(...args) {
         super(...args);
         useUpdate({ func: () => this._update() });
+        useRefToModel({ fieldName: 'threadRef', modelName: 'mail.chatter', propNameAsRecordLocalId: 'chatterLocalId', refName: 'thread' });
         /**
          * Reference of the composer. Useful to focus it.
          */
@@ -84,28 +86,6 @@ export class Chatter extends Component {
         }
     }
 
-    //--------------------------------------------------------------------------
-    // 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, {
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index d9cf20b478e..84435574bf0 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -19,12 +19,12 @@
                             isCompact="false"
                             isExpandable="true"
                             textInputSendShortcuts="['ctrl-enter', 'meta-enter']"
-                            t-on-o-message-posted="_onComposerMessagePosted"
+                            t-on-o-message-posted="chatter.onComposerMessagePosted"
                             t-ref="composer"
                         />
                     </t>
                 </div>
-                <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll" t-ref="scrollPanel">
+                <div class="o_Chatter_scrollPanel" t-on-scroll="chatter.onScrollScrollPanel" t-ref="scrollPanel">
                     <t t-if="chatter.isAttachmentBoxVisible">
                         <AttachmentBox
                             class="o_Chatter_attachmentBox"
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
index 0d70fd0c9f3..0bd835ebcb3 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js
@@ -1,11 +1,20 @@
 /** @odoo-module **/
 
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
+import { useComponentToModel } from '@mail/component_hooks/use_component_to_model/use_component_to_model';
 
 const { Component } = owl;
 
 export class ChatterTopbar extends Component {
 
+    /**
+     * @override
+     */
+    setup() {
+        super.setup();
+        useComponentToModel({ fieldName: 'componentChatterTopbar', modelName: 'mail.chatter', propNameAsRecordLocalId: 'chatterLocalId' });
+    }
+
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -17,86 +26,6 @@ export class ChatterTopbar extends Component {
         return this.messaging && this.messaging.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, {
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 7e555d938fd..330be2525ca 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -15,7 +15,7 @@
                             t-att-disabled="chatter.isDisabled"
                             title="Send a message"
                             data-hotkey="m"
-                            t-on-click="_onClickSendMessage"
+                            t-on-click="chatter.onClickSendMessage"
                         >
                             Send message
                         </button>
@@ -26,7 +26,7 @@
                                 'o-bordered': chatter.hasExternalBorder,
                             }"
                             t-att-disabled="chatter.isDisabled"
-                            t-on-click="_onClickLogNote"
+                            t-on-click="chatter.onClickLogNote"
                             title="Log a note"
                             data-hotkey="shift+m"
                         >
@@ -34,14 +34,14 @@
                         </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" title="Schedule an activity" data-hotkey="shift+a">
+                        <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonScheduleActivity" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickScheduleActivity" title="Schedule an activity" data-hotkey="shift+a">
                             <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">
+                            <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments" type="button" t-att-disabled="chatter.isDisabled" t-on-click="chatter.onClickButtonAttachments">
                                 <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"/>
@@ -67,7 +67,7 @@
                         </div>
                 </div>
                 <t t-if="chatter.hasTopbarCloseButton">
-                    <div class="o_ChatterTopbar_buttonClose" title="Close" t-on-click="_onClickClose">
+                    <div class="o_ChatterTopbar_buttonClose" title="Close" t-on-click="chatter.onClickChatterTopbarClose">
                         <i class="fa fa-times"/>
                     </div>
                 </t>
diff --git a/addons/mail/static/src/models/chatter/chatter.js b/addons/mail/static/src/models/chatter/chatter.js
index c8c83ce1ce4..995c13c4279 100644
--- a/addons/mail/static/src/models/chatter/chatter.js
+++ b/addons/mail/static/src/models/chatter/chatter.js
@@ -31,6 +31,13 @@ function factory(dependencies) {
         _created() {
             // Bind necessary until OWL supports arrow function in handlers: https://github.com/odoo/owl/issues/876
             this.onClickActivityBoxTitle = this.onClickActivityBoxTitle.bind(this);
+            this.onClickButtonAttachments = this.onClickButtonAttachments.bind(this);
+            this.onClickChatterTopbarClose = this.onClickChatterTopbarClose.bind(this);
+            this.onClickLogNote = this.onClickLogNote.bind(this);
+            this.onClickScheduleActivity = this.onClickScheduleActivity.bind(this);
+            this.onClickSendMessage = this.onClickSendMessage.bind(this);
+            this.onComposerMessagePosted = this.onComposerMessagePosted.bind(this);
+            this.onScrollScrollPanel = this.onScrollScrollPanel.bind(this);
         }
 
         /**
@@ -51,11 +58,116 @@ function factory(dependencies) {
 
         /**
          * Handles click on activity box title.
+         *
+         * @param {MouseEvent} ev
          */
-        onClickActivityBoxTitle() {
+        onClickActivityBoxTitle(ev) {
             this.update({ isActivityBoxVisible: !this.isActivityBoxVisible });
         }
 
+        /**
+         * Handles click on the attachments button.
+         *
+         * @param {MouseEvent} ev
+         */
+        onClickButtonAttachments(ev) {
+            this.update({ isAttachmentBoxVisible: !this.isAttachmentBoxVisible });
+        }
+
+        /**
+         * Handles click on top bar close button.
+         *
+         * @param {MouseEvent} ev
+         */
+        onClickChatterTopbarClose(ev) {
+            this.componentChatterTopbar.trigger('o-close-chatter');
+        }
+
+        /**
+         * Handles click on "log note" button.
+         *
+         * @param {MouseEvent} ev
+         */
+        onClickLogNote() {
+            if (!this.composer) {
+                return;
+            }
+            if (this.isComposerVisible && this.composer.isLog) {
+                this.update({ isComposerVisible: false });
+            } else {
+                this.showLogNote();
+            }
+        }
+
+        /**
+         * Handles click on "schedule activity" button.
+         *
+         * @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.thread.id,
+                    default_res_model: this.thread.model,
+                },
+                res_id: false,
+            };
+            return this.env.bus.trigger('do-action', {
+                action,
+                options: {
+                    on_close: () => {
+                        if (!this.componentChatterTopbar) {
+                            return;
+                        }
+                        this.componentChatterTopbar.trigger('reload', { keepChanges: true });
+                    },
+                },
+            });
+        }
+
+        /**
+         * Handles click on "send message" button.
+         *
+         * @param {MouseEvent} ev
+         */
+        onClickSendMessage(ev) {
+            if (!this.composer) {
+                return;
+            }
+            if (this.isComposerVisible && !this.composer.isLog) {
+                this.update({ isComposerVisible: false });
+            } else {
+                this.showSendMessage();
+            }
+        }
+
+        /**
+         * Handles message posted on composer.
+         *
+         * @param {Event} ev
+         */
+        onComposerMessagePosted(ev) {
+            this.update({ isComposerVisible: false });
+        }
+
+        /**
+         * Handles scroll on this scroll panel.
+         *
+         * @param {Event} ev
+         */
+        onScrollScrollPanel(ev) {
+            if (!this.threadRef.comp) {
+                return;
+            }
+            this.threadRef.comp.onScroll(ev);
+        }
+
         async refresh() {
             if (this.hasActivities) {
                 this.thread.refreshActivities();
@@ -207,6 +319,10 @@ function factory(dependencies) {
         composer: many2one('mail.composer', {
             related: 'thread.composer',
         }),
+        /**
+         * States the OWL component of this chatter top bar.
+         */
+        componentChatterTopbar: attr(),
         context: attr({
             default: {},
         }),
@@ -293,6 +409,10 @@ function factory(dependencies) {
          * Determines the model of the thread that will be displayed by `this`.
          */
         threadModel: attr(),
+        /**
+         * States the OWL ref of the "thread" (ThreadView) of this chatter.
+         */
+        threadRef: attr(),
         /**
          * States the `mail.thread_view` displaying `this.thread`.
          */