Adam French
ab2b0a1e3d
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m47s
54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
|
|
import Button from "@/components/input/Button.vue";
|
|
import { useMessagesStore } from "@/stores/messages";
|
|
import Header from "@/components/text/Header.vue";
|
|
|
|
const messagesStore = useMessagesStore();
|
|
const messages = computed(() => messagesStore.messages);
|
|
const messageInput = ref("");
|
|
const messagesContainer = ref(null);
|
|
|
|
function scrollToBottom() {
|
|
nextTick(() => {
|
|
if (messagesContainer.value) {
|
|
messagesContainer.value.scrollTop =
|
|
messagesContainer.value.scrollHeight;
|
|
}
|
|
});
|
|
}
|
|
|
|
watch(messages, scrollToBottom, { deep: true });
|
|
|
|
function sendMessage() {
|
|
const text = messageInput.value.trim();
|
|
if (!text) return;
|
|
messagesStore.sendMessage(text);
|
|
messageInput.value = "";
|
|
}
|
|
|
|
onMounted(() => {
|
|
messagesStore.connect();
|
|
});
|
|
onUnmounted(() => {
|
|
messagesStore.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col">
|
|
<Header>Chat</Header>
|
|
<div
|
|
ref="messagesContainer"
|
|
class="flex flex-col flex-1 overflow-y-auto p-2"
|
|
>
|
|
<p v-for="message in messages" :key="message.id">
|
|
<span class="text-tertiary">{{ message.authorId }}:</span>
|
|
{{ message.text }}
|
|
</p>
|
|
</div>
|
|
<input v-model="messageInput" @keyup.enter="sendMessage" />
|
|
<Button @click="sendMessage">Send</Button>
|
|
</div>
|
|
</template>
|