Feat: Agregar opcion para eliminar chats completamente

- Crear endpoint DELETE /api/messages/:instanceId/:chatId
- Agregar boton de eliminar en ChatItem
- Crear modal de confirmacion con advertencia
- Elimina el chat y todos los mensajes relacionados (CASCADE)
- Muestra cantidad de mensajes eliminados en notificacion

app/components/messages/ChatItem.vue

@@ -32,6 +32,14 @@
             >
               <UIcon name="i-lucide-user-pen" class="w-3 h-3" />
             </button>
+            <!-- Delete button -->
+            <button
+              @click.stop="$emit('deleteChat', chat)"
+              class="text-xs text-[var(--wa-text-muted)] hover:text-red-500 opacity-50 hover:opacity-100"
+              title="Eliminar chat"
+            >
+              <UIcon name="i-lucide-trash-2" class="w-3 h-3" />
+            </button>
             <!-- Debug button -->
             <button
               @click.stop="showDebug = !showDebug"
@@ -101,6 +109,7 @@ const props = defineProps<Props>()
 defineEmits<{
   click: []
   editAlias: [chat: Chat]
+  deleteChat: [chat: Chat]
 }>()
 
 const showDebug = ref(false)

app/pages/messages/index.vue

@@ -119,6 +119,7 @@
               :active="selectedChat?.id === chat.id"
               @click="selectedChat = chat"
               @edit-alias="openAliasModal"
+              @delete-chat="openDeleteModal"
             />
           </div>
         </div>
@@ -260,6 +261,53 @@
       @saved="handleAliasSaved"
     />
 
+    <!-- Delete Confirmation Modal -->
+    <UModal v-model:open="showDeleteModal">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center gap-3">
+              <div class="p-2 rounded-full bg-red-500/20">
+                <UIcon name="i-lucide-trash-2" class="w-5 h-5 text-red-500" />
+              </div>
+              <h3 class="text-lg font-semibold text-white">Eliminar chat</h3>
+            </div>
+          </template>
+
+          <div class="space-y-4">
+            <p class="text-[var(--wa-text-muted)]">
+              Estas a punto de eliminar el chat con
+              <strong class="text-white">{{ chatToDelete?.name || chatToDelete?.jid }}</strong>.
+            </p>
+            <div class="p-3 rounded-lg bg-red-500/10 border border-red-500/30">
+              <p class="text-sm text-red-400">
+                Esta accion eliminara todos los mensajes y datos relacionados.
+                Esta accion no se puede deshacer.
+              </p>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                variant="ghost"
+                @click="showDeleteModal = false"
+              >
+                Cancelar
+              </UButton>
+              <UButton
+                color="error"
+                :loading="isDeleting"
+                @click="confirmDeleteChat"
+              >
+                Eliminar
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
     <!-- New Chat Modal -->
     <UModal v-model:open="showNewChatModal">
       <template #content>
@@ -357,6 +405,11 @@ const newChatError = ref('')
 const showAliasModal = ref(false)
 const chatToEditAlias = ref<any>(null)
 
+// Delete confirmation modal state
+const showDeleteModal = ref(false)
+const chatToDelete = ref<any>(null)
+const isDeleting = ref(false)
+
 // Instance options for selector
 const instanceOptions = computed(() =>
   instances.value
@@ -766,6 +819,56 @@ const handleAliasSaved = (updatedChat: any) => {
   }
 }
 
+// Delete modal functions
+const openDeleteModal = (chat: any) => {
+  chatToDelete.value = chat
+  showDeleteModal.value = true
+}
+
+const confirmDeleteChat = async () => {
+  if (!chatToDelete.value || !selectedInstance.value?.value) return
+
+  isDeleting.value = true
+  try {
+    const result = await $fetch(`/api/messages/${selectedInstance.value.value}/${chatToDelete.value.id}`, {
+      method: 'DELETE'
+    })
+
+    if (result.success) {
+      // Remove chat from list
+      chats.value = chats.value.filter(c => c.id !== chatToDelete.value.id)
+
+      // Clear selected chat if it was the deleted one
+      if (selectedChat.value?.id === chatToDelete.value.id) {
+        selectedChat.value = null
+        messages.value = []
+      }
+
+      toast.add({
+        title: 'Chat eliminado',
+        description: `Se eliminaron ${result.deleted.messagesDeleted} mensajes`,
+        icon: 'i-lucide-check',
+        color: 'success',
+        timeout: 3000
+      })
+
+      showDeleteModal.value = false
+      chatToDelete.value = null
+    }
+  } catch (error: any) {
+    console.error('Error deleting chat:', error)
+    toast.add({
+      title: 'Error al eliminar',
+      description: error?.data?.message || error?.message || 'No se pudo eliminar el chat',
+      icon: 'i-lucide-x',
+      color: 'error',
+      timeout: 5000
+    })
+  } finally {
+    isDeleting.value = false
+  }
+}
+
 // New chat modal functions
 const closeNewChatModal = () => {
   showNewChatModal.value = false