Feature: Agregar botón para crear webhook de debug automáticamente

- Agregar botón "Crear Webhook de Debug" en WebhookReceiverSection
- Detectar si ya existe un webhook apuntando al receptor de debug
- Permitir eliminar el webhook de debug
- Incluir todos los eventos disponibles al crear el webhook
- También incluye mejoras previas de manejo de media y mensajes

app/components/messages/content/MessageContact.vue

@@ -0,0 +1,152 @@
+<template>
+  <div
+    class="flex items-center gap-3 p-3 rounded-lg min-w-[200px] max-w-[280px]"
+    :class="fromMe ? 'bg-white/10' : 'bg-[var(--wa-bg-light)]'"
+  >
+    <!-- Avatar placeholder -->
+    <div
+      class="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0"
+      :class="fromMe ? 'bg-white/20' : 'bg-[var(--wa-border)]'"
+    >
+      <UIcon
+        name="i-lucide-user"
+        class="w-6 h-6"
+        :class="fromMe ? 'text-white' : 'text-[var(--wa-text-muted)]'"
+      />
+    </div>
+
+    <!-- Contact info -->
+    <div class="flex-1 min-w-0">
+      <p
+        class="font-medium truncate"
+        :class="fromMe ? 'text-white' : 'text-[var(--wa-text)]'"
+      >
+        {{ contact.displayName }}
+      </p>
+      <p
+        v-if="primaryPhone"
+        class="text-sm mt-0.5 truncate"
+        :class="fromMe ? 'text-white/70' : 'text-[var(--wa-text-muted)]'"
+      >
+        {{ primaryPhone }}
+      </p>
+    </div>
+  </div>
+
+  <!-- Action buttons -->
+  <div
+    class="flex gap-2 mt-2"
+    :class="fromMe ? 'justify-end' : 'justify-start'"
+  >
+    <UButton
+      size="xs"
+      :variant="fromMe ? 'soft' : 'outline'"
+      :class="fromMe ? 'text-white border-white/30' : ''"
+      @click="viewContact"
+    >
+      <UIcon name="i-lucide-eye" class="w-3 h-3 mr-1" />
+      Ver
+    </UButton>
+    <UButton
+      v-if="primaryPhone"
+      size="xs"
+      :variant="fromMe ? 'soft' : 'outline'"
+      :class="fromMe ? 'text-white border-white/30' : ''"
+      @click="sendMessage"
+    >
+      <UIcon name="i-lucide-message-circle" class="w-3 h-3 mr-1" />
+      Mensaje
+    </UButton>
+  </div>
+
+  <!-- Contact details modal -->
+  <UModal v-model="showDetails">
+    <UCard>
+      <template #header>
+        <div class="flex items-center gap-3">
+          <div class="w-12 h-12 rounded-full bg-[var(--wa-green-light)] flex items-center justify-center">
+            <UIcon name="i-lucide-user" class="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h3 class="font-semibold text-lg">{{ contact.displayName }}</h3>
+            <p class="text-sm text-[var(--wa-text-muted)]">Contacto compartido</p>
+          </div>
+        </div>
+      </template>
+
+      <div class="space-y-3">
+        <div v-for="(phone, i) in contact.phones" :key="i" class="flex items-center gap-3">
+          <UIcon name="i-lucide-phone" class="w-5 h-5 text-[var(--wa-text-muted)]" />
+          <a
+            :href="`tel:${phone}`"
+            class="text-[var(--wa-blue)] hover:underline"
+          >
+            {{ phone }}
+          </a>
+        </div>
+
+        <div v-if="!contact.phones?.length" class="text-[var(--wa-text-muted)] text-sm">
+          No hay números de teléfono disponibles
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-2">
+          <UButton variant="ghost" @click="showDetails = false">
+            Cerrar
+          </UButton>
+          <UButton v-if="primaryPhone" @click="copyPhone">
+            <UIcon name="i-lucide-copy" class="w-4 h-4 mr-1" />
+            Copiar número
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import type { ContactInfo } from '~/types/message'
+
+interface Props {
+  contact: ContactInfo
+  fromMe?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fromMe: false
+})
+
+const showDetails = ref(false)
+const toast = useToast()
+
+const primaryPhone = computed(() => {
+  if (props.contact.phones && props.contact.phones.length > 0) {
+    return props.contact.phones[0]
+  }
+  return null
+})
+
+const viewContact = () => {
+  showDetails.value = true
+}
+
+const sendMessage = () => {
+  if (primaryPhone.value) {
+    // Formatear número para WhatsApp
+    const number = primaryPhone.value.replace(/\D/g, '')
+    window.open(`https://wa.me/${number}`, '_blank')
+  }
+}
+
+const copyPhone = async () => {
+  if (primaryPhone.value) {
+    await navigator.clipboard.writeText(primaryPhone.value)
+    toast.add({
+      title: 'Número copiado',
+      icon: 'i-lucide-check',
+      color: 'green'
+    })
+  }
+}
+</script>