fix: slot usage

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -38,6 +38,14 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  shouldShowSpinner: {
+    type: Boolean,
+    default: false,
+  },
+  unreadMessageCount: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const unread = computed(() => {
@@ -95,30 +103,44 @@ const getInReplyToMessage = parentMessage => {
 
 <template>
   <ul class="px-4 bg-n-background">
-    <slot name="beforeAll" />
-    <template v-for="(message, index) in read" :key="message.id">
-      <Message
-        v-bind="message"
-        :is-email-inbox="isAnEmailChannel"
-        :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, readMessages)"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :current-user-id="currentUserId"
-        data-clarity-mask="True"
-      />
-    </template>
-    <slot name="beforeUnread" />
-    <template v-for="(message, index) in unread" :key="message.id">
-      <Message
-        v-bind="message"
-        :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, unReadMessages)"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :current-user-id="currentUserId"
-        :is-email-inbox="isAnEmailChannel"
-        data-clarity-mask="True"
-      />
-    </template>
+    <transition name="slide-up">
+      <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
+      <li class="min-h-[4rem]">
+        <span v-if="shouldShowSpinner" class="spinner message" />
+      </li>
+    </transition>
+    <Message
+      v-for="(message, index) in read"
+      :key="message.id"
+      v-bind="message"
+      :is-email-inbox="isAnEmailChannel"
+      :in-reply-to="getInReplyToMessage(message)"
+      :group-with-next="shouldGroupWithNext(index, readMessages)"
+      :inbox-supports-reply-to="inboxSupportsReplyTo"
+      :current-user-id="currentUserId"
+      data-clarity-mask="True"
+    />
+    <li v-show="unreadMessageCount != 0" class="unread--toast">
+      <span>
+        {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
+        {{
+          unreadMessageCount > 1
+            ? $t('CONVERSATION.UNREAD_MESSAGES')
+            : $t('CONVERSATION.UNREAD_MESSAGE')
+        }}
+      </span>
+    </li>
+    <Message
+      v-for="(message, index) in unread"
+      :key="message.id"
+      v-bind="message"
+      :in-reply-to="getInReplyToMessage(message)"
+      :group-with-next="shouldGroupWithNext(index, unReadMessages)"
+      :inbox-supports-reply-to="inboxSupportsReplyTo"
+      :current-user-id="currentUserId"
+      :is-email-inbox="isAnEmailChannel"
+      data-clarity-mask="True"
+    />
     <slot name="after" />
   </ul>
 </template>

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

@@ -8,6 +8,7 @@ import { useAI } from 'dashboard/composables/useAI';
 // components
 import ReplyBox from './ReplyBox.vue';
 import Message from './Message.vue';
+import NextMessageList from 'next/message/MessageList.vue';
 import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 
@@ -37,6 +38,7 @@ import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 export default {
   components: {
     Message,
+    NextMessageList,
     ReplyBox,
     Banner,
     ConversationLabelSuggestion,
@@ -478,7 +480,28 @@ export default {
         @click="onToggleContactPanel"
       />
     </div>
-    <ul class="conversation-panel">
+    <NextMessageList
+      v-if="showNextBubbles"
+      class="conversation-panel"
+      :read-messages="readMessages"
+      :un-read-messages="unreadMessages"
+      :current-user-id="currentUserId"
+      :is-an-email-channel="isAnEmailChannel"
+      :inbox-supports-reply-to="inboxSupportsReplyTo"
+      :should-show-spinner="shouldShowSpinner"
+      :unread-message-count="unreadMessageCount"
+      :messages="currentChat ? currentChat.messages : []"
+    >
+      <template #after>
+        <ConversationLabelSuggestion
+          v-if="shouldShowLabelSuggestions"
+          :suggested-labels="labelSuggestions"
+          :chat-labels="currentChat.labels"
+          :conversation-id="currentChat.id"
+        />
+      </template>
+    </NextMessageList>
+    <ul v-else class="conversation-panel">
       <transition name="slide-up">
         <!-- eslint-disable-next-line vue/require-toggle-inside-transition -->
         <li class="min-h-[4rem]">