From 9ce7feded01d5fd4ccca4e75bb3cff3809aaf869 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Fri, 10 Jul 2026 00:28:36 +0530
Subject: [PATCH] make SLA badges react to prop changes and hide draft label on
 open conversation

---
 frontend/apps/main/src/composables/useSla.js                 | 3 ++-
 .../src/features/conversation/list/ConversationListItem.vue  | 5 +----
 frontend/apps/main/src/features/sla/SlaBadge.vue             | 4 ++--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/apps/main/src/composables/useSla.js b/frontend/apps/main/src/composables/useSla.js
index 958f5f85..aed87b19 100644
--- a/frontend/apps/main/src/composables/useSla.js
+++ b/frontend/apps/main/src/composables/useSla.js
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { calculateSla } from '../utils/sla'
 
 export function useSla (dueAt, actualAt) {
@@ -10,6 +10,7 @@ export function useSla (dueAt, actualAt) {
         }
         sla.value = calculateSla(dueAt.value, actualAt.value)
     }
+    watch([dueAt, actualAt], updateSla)
     onMounted(() => {
         updateSla()
         // Update the SLA every 30 seconds.
diff --git a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
index 82a3ff27..1153e374 100644
--- a/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/apps/main/src/features/conversation/list/ConversationListItem.vue
@@ -87,7 +87,7 @@
                 <template v-if="isTyping">
                   <span class="italic text-primary">{{ $t('globals.terms.typing') }}</span>
                 </template>
-                <template v-else-if="hasDraftForConversation">
+                <template v-else-if="hasDraftForConversation && !isCurrent">
                   <span class="font-medium text-primary">{{ $t('globals.terms.draft') }}:</span>
                   {{ draftPreview }}
                 </template>
@@ -116,7 +116,6 @@
                 :label="'FRD'"
                 :showExtra="false"
                 @status="frdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.first_response_deadline_at}-${conversation.first_reply_at}`"
               />
               <SlaBadge
                 v-show="rdStatus === 'overdue' || rdStatus === 'remaining'"
@@ -125,7 +124,6 @@
                 :label="'RD'"
                 :showExtra="false"
                 @status="rdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.resolution_deadline_at}-${conversation.resolved_at}`"
               />
               <SlaBadge
                 v-show="nrdStatus === 'overdue' || nrdStatus === 'remaining'"
@@ -134,7 +132,6 @@
                 :label="'NRD'"
                 :showExtra="false"
                 @status="nrdStatus = $event"
-                :key="`${conversation.uuid}-${conversation.next_response_deadline_at}-${conversation.next_response_met_at}`"
               />
             </div>
           </div>
diff --git a/frontend/apps/main/src/features/sla/SlaBadge.vue b/frontend/apps/main/src/features/sla/SlaBadge.vue
index ef6404d5..6cf42685 100644
--- a/frontend/apps/main/src/features/sla/SlaBadge.vue
+++ b/frontend/apps/main/src/features/sla/SlaBadge.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { toRef, watch } from 'vue'
 import { useSla } from '../../composables/useSla'
 import { AlertCircle, CheckCircle, Clock } from 'lucide-vue-next'
 const props = defineProps({
@@ -38,7 +38,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['status'])
-let sla = useSla(ref(props.dueAt), ref(props.actualAt))
+let sla = useSla(toRef(props, 'dueAt'), toRef(props, 'actualAt'))
 
 // Watch for status change and emit
 watch(