frontend/app/components/MessageComposer.vue

<script setup lang="ts">
interface Emits {
  (e: 'send', message: string, files: File[]): void
}

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() === '' && files.value.length === 0) return

  emit('send', message.value, [...files.value])
  message.value = ''
  files.value = []
}

const handleKeydown = (e: KeyboardEvent) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    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-3">
    <form @submit.prevent="handleSubmit">
      <div v-if="files.length > 0" class="message-files mb-3">
        <div v-for="(file, idx) in files" :key="idx" class="message-file-chip">
          <BIIcon name="it-clip" size="xs" />
          <span class="text-truncate file-name">{{ file.name }}</span>
          <button type="button" class="btn-close btn-close-sm" @click="removeFile(idx)" aria-label="Rimuovi allegato"></button>
        </div>
      </div>

      <div class="composer-shell">
        <input 
          ref="fileInputRef"
          type="file" 
          multiple 
          class="d-none" 
          @change="handleFileSelect"
          accept="image/*,video/*,.pdf,.doc,.docx"
        />

        <button
          type="button"
          class="btn btn-outline-primary btn-icon composer-attach"
          title="Allega file"
          @click="fileInputRef?.click()"
          :disabled="isSubmitting || files.length >= 5"
        >
          <BIIcon name="it-clip" size="sm" />
        </button>

        <textarea
          v-model="message"
          class="form-control composer-textarea"
          placeholder="Scrivi aggiornamento o domanda"
          rows="2"
          :disabled="isSubmitting"
          @keydown="handleKeydown"
        />

        <button
          type="submit"
          class="btn btn-primary composer-submit"
          :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" />
          Invia
        </button>
      </div>

      <small class="text-muted d-block mt-2">
        `Ctrl` + `Invio` per inviare. Fino a 5 allegati.
      </small>
    </form>
  </div>
</template>

<style scoped>
.message-composer {
  border-top: 1px solid #d9e3ee;
  padding-top: 1rem;
}

.message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.message-file-chip {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e3ee;
  border-radius: 4px;
  display: inline-flex;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.4rem 0.75rem;
}

.file-name {
  max-width: 14rem;
}

.composer-shell {
  align-items: flex-end;
  background: #fff;
  border: 1px solid #c5d0db;
  border-radius: 4px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.composer-shell:focus-within {
  border-color: #06c;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}

.composer-attach {
  flex-shrink: 0;
}

.composer-textarea {
  border: 0;
  box-shadow: none;
  min-height: 4rem;
  padding: 0;
  resize: vertical;
}

.composer-submit {
  min-width: 7rem;
}

.btn-close-sm {
  font-size: 0.55rem;
}

@media (max-width: 767.98px) {
  .composer-shell {
    grid-template-columns: auto 1fr;
  }

  .composer-textarea {
    grid-column: 1 / -1;
  }

  .composer-submit {
    grid-column: 2;
    justify-self: end;
  }
}
</style>