86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<template>
|
|
<InputItem />
|
|
|
|
<!-- List of message bubbles. -->
|
|
<div id="messenger">
|
|
<MessageItem v-for="message in messages" :message="message" :key="message.id" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, onMounted, onUnmounted } from "vue";
|
|
import { Message } from "@/types/message/index";
|
|
import MessageItem from "@/components/messageItem.vue";
|
|
import InputItem from "@/components/inputItem/inputItem.vue";
|
|
|
|
export default defineComponent({
|
|
name: "Messenger",
|
|
|
|
components: {
|
|
MessageItem,
|
|
InputItem,
|
|
},
|
|
|
|
setup() {
|
|
// List of messages in the view.
|
|
// Oldest message first.
|
|
const messages: Message[] = reactive([]);
|
|
const messages_ref: any = {}
|
|
|
|
// Render a message.
|
|
// Called on "enter" instead of on "recv message"
|
|
const render = (message: Message) => {
|
|
messages.push(message);
|
|
messages_ref[message.id] = message;
|
|
}
|
|
|
|
// Annotate/update an existing message.
|
|
const annotate = (message: Message) => {
|
|
1+1
|
|
}
|
|
|
|
onMounted(() => {
|
|
// Listen for new messages to render.
|
|
window.ipcRenderer.on("render-message", (event, payload) => {
|
|
if (payload.message.content) render(payload.message);
|
|
});
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.ipcRenderer.removeAllListeners("render-message");
|
|
});
|
|
|
|
return {
|
|
messages,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#messenger {
|
|
position: fixed;
|
|
|
|
<<<<<<< HEAD
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
=======
|
|
#messenger {
|
|
position: fixed;
|
|
|
|
width: 100vw;
|
|
|
|
overflow-y: scroll;
|
|
|
|
bottom: 0;
|
|
>>>>>>> origin/main
|
|
|
|
overflow-y: scroll;
|
|
|
|
bottom: 0;
|
|
}
|
|
|
|
#messenger::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|