diff --git a/app/components/messages/MessageInput.vue b/app/components/messages/MessageInput.vue index 2c6df91..0ea253e 100644 --- a/app/components/messages/MessageInput.vue +++ b/app/components/messages/MessageInput.vue @@ -112,7 +112,7 @@
{ return message.value.trim().length > 0 || selectedFiles.value.length > 0 }) +const inputPlaceholder = computed(() => { + if (selectedFiles.value.length > 0) { + const count = selectedFiles.value.length + return `${count} archivo${count > 1 ? 's' : ''} seleccionado${count > 1 ? 's' : ''} - Presiona enviar` + } + return 'Escribe un mensaje...' +}) + // Attachment menu const attachmentMenuItems = [ [{ @@ -227,23 +235,19 @@ const attachmentMenuItems = [ // Methods const handleFileSelect = (event: Event, type: string) => { - console.log('handleFileSelect called', type, event) const input = event.target as HTMLInputElement - console.log('input.files:', input.files) - if (input.files) { + if (input.files && input.files.length > 0) { addFiles(Array.from(input.files)) input.value = '' // Reset input } } const addFiles = (files: File[]) => { - console.log('addFiles called with:', files) // Limit to 10 files const remaining = 10 - selectedFiles.value.length const toAdd = files.slice(0, remaining) // Use spread operator to trigger reactivity selectedFiles.value = [...selectedFiles.value, ...toAdd] - console.log('selectedFiles after adding:', selectedFiles.value) } const handleDrop = (event: DragEvent) => { @@ -254,7 +258,8 @@ const handleDrop = (event: DragEvent) => { } const removeFile = (index: number) => { - selectedFiles.value.splice(index, 1) + // Use filter to maintain reactivity + selectedFiles.value = selectedFiles.value.filter((_, i) => i !== index) } const handleSend = () => {