From 3ef09c7b4d39034ec97e5d7093369a62e1887500 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 4 Dec 2025 11:36:18 -0600
Subject: [PATCH] Add: Debug panel al input de mensajes para ver estado de
 archivos y mensaje

---
 app/components/messages/MessageInput.vue | 153 +++++++++++++++--------
 1 file changed, 103 insertions(+), 50 deletions(-)

diff --git a/app/components/messages/MessageInput.vue b/app/components/messages/MessageInput.vue
index 4d5c201..c9f46e1 100644
--- a/app/components/messages/MessageInput.vue
+++ b/app/components/messages/MessageInput.vue
@@ -1,40 +1,54 @@
 <template>
   <div class="space-y-2">
-    <!-- Reply preview with animation -->
-    <Transition name="slide-up">
-      <div
-        v-if="replyingTo"
-        class="flex items-center gap-2 p-2 rounded-lg bg-[var(--wa-bg-light)]"
-      >
-        <div class="w-1 h-8 rounded-full bg-[var(--wa-green-light)]" />
-        <div class="flex-1 min-w-0">
-          <p class="text-xs font-medium text-[var(--wa-green-light)]">
-            {{ replyingTo.fromMe ? 'Tú' : (replyingTo.pushName || 'Mensaje') }}
-          </p>
-          <p class="text-sm text-[var(--wa-text-muted)] truncate">
-            {{ replyingTo.content || getTypePlaceholder(replyingTo.type) }}
-          </p>
-        </div>
+    <!-- Debug Panel -->
+    <div
+      v-if="showDebug"
+      class="p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono max-h-60 overflow-auto"
+    >
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-gray-400">Estado del Input:</span>
         <button
-          class="p-1 rounded-full hover:bg-[var(--wa-border)]"
-          @click="$emit('cancelReply')"
+          @click="copyDebugInfo"
+          class="px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+          title="Copiar al portapapeles"
         >
-          <UIcon name="i-lucide-x" class="w-4 h-4 text-[var(--wa-text-muted)]" />
+          <UIcon name="i-lucide-copy" class="w-3 h-3" />
         </button>
       </div>
-    </Transition>
+      <pre class="text-green-400 whitespace-pre-wrap">{{ debugInfo }}</pre>
+    </div>
 
-    <!-- Media preview with animation -->
-    <Transition name="slide-up">
-      <MediaPreview
-        v-if="selectedFiles.length > 0"
-        :files="selectedFiles"
-        :caption="caption"
-        @remove="removeFile"
-        @update:caption="caption = $event"
-        @update:stickerModes="stickerModes = $event"
-      />
-    </Transition>
+    <!-- Reply preview with animation -->
+    <div
+      v-if="replyingTo"
+      class="flex items-center gap-2 p-2 rounded-lg bg-[var(--wa-bg-light)]"
+    >
+      <div class="w-1 h-8 rounded-full bg-[var(--wa-green-light)]" />
+      <div class="flex-1 min-w-0">
+        <p class="text-xs font-medium text-[var(--wa-green-light)]">
+          {{ replyingTo.fromMe ? 'Tú' : (replyingTo.pushName || 'Mensaje') }}
+        </p>
+        <p class="text-sm text-[var(--wa-text-muted)] truncate">
+          {{ replyingTo.content || getTypePlaceholder(replyingTo.type) }}
+        </p>
+      </div>
+      <button
+        class="p-1 rounded-full hover:bg-[var(--wa-border)]"
+        @click="$emit('cancelReply')"
+      >
+        <UIcon name="i-lucide-x" class="w-4 h-4 text-[var(--wa-text-muted)]" />
+      </button>
+    </div>
+
+    <!-- Media preview -->
+    <MediaPreview
+      v-if="selectedFiles.length > 0"
+      :files="selectedFiles"
+      :caption="caption"
+      @remove="removeFile"
+      @update:caption="caption = $event"
+      @update:stickerModes="stickerModes = $event"
+    />
 
     <!-- Recording indicator -->
     <div
@@ -126,6 +140,15 @@
         />
       </div>
 
+      <!-- Debug button -->
+      <button
+        @click="showDebug = !showDebug"
+        class="p-2 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
+        title="Debug input state"
+      >
+        <UIcon name="i-lucide-bug" class="w-4 h-4" />
+      </button>
+
       <!-- Send / Mic button -->
       <UButton
         v-if="hasContent"
@@ -187,6 +210,7 @@ const selectedFiles = ref<File[]>([])
 const caption = ref('')
 const isDragging = ref(false)
 const stickerModes = ref<boolean[]>([])
+const showDebug = ref(false)
 
 // File size limits (in bytes) - should match server
 const MAX_SIZES: Record<string, number> = {
@@ -223,6 +247,55 @@ const inputPlaceholder = computed(() => {
   return 'Escribe un mensaje...'
 })
 
+// Debug info computed
+const debugInfo = computed(() => {
+  const filesInfo = selectedFiles.value.map((f, i) => ({
+    index: i,
+    name: f.name,
+    type: f.type,
+    size: formatFileSize(f.size),
+    sizeBytes: f.size,
+    asSticker: stickerModes.value[i] || false
+  }))
+
+  return JSON.stringify({
+    message: message.value,
+    caption: caption.value,
+    filesCount: selectedFiles.value.length,
+    files: filesInfo,
+    stickerModes: stickerModes.value,
+    hasContent: hasContent.value,
+    replyingTo: props.replyingTo ? {
+      messageId: props.replyingTo.messageId,
+      type: props.replyingTo.type,
+      fromMe: props.replyingTo.fromMe
+    } : null,
+    isRecording: isRecording.value,
+    isDragging: isDragging.value
+  }, null, 2)
+})
+
+// Copy debug info to clipboard
+const copyDebugInfo = async () => {
+  try {
+    await navigator.clipboard.writeText(debugInfo.value)
+    toast.add({
+      title: 'Copiado al portapapeles',
+      icon: 'i-lucide-check',
+      color: 'success',
+      duration: 2000
+    })
+  } catch (err) {
+    console.error('Failed to copy:', err)
+    toast.add({
+      title: 'Error al copiar',
+      icon: 'i-lucide-x',
+      color: 'error',
+      duration: 2000
+    })
+  }
+}
+
 // Attachment menu
 const attachmentMenuItems = [
   [{
@@ -370,23 +443,3 @@ const getTypePlaceholder = (type: MessageType): string => {
 }
 </script>
 
-<style scoped>
-/* Slide up animation for previews */
-.slide-up-enter-active {
-  transition: all 0.3s ease-out;
-}
-
-.slide-up-leave-active {
-  transition: all 0.2s ease-in;
-}
-
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(10px);
-}
-</style>