Update team availability

app/javascript/widget/components/AvailableAgents.vue

@@ -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>

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"

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"