158 lines
3.8 KiB
Vue
158 lines
3.8 KiB
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="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"
|
|
placeholder="Scrivi aggiornamento o domanda"
|
|
:disabled="isSubmitting"
|
|
@keydown="handleKeydown"
|
|
></textarea>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary btn-square flex-shrink-0"
|
|
:disabled="isSubmitting || (message.trim() === '' && files.length === 0)"
|
|
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" />
|
|
</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;
|
|
}
|
|
|
|
.btn-close-sm {
|
|
font-size: 0.55rem;
|
|
}
|
|
|
|
/* Stili specifici richiesti per la chat */
|
|
.chat-textarea {
|
|
resize: none !important;
|
|
height: 48px;
|
|
min-height: 48px;
|
|
overflow-y: auto;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.chat-textarea:focus {
|
|
border-color: #06c;
|
|
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
|
|
}
|
|
|
|
.btn-square {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
}
|
|
</style> |