feat: improve chat composer with file attachments and media previews

app/components/MessageComposer.vue

@@ -1,39 +1,81 @@
 <script setup lang="ts">
 interface Emits {
-  (e: 'send', message: string): void
+  (e: 'send', message: string, files: File[]): void
 }
 
-// Unica dichiarazione di defineEmits
 const emit = defineEmits<Emits>()
 
 const message = ref('')
 const isSubmitting = ref(false)
+const files = ref<File[]>([])
+const fileInputRef = ref<HTMLInputElement>()
 
 const handleSubmit = () => {
-  if (message.value.trim() === '') return
+  if (message.value.trim() === '' && files.value.length === 0) return
 
-  emit('send', message.value)
+  emit('send', message.value, [...files.value])
   message.value = ''
+  files.value = []
 }
 
 const handleKeydown = (e: KeyboardEvent) => {
-  // Ctrl/Cmd + Enter per inviare
   if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-    // Previene l'andata a capo predefinita della textarea
     e.preventDefault()
     handleSubmit()
   }
 }
+
+const handleFileSelect = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  if (target.files) {
+    const newFiles = Array.from(target.files)
+    files.value = [...files.value, ...newFiles].slice(0, 5) // max 5
+  }
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+const removeFile = (idx: number) => {
+  files.value.splice(idx, 1)
+}
 </script>
 
 <template>
   <div class="message-composer mt-4 border-top pt-3">
-    <!-- Non serve passare emit qui -->
     <form @submit.prevent="handleSubmit">
-      <div class="input-group">
+      
+      <!-- Preview Allegati -->
+      <div v-if="files.length > 0" class="mb-3 d-flex flex-wrap gap-2">
+        <div v-for="(file, idx) in files" :key="idx" class="badge bg-light text-dark border p-2 d-flex align-items-center gap-2">
+          <BIIcon name="it-clip" size="xs" />
+          <span class="text-truncate" style="max-width: 150px;">{{ file.name }}</span>
+          <button type="button" class="btn-close ms-2" style="font-size: 0.5rem;" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
+        </div>
+      </div>
+
+      <div class="input-group align-items-end">
+        <button
+          type="button"
+          class="btn btn-outline-secondary me-2 rounded"
+          title="Allega file (max 5)"
+          @click="fileInputRef?.click()"
+          :disabled="isSubmitting || files.length >= 5"
+        >
+          <BIIcon name="it-clip" size="sm" />
+        </button>
+        <input 
+          ref="fileInputRef"
+          type="file" 
+          multiple 
+          class="d-none" 
+          @change="handleFileSelect"
+          accept="image/*,video/*,.pdf,.doc,.docx"
+        />
+
         <textarea
             v-model="message"
-            class="form-control"
+            class="form-control rounded"
             placeholder="Scrivi un messaggio... (Ctrl+Enter per inviare)"
             rows="2"
             :disabled="isSubmitting"
@@ -41,8 +83,8 @@ const handleKeydown = (e: KeyboardEvent) => {
         />
         <button
             type="submit"
-            class="btn btn-primary"
-            :disabled="isSubmitting || message.trim() === ''"
+            class="btn btn-primary ms-2 rounded"
+            :disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
         >
           <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
           <BIIcon v-else name="it-arrow-right" size="sm" color="white" class="me-1" />
@@ -67,17 +109,4 @@ textarea {
   resize: vertical;
   font-family: inherit;
 }
-
-.input-group {
-  display: flex;
-  gap: 0.5rem;
-}
-
-textarea {
-  flex: 1;
-}
-
-button {
-  flex-shrink: 0;
-}
 </style>