chore: Replace Thumbnail with Avatar (#12119)

app/javascript/widget/components/AgentMessage.vue

@@ -6,7 +6,7 @@ import { messageStamp } from 'shared/helpers/timeHelper';
 import ImageBubble from 'widget/components/ImageBubble.vue';
 import VideoBubble from 'widget/components/VideoBubble.vue';
 import FileBubble from 'widget/components/FileBubble.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import configMixin from '../mixins/configMixin';
 import messageMixin from '../mixins/messageMixin';
@@ -21,7 +21,7 @@ export default {
     AgentMessageBubble,
     ImageBubble,
     VideoBubble,
-    Thumbnail,
+    Avatar,
     UserMessage,
     FileBubble,
     MessageReplyButton,
@@ -165,12 +165,15 @@ export default {
   >
     <div v-if="!isASubmittedForm" class="agent-message">
       <div class="avatar-wrap">
-        <Thumbnail
-          v-if="message.showAvatar || hasRecordedResponse"
-          :src="avatarUrl"
-          size="24px"
-          :username="agentName"
-        />
+        <div class="user-thumbnail-box">
+          <Avatar
+            v-if="message.showAvatar || hasRecordedResponse"
+            :src="avatarUrl"
+            :size="24"
+            :name="agentName"
+            rounded-full
+          />
+        </div>
       </div>
       <div class="message-wrap">
         <div v-if="hasReplyTo" class="flex mt-2 mb-1 text-xs">

app/javascript/widget/components/GroupedAvatars.vue

@@ -1,5 +1,5 @@
 <script setup>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import { defineProps, computed } from 'vue';
 
 const props = defineProps({
@@ -24,11 +24,12 @@ const usersToDisplay = computed(() => props.users.slice(0, props.limit));
       :class="index ? 'ltr:-ml-4 rtl:-mr-4' : ''"
       class="inline-block rounded-full text-white shadow-solid"
     >
-      <Thumbnail
-        size="36px"
-        :username="user.name"
+      <Avatar
+        :name="user.name"
         :src="user.avatar_url"
-        has-border
+        :size="36"
+        class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background"
+        rounded-full
       />
     </span>
   </div>

app/javascript/widget/components/UnreadMessage.vue

@@ -1,6 +1,6 @@
 <script>
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import configMixin from '../mixins/configMixin';
 import { isEmptyObject } from 'widget/helpers/utils';
 import {
@@ -11,7 +11,7 @@ import { emitter } from 'shared/helpers/mitt';
 
 export default {
   name: 'UnreadMessage',
-  components: { Thumbnail },
+  components: { Avatar },
   mixins: [configMixin],
   props: {
     message: {
@@ -95,11 +95,12 @@ export default {
   <div class="chat-bubble-wrap">
     <button class="chat-bubble agent bg-white" @click="onClickMessage">
       <div v-if="showSender" class="row--agent-block">
-        <Thumbnail
+        <Avatar
           :src="avatarUrl"
-          size="20px"
-          :username="agentName"
+          :size="20"
+          :name="agentName"
           :status="availabilityStatus"
+          rounded-full
         />
         <span v-dompurify-html="agentName" class="agent--name" />
         <span v-dompurify-html="companyName" class="company--name" />