feat: fixed the @keydown.enter function so that it actually works, previously it would not work properly

This commit is contained in:
Lion Arar 2025-09-26 11:26:40 -04:00
parent 5036be71e6
commit 64c7f34f41

View File

@ -26,6 +26,15 @@ const sendMessage = async () => {
text.value = ''; text.value = '';
} }
const handleEnter = async (e: KeyboardEvent) => {
if (e.shiftKey) {
text.value += '\n';
} else {
e.preventDefault();
await sendMessage();
}
};
</script> </script>
<template> <template>
@ -36,8 +45,8 @@ const sendMessage = async () => {
<DialogueContent :messages="messages"></DialogueContent> <DialogueContent :messages="messages"></DialogueContent>
</div> </div>
<q-form @submit="sendMessage" class="row chat-footer"> <q-form @submit="sendMessage" class="row chat-footer">
<q-input type="textarea" style="margin-right: 5px;" autogrow v-model="text" label="Enter a Message" <q-input v-model="text" label="Enter a Message" autogrow class="col" style="margin-right: 5px;"
class="col" /> @keydown.enter="handleEnter" />
<q-btn type="submit" :ripple="{ center: true }" color="primary" glossy label="Send" <q-btn type="submit" :ripple="{ center: true }" color="primary" glossy label="Send"
style="align-self: flex-end; width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2"> style="align-self: flex-end; width:60px; height:45px; margin-top: 8px; font-size: 14px;" class="col-2">
</q-btn> </q-btn>