fix: remove send files functionality

This commit is contained in:
2026-06-18 18:23:57 +02:00 Unverified
parent c2d05ffb98
commit 8e5f041527
2 changed files with 9 additions and 246 deletions
+9 -77
View File
@@ -1,21 +1,20 @@
<script setup lang="ts">
import { ref } from 'vue'
interface Emits {
(e: 'send', message: string, files: File[]): void
(e: 'send', message: string): 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
if (message.value.trim() === '') return
emit('send', message.value, [...files.value])
emit('send', message.value)
message.value = ''
files.value = []
}
const handleKeydown = (e: KeyboardEvent) => {
@@ -24,55 +23,13 @@ const handleKeydown = (e: KeyboardEvent) => {
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="d-flex align-items-stretch gap-2">
<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-square flex-shrink-0"
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 chat-textarea m-0"
@@ -84,16 +41,16 @@ const removeFile = (idx: number) => {
<button
type="submit"
class="btn btn-primary btn-square flex-shrink-0"
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
:disabled="isSubmitting || message.trim() === ''"
title="Invia"
>
<span v-if="isSubmitting" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<BIIcon v-else name="it-arrow-right" size="sm" color="white" />
<BIIcon v-else color="white" name="it-arrow-right" size="sm"/>
</button>
</div>
<small class="text-muted d-block mt-2">
`Ctrl` + `Invio` per inviare. Fino a 5 allegati.
`Ctrl` + `Invio` per inviare.
</small>
</form>
</div>
@@ -105,31 +62,6 @@ const removeFile = (idx: number) => {
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;
}
.btn-close-sm {
font-size: 0.55rem;
}
.chat-textarea {
resize: none !important;
height: 48px;
@@ -154,4 +86,4 @@ const removeFile = (idx: number) => {
justify-content: center;
border-radius: 6px;
}
</style>
</style>