97 lines
1.7 KiB
Vue
97 lines
1.7 KiB
Vue
<script setup>
|
|
import { isMobile } from 'is-mobile'
|
|
const { $i18n } = useNuxtApp()
|
|
|
|
const props = defineProps({
|
|
sendMessage: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const message = ref('')
|
|
const rows = ref(1)
|
|
const autoGrow = ref(true)
|
|
|
|
const hint = computed(() => {
|
|
return isMobile() ? '' : $i18n.t('pressEnterToSendYourMessageOrShiftEnterToAddANewLine')
|
|
})
|
|
|
|
watchEffect(() => {
|
|
const lines = message.value.split(/\r\n|\r|\n/).length
|
|
if (lines > 8) {
|
|
rows.value = 8
|
|
autoGrow.value = false
|
|
} else {
|
|
rows.value = 1
|
|
autoGrow.value = true
|
|
}
|
|
})
|
|
|
|
const send = () => {
|
|
let msg = message.value
|
|
// remove the last "\n"
|
|
if (msg[msg.length - 1] === "\n") {
|
|
msg = msg.slice(0, -1)
|
|
}
|
|
if (msg.length > 0) {
|
|
props.sendMessage(msg)
|
|
}
|
|
message.value = ""
|
|
}
|
|
|
|
const usePrompt = (prompt) => {
|
|
message.value = prompt
|
|
}
|
|
|
|
const clickSendBtn = () => {
|
|
send()
|
|
}
|
|
|
|
const enterOnly = (event) => {
|
|
event.preventDefault();
|
|
if (!isMobile()) {
|
|
send()
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
usePrompt
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex-grow-1 d-flex align-center justify-space-between"
|
|
>
|
|
<v-textarea
|
|
v-model="message"
|
|
:label="$t('writeAMessage')"
|
|
:placeholder="hint"
|
|
:rows="rows"
|
|
max-rows="8"
|
|
:auto-grow="autoGrow"
|
|
:disabled="disabled"
|
|
:loading="loading"
|
|
:hide-details="true"
|
|
clearable
|
|
variant="outlined"
|
|
@keydown.enter.exact="enterOnly"
|
|
></v-textarea>
|
|
<v-btn
|
|
:disabled="loading"
|
|
icon="send"
|
|
title="Send"
|
|
class="ml-3"
|
|
@click="clickSendBtn"
|
|
></v-btn>
|
|
</div>
|
|
</template> |