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

@@ -0,0 +1,178 @@
+<template>
+  <div class="flex items-center gap-3 min-w-[200px] max-w-[280px]">
+    <!-- Play/Pause button -->
+    <button
+      class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 transition-colors"
+      :class="fromMe ? 'bg-white/20 hover:bg-white/30' : 'bg-[var(--wa-green-light)] hover:bg-[var(--wa-green-dark)]'"
+      :disabled="loading || error"
+      @click="togglePlay"
+    >
+      <UIcon
+        v-if="loading"
+        name="i-lucide-loader-2"
+        class="w-5 h-5 animate-spin"
+        :class="fromMe ? 'text-white' : 'text-white'"
+      />
+      <UIcon
+        v-else-if="error"
+        name="i-lucide-alert-circle"
+        class="w-5 h-5"
+        :class="fromMe ? 'text-white' : 'text-white'"
+      />
+      <UIcon
+        v-else
+        :name="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
+        class="w-5 h-5"
+        :class="[fromMe ? 'text-white' : 'text-white', !isPlaying && 'ml-0.5']"
+      />
+    </button>
+
+    <div class="flex-1 min-w-0">
+      <!-- Waveform / Progress bar -->
+      <div class="relative h-6 flex items-center">
+        <!-- Waveform bars -->
+        <div
+          class="flex items-center gap-[2px] w-full h-full"
+          @click="seekTo"
+        >
+          <div
+            v-for="(bar, i) in waveformBars"
+            :key="i"
+            class="flex-1 rounded-full transition-colors cursor-pointer"
+            :class="i < playedBars ? (fromMe ? 'bg-white' : 'bg-[var(--wa-green-dark)]') : (fromMe ? 'bg-white/40' : 'bg-[var(--wa-text-muted)]/40')"
+            :style="{ height: `${bar}%` }"
+          />
+        </div>
+      </div>
+
+      <!-- Duration -->
+      <div class="flex justify-between mt-1">
+        <span class="text-xs" :class="fromMe ? 'text-white/70' : 'text-[var(--wa-text-muted)]'">
+          {{ currentTimeFormatted }}
+        </span>
+        <span class="text-xs" :class="fromMe ? 'text-white/70' : 'text-[var(--wa-text-muted)]'">
+          {{ durationFormatted }}
+        </span>
+      </div>
+    </div>
+
+    <!-- PTT indicator (mic icon for voice messages) -->
+    <div
+      v-if="media.isPtt"
+      class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0"
+      :class="fromMe ? 'bg-white/20' : 'bg-[var(--wa-bg-light)]'"
+    >
+      <UIcon
+        name="i-lucide-mic"
+        class="w-4 h-4"
+        :class="fromMe ? 'text-white' : 'text-[var(--wa-text-muted)]'"
+      />
+    </div>
+  </div>
+
+  <!-- Hidden audio element -->
+  <audio
+    ref="audioRef"
+    :src="audioUrl"
+    preload="metadata"
+    @loadedmetadata="onLoadedMetadata"
+    @timeupdate="onTimeUpdate"
+    @play="isPlaying = true"
+    @pause="isPlaying = false"
+    @ended="onEnded"
+    @error="onError"
+  />
+</template>
+
+<script setup lang="ts">
+import type { MediaInfo } from '~/types/message'
+import { formatDuration } from '~/types/message'
+
+interface Props {
+  media: MediaInfo
+  instanceId: string
+  messageId: string
+  fromMe?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fromMe: false
+})
+
+const audioRef = ref<HTMLAudioElement | null>(null)
+const isPlaying = ref(false)
+const loading = ref(true)
+const error = ref(false)
+const currentTime = ref(0)
+const duration = ref(props.media.duration || 0)
+
+const audioUrl = computed(() => {
+  if (props.media.url) return props.media.url
+  return `/api/media/${props.instanceId}/${props.messageId}`
+})
+
+// Generar barras de waveform (fake si no hay datos reales)
+const waveformBars = computed(() => {
+  if (props.media.waveform && props.media.waveform.length > 0) {
+    // Normalizar waveform real a porcentajes
+    const max = Math.max(...props.media.waveform)
+    return props.media.waveform.slice(0, 40).map(v => Math.max(15, (v / max) * 100))
+  }
+
+  // Generar waveform fake basado en messageId para que sea consistente
+  const seed = props.messageId.split('').reduce((a, b) => a + b.charCodeAt(0), 0)
+  return Array.from({ length: 40 }, (_, i) => {
+    const val = Math.sin(seed + i * 0.5) * 0.5 + 0.5
+    return 15 + val * 85
+  })
+})
+
+const playedBars = computed(() => {
+  if (duration.value === 0) return 0
+  return Math.floor((currentTime.value / duration.value) * waveformBars.value.length)
+})
+
+const currentTimeFormatted = computed(() => formatDuration(currentTime.value))
+const durationFormatted = computed(() => formatDuration(duration.value))
+
+const togglePlay = () => {
+  if (!audioRef.value || error.value) return
+
+  if (isPlaying.value) {
+    audioRef.value.pause()
+  } else {
+    audioRef.value.play()
+  }
+}
+
+const seekTo = (e: MouseEvent) => {
+  if (!audioRef.value || duration.value === 0) return
+
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const percent = (e.clientX - rect.left) / rect.width
+  audioRef.value.currentTime = percent * duration.value
+}
+
+const onLoadedMetadata = () => {
+  loading.value = false
+  if (audioRef.value && !props.media.duration) {
+    duration.value = audioRef.value.duration
+  }
+}
+
+const onTimeUpdate = () => {
+  if (audioRef.value) {
+    currentTime.value = audioRef.value.currentTime
+  }
+}
+
+const onEnded = () => {
+  isPlaying.value = false
+  currentTime.value = 0
+}
+
+const onError = () => {
+  loading.value = false
+  error.value = true
+}
+</script>