chore: Replace Thumbnail with Avatar (#12119)

2025-08-11 15:47:17 +05:30
parent fcc6e2b8b2
commit d908c880d2
38 changed files with 297 additions and 657 deletions
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/app/javascript/dashboard/components/widgets/Avatar.vue
@@ -1,55 +0,0 @@
-<script>
-export default {
-  name: 'Avatar',
-  props: {
-    username: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: Number,
-      default: 40,
-    },
-  },
-  computed: {
-    style() {
-      return {
-        fontSize: `${Math.floor(this.size / 2.5)}px`,
-      };
-    },
-    userInitial() {
-      const parts = this.username.split(/[ -]/);
-      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
-
-      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
-        initials = initials.replace(/[a-z]+/g, '');
-      }
-      initials = initials.substring(0, 2).toUpperCase();
-
-      return initials;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="avatar-container" :style="style" aria-hidden="true">
-    <slot>{{ userInitial }}</slot>
-  </div>
-</template>
-
-<style scoped>
-@tailwind components;
-@layer components {
-  .avatar-color {
-    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
-  }
-
-  .dark-avatar-color {
-    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
-  }
-}
-.avatar-container {
-  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-n-blue-text;
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js
@@ -1,48 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Avatar from './Avatar.vue';
-import Thumbnail from './Thumbnail.vue';
-
-describe('Thumbnail.vue', () => {
-  it('should render the agent thumbnail if valid image is passed', () => {
-    const wrapper = mount(Thumbnail, {
-      propsData: {
-        src: 'https://some_valid_url.com',
-      },
-      data() {
-        return {
-          hasImageLoaded: true,
-          imgError: false,
-        };
-      },
-    });
-    expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
-    const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.isVisible()).toBe(false);
-  });
-
-  it('should render the avatar component if invalid image is passed', () => {
-    const wrapper = mount(Thumbnail, {
-      propsData: {
-        src: 'https://some_invalid_url.com',
-      },
-      data() {
-        return {
-          hasImageLoaded: true,
-          imgError: true,
-        };
-      },
-    });
-    expect(wrapper.find('#image').exists()).toBe(false);
-    const avatarComponent = wrapper.findComponent(Avatar);
-    expect(avatarComponent.isVisible()).toBe(true);
-  });
-
-  it('should the initial of the name if no image is passed', () => {
-    const wrapper = mount(Avatar, {
-      propsData: {
-        username: 'Angie Rojas',
-      },
-    });
-    expect(wrapper.find('div').text()).toBe('AR');
-  });
-});
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue
@@ -1,224 +0,0 @@
-<script>
-/**
- * Thumbnail Component
- * Src - source for round image
- * Size - Size of the thumbnail
- * Badge - Chat source indication { fb / telegram }
- * Username - Username for avatar
- */
-import Avatar from './Avatar.vue';
-import { removeEmoji } from 'shared/helpers/emoji';
-
-export default {
-  components: {
-    Avatar,
-  },
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String,
-      default: '40px',
-    },
-    badge: {
-      type: String,
-      default: '',
-    },
-    username: {
-      type: String,
-      default: '',
-    },
-    status: {
-      type: String,
-      default: '',
-    },
-    hasBorder: {
-      type: Boolean,
-      default: false,
-    },
-    shouldShowStatusAlways: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    variant: {
-      type: String,
-      default: 'circle',
-    },
-  },
-  data() {
-    return {
-      hasImageLoaded: false,
-      imgError: false,
-    };
-  },
-  computed: {
-    userNameWithoutEmoji() {
-      return removeEmoji(this.username);
-    },
-    showStatusIndicator() {
-      if (this.shouldShowStatusAlways) return true;
-      return this.status === 'online' || this.status === 'busy';
-    },
-    avatarSize() {
-      return Number(this.size.replace(/\D+/g, ''));
-    },
-    badgeSrc() {
-      return {
-        instagram_direct_message: 'instagram-dm',
-        facebook: 'messenger',
-        'twitter-tweet': 'twitter-tweet',
-        'twitter-dm': 'twitter-dm',
-        whatsapp: 'whatsapp',
-        sms: 'sms',
-        'Channel::Line': 'line',
-        'Channel::Telegram': 'telegram',
-        'Channel::WebWidget': '',
-      }[this.badge];
-    },
-    badgeStyle() {
-      const size = Math.floor(this.avatarSize / 3);
-      const badgeSize = `${size + 2}px`;
-      const borderRadius = `${size / 2}px`;
-      return { width: badgeSize, height: badgeSize, borderRadius };
-    },
-    statusStyle() {
-      const statusSize = `${this.avatarSize / 4}px`;
-      return { width: statusSize, height: statusSize };
-    },
-    thumbnailClass() {
-      const className = this.hasBorder
-        ? 'border border-solid border-white dark:border-n-weak'
-        : '';
-      const variant =
-        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
-      return `user-thumbnail ${className} ${variant}`;
-    },
-    thumbnailBoxClass() {
-      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
-      return `user-thumbnail-box ${boxClass}`;
-    },
-    shouldShowImage() {
-      if (!this.src) {
-        return false;
-      }
-      if (this.hasImageLoaded) {
-        return !this.imgError;
-      }
-      return false;
-    },
-  },
-  watch: {
-    src(value, oldValue) {
-      if (value !== oldValue && this.imgError) {
-        this.imgError = false;
-      }
-    },
-  },
-  methods: {
-    onImgError() {
-      this.imgError = true;
-    },
-    onImgLoad() {
-      this.hasImageLoaded = true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :class="thumbnailBoxClass"
-    :style="{ height: size, width: size }"
-    :title="title"
-  >
-    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
-    <slot>
-      <img
-        v-show="shouldShowImage"
-        :src="src"
-        draggable="false"
-        :class="thumbnailClass"
-        @load="onImgLoad"
-        @error="onImgError"
-      />
-      <Avatar
-        v-show="!shouldShowImage"
-        :username="userNameWithoutEmoji"
-        :class="thumbnailClass"
-        :size="avatarSize"
-      />
-    </slot>
-    <img
-      v-if="badgeSrc"
-      class="source-badge z-20"
-      :style="badgeStyle"
-      :src="`/integrations/channels/badges/${badgeSrc}.png`"
-      alt="Badge"
-    />
-    <div
-      v-if="showStatusIndicator"
-      class="z-20"
-      :class="`source-badge user-online-status user-online-status--${status}`"
-      :style="statusStyle"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.user-thumbnail-box {
-  flex: 0 0 auto;
-  max-width: 100%;
-  position: relative;
-
-  &.is-rounded {
-    border-radius: 50%;
-  }
-
-  .user-thumbnail {
-    border-radius: 50%;
-    &.thumbnail-square {
-      border-radius: 0.5625rem;
-    }
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
-    object-fit: cover;
-    vertical-align: initial;
-  }
-
-  .source-badge {
-    border-radius: 0.1875rem;
-    bottom: -0.125rem;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    position: absolute;
-    right: 0;
-    @apply bg-n-background p-0.5 size-3;
-  }
-
-  .user-online-status {
-    @apply bottom-0.5 rounded-full;
-
-    &:after {
-      content: ' ';
-    }
-  }
-
-  .user-online-status--online {
-    @apply bg-n-teal-10;
-  }
-
-  .user-online-status--busy {
-    @apply bg-n-amber-10;
-  }
-
-  .user-online-status--offline {
-    @apply bg-n-slate-10;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -1,78 +1,69 @@
-<script>
-import Thumbnail from './Thumbnail.vue';
+<script setup>
+import { computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';

-export default {
-  components: {
-    Thumbnail,
+const props = defineProps({
+  usersList: {
+    type: Array,
+    default: () => [],
  },
-  props: {
-    usersList: {
-      type: Array,
-      default: () => [],
-    },
-    size: {
-      type: String,
-      default: '24px',
-    },
-    showMoreThumbnailsCount: {
-      type: Boolean,
-      default: false,
-    },
-    moreThumbnailsText: {
-      type: String,
-      default: '',
-    },
-    gap: {
-      type: String,
-      default: 'normal',
-      validator(value) {
-        // The value must match one of these strings
-        return ['normal', '', 'tight'].includes(value);
-      },
+  size: {
+    type: Number,
+    default: 24,
+  },
+  showMoreThumbnailsCount: {
+    type: Boolean,
+    default: false,
+  },
+  moreThumbnailsText: {
+    type: String,
+    default: '',
+  },
+  gap: {
+    type: String,
+    default: 'normal',
+    validator(value) {
+      // The value must match one of these strings
+      return ['normal', 'tight'].includes(value);
    },
  },
-};
+});
+
+const gapClass = computed(() => {
+  if (props.gap === 'tight') {
+    return 'ltr:[&:not(:first-child)]:-ml-2 rtl:[&:not(:first-child)]:-mr-2';
+  }
+  return 'ltr:[&:not(:first-child)]:-ml-1 rtl:[&:not(:first-child)]:-mr-1';
+});
+
+const moreThumbnailsClass = computed(() => {
+  if (props.gap === 'tight') {
+    return 'ltr:-ml-2 rtl:-mr-2';
+  }
+  return 'ltr:-ml-1 rtl:-mr-1';
+});
 </script>

 <template>
-  <div class="overlapping-thumbnails">
-    <Thumbnail
+  <div class="flex">
+    <Avatar
      v-for="user in usersList"
      :key="user.id"
      v-tooltip="user.name"
      :title="user.name"
      :src="user.thumbnail"
-      :username="user.name"
-      has-border
+      :name="user.name"
      :size="size"
-      :class="`overlapping-thumbnail gap-${gap}`"
+      class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background [&>span]:shadow"
+      :class="gapClass"
+      rounded-full
    />
-    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
+    <span
+      v-if="showMoreThumbnailsCount"
+      class="text-n-slate-11 bg-n-slate-4 outline outline-1 outline-n-background text-xs font-medium rounded-full px-2 inline-flex items-center shadow relative"
+      :class="moreThumbnailsClass"
+    >
      {{ moreThumbnailsText }}
    </span>
  </div>
 </template>
-
-<style lang="scss" scoped>
-.overlapping-thumbnails {
-  display: flex;
-}
-
-.overlapping-thumbnail {
-  position: relative;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-
-  &:not(:first-child) {
-    margin-left: -0.25rem;
-  }
-
-  .gap-tight {
-    margin-left: -0.5rem;
-  }
-}
-
-.thumbnail-more-text {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  @apply text-n-slate-11 bg-n-slate-4 border border-n-weak text-xs font-medium rounded-full px-2 ltr:-ml-2 rtl:-mr-2 inline-flex items-center relative;
-}
-</style>
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import Avatar from 'next/avatar/Avatar.vue';

 defineProps({
  user: {
@@ -7,8 +7,8 @@ defineProps({
    default: () => ({}),
  },
  size: {
-    type: String,
-    default: '20px',
+    type: Number,
+    default: 20,
  },
  textClass: {
    type: String,
@@ -19,11 +19,13 @@ defineProps({

 <template>
  <div class="flex items-center gap-1.5 text-left">
-    <Thumbnail
+    <Avatar
      :src="user.thumbnail"
      :size="size"
-      :username="user.name"
+      :name="user.name"
      :status="user.availability_status"
+      hide-offline-status
+      rounded-full
    />
    <span class="my-0 truncate text-capitalize" :class="textClass">
      {{ user.name }}
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/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"
--- a/app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+++ b/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">
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/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;
  }
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/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 }}
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -1,76 +0,0 @@
-<script>
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    NextButton,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-    usernameAvatar: {
-      type: String,
-      default: '',
-    },
-    deleteAvatar: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['onAvatarSelect', 'onAvatarDelete'],
-  watch: {},
-  methods: {
-    handleImageUpload(event) {
-      const [file] = event.target.files;
-
-      this.$emit('onAvatarSelect', {
-        file,
-        url: file ? URL.createObjectURL(file) : null,
-      });
-    },
-    onAvatarDelete() {
-      this.$refs.file.value = null;
-      this.$emit('onAvatarDelete');
-    },
-  },
-};
-</script>
-
-<template>
-  <div>
-    <label>
-      <span v-if="label">{{ label }}</span>
-    </label>
-    <woot-thumbnail
-      v-if="src"
-      size="80px"
-      :src="src"
-      :username="usernameAvatar"
-    />
-    <div v-if="src && deleteAvatar" class="my-1">
-      <NextButton
-        outline
-        xs
-        ruby
-        :label="$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')"
-        @click="onAvatarDelete"
-      />
-    </div>
-    <label>
-      <input
-        id="file"
-        ref="file"
-        type="file"
-        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-        @change="handleImageUpload"
-      />
-      <slot />
-    </label>
-  </div>
-</template>