From 4d9f1a7e1ad82f0ddc60d56bc77fd69861878bf1 Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Sun, 12 Jan 2025 01:11:27 -0800
Subject: [PATCH] Update team availability

---
 app/javascript/widget/assets/scss/woot.scss   |  2 +-
 .../widget/components/AvailableAgents.vue     | 27 -----------------
 .../widget/components/GroupedAvatars.vue      | 30 ++++++++++---------
 .../widget/components/TeamAvailability.vue    | 13 ++++++--
 4 files changed, 27 insertions(+), 45 deletions(-)
 delete mode 100644 app/javascript/widget/components/AvailableAgents.vue

diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index e6618d61f..df835d59d 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -15,7 +15,7 @@
 
 html,
 body {
-  @apply antialiased h-full font-interDisplay tracking-[0.4px] bg-n-background;
+  @apply antialiased h-full font-inter bg-n-background;
 }
 
 .is-mobile {
diff --git a/app/javascript/widget/components/AvailableAgents.vue b/app/javascript/widget/components/AvailableAgents.vue
deleted file mode 100644
index 10ecd7afb..000000000
--- a/app/javascript/widget/components/AvailableAgents.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
-
-export default {
-  name: 'AvailableAgents',
-  components: { GroupedAvatars },
-  props: {
-    agents: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  computed: {
-    users() {
-      return this.agents.slice(0, 4).map(agent => ({
-        id: agent.id,
-        avatar: agent.avatar_url,
-        name: agent.name,
-      }));
-    },
-  },
-};
-</script>
-
-<template>
-  <GroupedAvatars :users="users" />
-</template>
diff --git a/app/javascript/widget/components/GroupedAvatars.vue b/app/javascript/widget/components/GroupedAvatars.vue
index bb6906e68..0e31e6934 100644
--- a/app/javascript/widget/components/GroupedAvatars.vue
+++ b/app/javascript/widget/components/GroupedAvatars.vue
@@ -1,26 +1,28 @@
-<script>
+<script setup>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
+import { defineProps, computed } from 'vue';
 
-export default {
-  name: 'GroupedAvatars',
-  components: { Thumbnail },
-  props: {
-    users: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  users: {
+    type: Array,
+    default: () => [],
   },
-};
+  limit: {
+    type: Number,
+    default: 4,
+  },
+});
+
+const usersToDisplay = computed(() => props.users.slice(0, props.limit));
 </script>
 
 <template>
   <div class="flex">
     <span
-      v-for="(user, index) in users"
+      v-for="(user, index) in usersToDisplay"
       :key="user.id"
-      :class="`${
-        index ? '-ml-4' : ''
-      } inline-block rounded-full text-white shadow-solid`"
+      :class="index ? '-ml-4' : ''"
+      class="inline-block rounded-full text-white shadow-solid"
     >
       <Thumbnail
         size="36px"
diff --git a/app/javascript/widget/components/TeamAvailability.vue b/app/javascript/widget/components/TeamAvailability.vue
index d320f4054..2460349c3 100644
--- a/app/javascript/widget/components/TeamAvailability.vue
+++ b/app/javascript/widget/components/TeamAvailability.vue
@@ -2,16 +2,16 @@
 import { mapGetters } from 'vuex';
 import { getContrastingTextColor } from '@chatwoot/utils';
 import nextAvailabilityTime from 'widget/mixins/nextAvailabilityTime';
-import AvailableAgents from 'widget/components/AvailableAgents.vue';
 import configMixin from 'widget/mixins/configMixin';
 import availabilityMixin from 'widget/mixins/availability';
 import { IFrameHelper } from 'widget/helpers/utils';
 import { CHATWOOT_ON_START_CONVERSATION } from '../constants/sdkEvents';
+import GroupedAvatars from 'widget/components/GroupedAvatars.vue';
 
 export default {
   name: 'TeamAvailability',
   components: {
-    AvailableAgents,
+    GroupedAvatars,
   },
   mixins: [configMixin, nextAvailabilityTime, availabilityMixin],
   props: {
@@ -33,6 +33,13 @@ export default {
     textColor() {
       return getContrastingTextColor(this.widgetColor);
     },
+    agentAvatars() {
+      return this.availableAgents.map(agent => ({
+        name: agent.name,
+        avatar: agent.avatar_url,
+        id: agent.id,
+      }));
+    },
     isOnline() {
       const { workingHoursEnabled } = this.channelConfig;
       const anyAgentOnline = this.availableAgents.length > 0;
@@ -75,7 +82,7 @@ export default {
           {{ replyWaitMessage }}
         </div>
       </div>
-      <AvailableAgents v-if="isOnline" :agents="availableAgents" />
+      <GroupedAvatars v-if="isOnline" :users="agentAvatars" />
     </div>
     <button
       class="inline-flex items-center font-medium text-n-slate-12"