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/MessageQuoted.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="flex rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
+    :class="quoted.fromMe ? 'bg-[var(--wa-green-light)]/20' : 'bg-[var(--wa-bg-light)]'"
+    @click="$emit('click', quoted.id)"
+  >
+    <!-- Barra de color lateral -->
+    <div
+      class="w-1 flex-shrink-0"
+      :style="{ backgroundColor: barColor }"
+    />
+
+    <div class="flex-1 px-2 py-1.5 min-w-0">
+      <!-- Nombre del autor -->
+      <p
+        class="text-xs font-medium truncate"
+        :style="{ color: barColor }"
+      >
+        {{ authorName }}
+      </p>
+
+      <!-- Contenido según tipo -->
+      <div class="flex items-center gap-1.5 mt-0.5">
+        <!-- Thumbnail si es media -->
+        <img
+          v-if="quoted.media?.thumbnail"
+          :src="`data:image/jpeg;base64,${quoted.media.thumbnail}`"
+          class="w-10 h-10 rounded object-cover flex-shrink-0"
+        />
+
+        <!-- Icono de tipo si no es texto -->
+        <UIcon
+          v-if="quoted.type !== 'text' && !quoted.media?.thumbnail"
+          :name="typeIcon"
+          class="w-4 h-4 text-[var(--wa-text-muted)] flex-shrink-0"
+        />
+
+        <!-- Texto o placeholder -->
+        <p class="text-sm text-[var(--wa-text-muted)] truncate">
+          {{ displayText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { QuotedMessage } from '~/types/message'
+import { getMessageTypePlaceholder, getMessageTypeIcon, stringToColor } from '~/types/message'
+
+interface Props {
+  quoted: QuotedMessage
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  click: [id: string]
+}>()
+
+const authorName = computed(() => {
+  if (props.quoted.fromMe) return 'Tú'
+  return props.quoted.participantName || props.quoted.participant?.split('@')[0] || 'Desconocido'
+})
+
+const barColor = computed(() => {
+  if (props.quoted.fromMe) return 'var(--wa-green-dark)'
+  return stringToColor(props.quoted.participant || '')
+})
+
+const typeIcon = computed(() => getMessageTypeIcon(props.quoted.type))
+
+const displayText = computed(() => {
+  if (props.quoted.content) return props.quoted.content
+  if (props.quoted.media?.filename) return props.quoted.media.filename
+  return getMessageTypePlaceholder(props.quoted.type)
+})
+</script>