diff --git a/addons/website_livechat/static/src/components/thread_view/thread_view.xml b/addons/website_livechat/static/src/components/thread_view/thread_view.xml
index 1b34415b48f..81c12df97d4 100644
--- a/addons/website_livechat/static/src/components/thread_view/thread_view.xml
+++ b/addons/website_livechat/static/src/components/thread_view/thread_view.xml
@@ -2,11 +2,8 @@
 <templates xml:space="preserve">
     <t t-inherit="mail.ThreadView" t-inherit-mode="extension">
         <xpath expr="//t[@t-if='threadView.topbar']" position="after">
-            <t t-if="threadView.hasVisitorBanner">
-                <VisitorBanner
-                    className="'border-bottom'"
-                    visitor="threadView.thread.visitor"
-                />
+            <t t-if="threadView.visitorBanner">
+                <VisitorBanner className="'border-bottom'" record="threadView.visitorBanner"/>
             </t>
         </xpath>
     </t>
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js
index 6253cea7259..139bf761923 100644
--- a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.js
@@ -4,26 +4,20 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
 const { Component } = owl;
 
-class VisitorBanner extends Component {
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
+export class VisitorBanner extends Component {
 
     /**
-     * @returns {Visitor}
+     * @returns {VisitorBannerView}
      */
-    get visitor() {
-        return this.props.visitor;
+    get visitorBannerView() {
+        return this.props.record;
     }
 
 }
 
 Object.assign(VisitorBanner, {
-    props: { visitor: Object },
+    props: { record: Object },
     template: 'website_livechat.VisitorBanner',
 });
 
 registerMessagingComponent(VisitorBanner);
-
-export default VisitorBanner;
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
index 704d88333ec..46c81f57fe8 100644
--- a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
@@ -2,38 +2,36 @@
 <templates xml:space="preserve">
 
     <t t-name="website_livechat.VisitorBanner" owl="1">
-        <t t-if="visitor">
-            <div class="o_VisitorBanner" t-attf-class="{{ className }}" t-ref="root">
-                <div class="o_VisitorBanner_sidebar">
-                    <div class="o_VisitorBanner_avatarContainer">
-                        <img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitor.avatarUrl" alt="Avatar"/>
-                        <t t-if="visitor.is_connected">
-                            <i class="o_VisitorBanner_onlineStatusIcon fa fa-circle" title="Online" role="img" aria-label="Visitor is online"/>
-                        </t>
-                    </div>
-                </div>
-                <div class="o_VisitorBanner_content">
-                    <t t-if="visitor.country">
-                        <img class="o_VisitorBanner_country o_country_flag" t-att-src="visitor.country.flagUrl" t-att-alt="visitor.country.code or visitor.country.name"/>
+        <div class="o_VisitorBanner" t-attf-class="{{ className }}" t-ref="root">
+            <div class="o_VisitorBanner_sidebar">
+                <div class="o_VisitorBanner_avatarContainer">
+                    <img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitorBannerView.visitor.avatarUrl" alt="Avatar"/>
+                    <t t-if="visitorBannerView.visitor.is_connected">
+                        <i class="o_VisitorBanner_onlineStatusIcon fa fa-circle" title="Online" role="img" aria-label="Visitor is online"/>
                     </t>
-                    <span class="o_VisitorBanner_visitor" t-esc="visitor.nameOrDisplayName"/>
-                    <span class="o_VisitorBanner_language">
-                        <i class="o_VisitorBanner_languageIcon fa fa-comment-o" aria-label="Lang"/>
-                        <t t-esc="visitor.lang_name"/>
-                    </span>
-                    <t t-if="visitor.website_name">
-                        <span class="o_VisitorBanner_website">
-                            <i class="o_VisitorBanner_websiteIcon fa fa-globe" aria-label="Website"/>
-                            <span t-esc="visitor.website_name"/>
-                        </span>
-                    </t>
-                    <div class="o_VisitorBanner_history">
-                        <i class="o_VisitorBanner_historyIcon fa fa-history" aria-label="History"/>
-                        <span t-esc="visitor.history"/>
-                    </div>
                 </div>
             </div>
-        </t>
+            <div class="o_VisitorBanner_content">
+                <t t-if="visitorBannerView.visitor.country">
+                    <img class="o_VisitorBanner_country o_country_flag" t-att-src="visitorBannerView.visitor.country.flagUrl" t-att-alt="visitorBannerView.visitor.country.code or visitorBannerView.visitor.country.name"/>
+                </t>
+                <span class="o_VisitorBanner_visitor" t-esc="visitorBannerView.visitor.nameOrDisplayName"/>
+                <span class="o_VisitorBanner_language">
+                    <i class="o_VisitorBanner_languageIcon fa fa-comment-o" aria-label="Lang"/>
+                    <t t-esc="visitorBannerView.visitor.lang_name"/>
+                </span>
+                <t t-if="visitorBannerView.visitor.website_name">
+                    <span class="o_VisitorBanner_website">
+                        <i class="o_VisitorBanner_websiteIcon fa fa-globe" aria-label="Website"/>
+                        <span t-esc="visitorBannerView.visitor.website_name"/>
+                    </span>
+                </t>
+                <div class="o_VisitorBanner_history">
+                    <i class="o_VisitorBanner_historyIcon fa fa-history" aria-label="History"/>
+                    <span t-esc="visitorBannerView.visitor.history"/>
+                </div>
+            </div>
+        </div>
     </t>
 
 </templates>
diff --git a/addons/website_livechat/static/src/models/thread_view.js b/addons/website_livechat/static/src/models/thread_view.js
index 366021881fe..edd39df1bfa 100644
--- a/addons/website_livechat/static/src/models/thread_view.js
+++ b/addons/website_livechat/static/src/models/thread_view.js
@@ -1,18 +1,20 @@
 /** @odoo-module **/
 
 import { registerPatch } from '@mail/model/model_core';
-import { attr } from '@mail/model/model_field';
+import { one } from '@mail/model/model_field';
+import { clear } from '@mail/model/model_field_command';
 
 registerPatch({
     name: 'ThreadView',
     fields: {
-        /**
-         * Determines whether visitor banner should be displayed.
-         */
-        hasVisitorBanner: attr({
+        visitorBanner: one('VisitorBannerView', {
             compute() {
-                return Boolean(this.thread && this.thread.visitor && this.threadViewer && this.threadViewer.discuss);
+                if (this.thread && this.thread.visitor && this.threadViewer && this.threadViewer.discuss) {
+                    return {};
+                }
+                return clear();
             },
+            inverse: 'owner',
         }),
     },
 });
diff --git a/addons/website_livechat/static/src/models/visitor_banner_view.js b/addons/website_livechat/static/src/models/visitor_banner_view.js
new file mode 100644
index 00000000000..d37b24203ce
--- /dev/null
+++ b/addons/website_livechat/static/src/models/visitor_banner_view.js
@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { registerModel } from '@mail/model/model_core';
+import { one } from '@mail/model/model_field';
+
+registerModel({
+    name: 'VisitorBannerView',
+    fields: {
+        owner: one('ThreadView', {
+            identifying: true,
+            inverse: 'visitorBanner',
+        }),
+        visitor: one('Visitor', {
+            compute() {
+                return this.owner.thread.visitor;
+            },
+            required: true,
+        }),
+    },
+});