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

@@ -0,0 +1,56 @@
+<template>
+  <div class="relative inline-block">
+    <!-- Sticker image -->
+    <img
+      v-if="!error"
+      :src="stickerUrl"
+      :alt="'Sticker'"
+      class="max-w-[180px] max-h-[180px] object-contain"
+      :class="{ 'animate-pulse bg-[var(--wa-bg-light)] rounded-lg': loading }"
+      @load="loading = false"
+      @error="onError"
+    />
+
+    <!-- Error state -->
+    <div
+      v-if="error"
+      class="w-[120px] h-[120px] flex flex-col items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
+    >
+      <UIcon name="i-lucide-image-off" class="w-8 h-8 text-[var(--wa-text-muted)]" />
+      <span class="text-xs text-[var(--wa-text-muted)] mt-1">Sticker</span>
+    </div>
+
+    <!-- Loading placeholder -->
+    <div
+      v-if="loading && !error"
+      class="w-[120px] h-[120px] flex items-center justify-center bg-[var(--wa-bg-light)] rounded-lg"
+    >
+      <UIcon name="i-lucide-loader-2" class="w-6 h-6 text-[var(--wa-text-muted)] animate-spin" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MediaInfo } from '~/types/message'
+
+interface Props {
+  media: MediaInfo
+  instanceId: string
+  messageId: string
+}
+
+const props = defineProps<Props>()
+
+const loading = ref(true)
+const error = ref(false)
+
+const stickerUrl = computed(() => {
+  if (props.media.url) return props.media.url
+  return `/api/media/${props.instanceId}/${props.messageId}`
+})
+
+const onError = () => {
+  loading.value = false
+  error.value = true
+}
+</script>