chore: Replace Thumbnail with Avatar (#12119)

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -6,7 +6,7 @@ import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
-import Thumbnail from '../Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
@@ -105,12 +105,13 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         :back-url="backButtonUrl"
         class="ltr:mr-2 rtl:ml-2"
       />
-      <Thumbnail
+      <Avatar
+        :name="currentContact.name"
         :src="currentContact.thumbnail"
-        :username="currentContact.name"
+        :size="32"
         :status="currentContact.availability_status"
-        size="32px"
-        class="flex-shrink-0"
+        hide-offline-status
+        rounded-full
       />
       <div
         class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"

app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue

@@ -10,7 +10,7 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { downloadFile } from '@chatwoot/utils';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
 const props = defineProps({
@@ -186,10 +186,12 @@ onMounted(() => {
             v-if="senderDetails"
             class="flex items-center min-w-[15rem] shrink-0"
           >
-            <Thumbnail
+            <Avatar
               v-if="senderDetails.avatar"
-              :username="senderDetails.name"
+              :name="senderDetails.name"
               :src="senderDetails.avatar"
+              :size="40"
+              rounded-full
               class="flex-shrink-0"
             />
             <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">

app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue

@@ -1,7 +1,7 @@
 <script>
 // components
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Avatar from '../../Avatar.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 // composables
 import { useAI } from 'dashboard/composables/useAI';
@@ -226,18 +226,16 @@ export default {
         </div>
       </div>
       <div class="sender--info has-tooltip" data-original-title="null">
-        <woot-thumbnail
+        <Avatar
           v-tooltip.top="{
             content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
             delay: { show: 600, hide: 0 },
             hideOnClick: true,
           }"
-          size="16px"
-        >
-          <Avatar class="user-thumbnail thumbnail-rounded">
-            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
-          </Avatar>
-        </woot-thumbnail>
+          :size="16"
+          name="chatwoot-ai"
+          icon-name="i-lucide-sparkles"
+        />
       </div>
     </div>
   </li>
@@ -268,11 +266,6 @@ export default {
     }
   }
 
-  .chatwoot-ai-icon {
-    height: 0.75rem;
-    width: 0.75rem;
-  }
-
   .label-suggestion--title {
     @apply text-n-slate-11 mt-0.5 text-xxs;
   }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,12 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    Thumbnail,
+    Avatar,
     Spinner,
     NextButton,
   },
@@ -123,11 +123,13 @@ export default {
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <Thumbnail
+              <Avatar
+                :name="agent.name"
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
-                :username="agent.name"
-                size="22px"
+                :size="22"
+                hide-offline-status
+                rounded-full
               />
               <span class="my-0 text-n-slate-12">
                 {{ agent.name }}