[FIX] website_livechat: fix visitor banner avatar

Before this PR, the visitor id was passed to retrieve the
partner avatar which leads to wrong avatar being displayed
in the banner. This PR fixes this issue and adapt the avatar
shape from `rounded-circle` to `rounded` since it was not
adapter after the milk update.

closes odoo/odoo#126969

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

addons/website_livechat/models/discuss_channel.py

@@ -33,10 +33,11 @@ class DiscussChannel(models.Model):
         for channel in self.filtered('livechat_visitor_id'):
             visitor = channel.livechat_visitor_id
             try:
+                country_id = visitor.partner_id.country_id or visitor.country_id
                 channel_infos_dict[channel.id]['visitor'] = {
-                    'display_name': visitor.display_name,
-                    'country_code': visitor.country_id.code.lower() if visitor.country_id else False,
-                    'country_id': visitor.country_id.id,
+                    'display_name': visitor.partner_id.name or visitor.partner_id.display_name or visitor.display_name,
+                    'country_code': country_id.code.lower() if country_id else False,
+                    'country_id': country_id.id,
                     'id': visitor.id,
                     'is_connected': visitor.is_connected,
                     'history': self.sudo()._get_visitor_history(visitor),

addons/website_livechat/static/src/core/persona_model_patch.js

@@ -5,15 +5,10 @@ import { patch } from "@web/core/utils/patch";
 
 patch(Persona.prototype, "website_livechat", {
     get countryFlagUrl() {
-        const country = this.partner?.country ?? this.country;
-        return country
-            ? `/base/static/img/country_flags/${encodeURIComponent(country.code.toLowerCase())}.png`
+        return this.country
+            ? `/base/static/img/country_flags/${encodeURIComponent(
+                  this.country.code.toLowerCase()
+              )}.png`
             : undefined;
     },
-    get nameOrDisplayName() {
-        if (this.partner) {
-            return this.partner.nameOrDisplayName;
-        }
-        return this._super();
-    },
 });

addons/website_livechat/static/src/core/persona_service_patch.js

@@ -13,17 +13,11 @@ patch(PersonaService.prototype, "website_livechat", {
             persona.langName = data.lang_name ?? persona.langName;
             persona.name = data.display_name ?? persona.name;
             persona.websiteName = data.website_name ?? persona.websiteName;
-            if (data.country_id) {
-                persona.country = persona.country ?? {};
-                persona.country.id = data.country_id;
-                persona.country.code = data.country_code ?? persona.country.code;
-            }
-            if (data.partner_id) {
-                persona.partner = this.insert({
-                    id: data.partner_id,
-                    type: "partner",
-                });
-            }
+        }
+        if (data.country_id) {
+            persona.country = persona.country ?? {};
+            persona.country.id = data.country_id;
+            persona.country.code = data.country_code ?? persona.country.code;
         }
     },
 });

addons/website_livechat/static/src/core/thread_service_patch.js

@@ -20,9 +20,9 @@ patch(ThreadService.prototype, "website_livechat", {
      */
     avatarUrl(persona, thread) {
         if (persona?.type === "visitor" && thread?.id) {
-            return persona.partner
+            return persona.partner_id
                 ? `/discuss/channel/${encodeURIComponent(thread.id)}/partner/${encodeURIComponent(
-                      persona.id
+                      persona.partner_id
                   )}/avatar_128`
                 : DEFAULT_AVATAR;
         }

addons/website_livechat/static/src/core_ui/thread_patch.xml

@@ -5,7 +5,7 @@
             <t t-set="visitor" t-value="props.thread.visitor"/>
             <div t-if="visitor and !env.inChatWindow" class="o-website_livechat-VisitorBanner py-4 px-2 d-flex border-bottom">
                 <div class="o-website_livechat-VisitorBanner-sidebar me-2 d-flex justify-content-center">
-                    <img class="rounded-circle o-website_livechat-VisitorBanner-avatar" t-att-src="threadService.avatarUrl(visitor, props.thread)" alt="Avatar"/>
+                    <img class="rounded o-website_livechat-VisitorBanner-avatar" t-att-src="threadService.avatarUrl(visitor, props.thread)" alt="Avatar"/>
                 </div>
                 <div>
                     <div class="d-flex align-items-baseline">

addons/website_livechat/static/tests/helpers/mock_server/models/discuss_channel.js

@@ -19,13 +19,16 @@ patch(MockServer.prototype, "website_livechat/models/discuss_channel", {
                 const visitor = this.getRecords("website.visitor", [
                     ["id", "=", channel.livechat_visitor_id],
                 ])[0];
+                const partner = this.getRecords("res.partner", [
+                    ["id", "=", visitor.partner_id],
+                ])[0];
                 const country = this.getRecords("res.country", [
                     ["id", "=", visitor.country_id],
                 ])[0];
                 channelInfo.visitor = {
                     country_code: country && country.code,
                     country_id: country && country.id,
-                    display_name: visitor.display_name,
+                    display_name: partner?.name ?? partner?.display_name ?? visitor.display_name,
                     history: visitor.history, // TODO should be computed
                     id: visitor.id,
                     is_connected: visitor.is_connected,