437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<script setup>
|
|
import {
|
|
ref, watch, computed,
|
|
onMounted, onUnmounted,
|
|
} from "vue";
|
|
|
|
import * as backend from '../backend';
|
|
import * as ui from '../ui';
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
let chatId = null;
|
|
|
|
// Chat State
|
|
const chat = ref({});
|
|
const messages = ref([]);
|
|
const currentThreadId = ref(null);
|
|
const chatEntries = computed(() => {
|
|
return computeChatEntries(messages.value);
|
|
});
|
|
|
|
// UI State
|
|
const expandedThreads = ref({}); // Object<int: bool>, to simulate a Set<int>
|
|
const editingMessageId = ref(null);
|
|
const noteMode = ref(false);
|
|
|
|
let _isMounted = false;
|
|
let unsubscribeChat = null;
|
|
|
|
// TODO: user sent message is added without id.
|
|
// User should receive his own message notification, and find its message to assign it an id.
|
|
// Alternatively, return the message id in send-chat-message action. Think thats better.
|
|
let _messageNonce = 1;
|
|
|
|
|
|
// === State Management === //
|
|
|
|
async function loadChatState (newId) {
|
|
chatId = parseInt(newId);
|
|
if (chatId == null) {
|
|
console.error("Invalid chat id", chatId);
|
|
return;
|
|
}
|
|
|
|
unsubscribeChat = backend.onChatMessages(chatId, it => {
|
|
if (it.sender == 'user') return;
|
|
|
|
addMessage({
|
|
id: it.id,
|
|
type: it.kind,
|
|
sender: it.sender,
|
|
content: it.content,
|
|
threadId: it.threadId,
|
|
});
|
|
});
|
|
|
|
let response = await backend.sendAction("get-chat-messages", {chatId});
|
|
// Always good to duplicate when assigning to a ref
|
|
messages.value = response.messages.map(it => ({
|
|
//id: it.id,
|
|
id: _messageNonce++,
|
|
type: it.kind,
|
|
sender: it.sender,
|
|
content: it.content,
|
|
threadId: it.threadId,
|
|
}));
|
|
|
|
// Always send messages in a thread, determine which one to start with
|
|
if (response.messages.length > 0) {
|
|
const lastMessage = response.messages[response.messages.length - 1];
|
|
const lastThread = lastMessage.threadId;
|
|
if (lastThread == null) {
|
|
startNewThread();
|
|
} else {
|
|
currentThreadId.value = lastMessage.threadId;
|
|
expandThread(lastMessage.threadId, true);
|
|
}
|
|
} else {
|
|
startNewThread();
|
|
}
|
|
|
|
// This must happen on the same async-thread that sets `messages`
|
|
requestRescroll({forceBottom: true});
|
|
|
|
// Reset UI State
|
|
editingMessageId.value = null;
|
|
noteMode.value = false;
|
|
// don't reset expandedThreads, it's nice to keep for the session
|
|
}
|
|
|
|
async function unloadChatState () {
|
|
if (unsubscribeChat) unsubscribeChat();
|
|
unsubscribeChat = null;
|
|
}
|
|
|
|
// This won't fire when called, the mounted callback will take care
|
|
watch(() => props.id, newId => {
|
|
if (_isMounted) {
|
|
unloadChatState();
|
|
loadChatState(newId);
|
|
}
|
|
})
|
|
|
|
onMounted(async () => {
|
|
_isMounted = true;
|
|
loadChatState(props.id);
|
|
});
|
|
|
|
onUnmounted(async () => {
|
|
_isMounted = false;
|
|
unloadChatState();
|
|
});
|
|
|
|
|
|
// === Chat Functionality === //
|
|
|
|
const inputFieldElem = ref(null);
|
|
const chatContainerElem = ref(null);
|
|
|
|
function addMessage (message) {
|
|
requestRescroll();
|
|
message.id = _messageNonce++;
|
|
messages.value.push(message);
|
|
}
|
|
|
|
async function sendMessage () {
|
|
let elem = inputFieldElem.value;
|
|
|
|
let content = elem.innerText;
|
|
elem.innerText = "";
|
|
|
|
if (!content.trim()) return; // Don't send empty messages
|
|
|
|
let threadId = currentThreadId.value;
|
|
let messageId = editingMessageId.value;
|
|
let isNote = noteMode.value;
|
|
|
|
if (messageId == null) {
|
|
backend.sendAction("send-chat-message", {
|
|
chatId, content, threadId,
|
|
kind: isNote ? 'note' : null,
|
|
}).then((response) => {
|
|
if (response['error']) {
|
|
print("Error sending chat message: ${response['error']}");
|
|
}
|
|
});
|
|
|
|
const newMessage = {
|
|
type: isNote ? 'note' : 'message',
|
|
sender: 'user',
|
|
content,
|
|
threadId,
|
|
};
|
|
addMessage(newMessage);
|
|
} else {
|
|
const messageRef = messages.firstWhere((element) => element.id == messageId);
|
|
|
|
backend.sendAction("update-chat-message", {
|
|
messageId, content,
|
|
'kind': isNote ? 'note' : null,
|
|
}).then((response) => {
|
|
if (response['error']) {
|
|
print("Error updating message: ${response['error']}");
|
|
}
|
|
});
|
|
|
|
messageRef.type = isNote ? 'note' : 'message';
|
|
messageRef.content = content;
|
|
}
|
|
|
|
if (isNote) noteMode.value = false;
|
|
}
|
|
|
|
function computeChatEntries (messages) {
|
|
let entries = [];
|
|
let threadGroups = {}; // Map<int, message[]>
|
|
|
|
function addThreadHeader (threadId, group) {
|
|
entries.push({
|
|
type: 'thread-header',
|
|
threadId,
|
|
messageCount: group.length,
|
|
expanded: Boolean(expandedThreads.value[threadId]),
|
|
});
|
|
}
|
|
|
|
// First pass: Group messages by thread
|
|
for (let message of messages) {
|
|
if (message.threadId != null) {
|
|
let group = threadGroups[message.threadId] ||
|
|
(threadGroups[message.threadId] = []);
|
|
group.push(message);
|
|
}
|
|
}
|
|
|
|
// Second pass: Build the display list with correct ordering
|
|
for (let message of messages) {
|
|
|
|
// Non-threaded messages and notes go directly to the entry list
|
|
if (message.threadId == null || message.type == 'note') {
|
|
entries.push(message);
|
|
|
|
} else {
|
|
let threadId = message.threadId;
|
|
let group = threadGroups[threadId];
|
|
|
|
// If the thread is expanded, add messages as they appear
|
|
if (expandedThreads.value[threadId]) {
|
|
// Add the thread header before the first message
|
|
if (message.id == group[0].id) {
|
|
addThreadHeader(threadId, group);
|
|
}
|
|
entries.push(message);
|
|
} else {
|
|
// Add collapsed thread header in place of the last message
|
|
if (message.id == group[group.length-1].id) {
|
|
addThreadHeader(threadId, group);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add current thread mannually if it has no messages
|
|
const current = currentThreadId.value;
|
|
if (current != null && threadGroups[current] == null) {
|
|
addThreadHeader(current, []);
|
|
}
|
|
|
|
return entries;
|
|
}
|
|
|
|
function expandThread (threadId, value) {
|
|
expandedThreads.value[threadId] = value;
|
|
requestRescroll();
|
|
}
|
|
|
|
async function startNewThread () {
|
|
const res = await backend.sendAction("create-chat-thread", {chatId});
|
|
console.log("Starting a new thread", res);
|
|
if (res.threadId != null) {
|
|
currentThreadId.value = res.threadId;
|
|
expandThread(res.threadId, true);
|
|
}
|
|
}
|
|
|
|
|
|
// === UI Helper Functions === //
|
|
|
|
function requestRescroll ({forceBottom=false, bottomRelative=false}={}) {
|
|
const elem = chatContainerElem.value;
|
|
|
|
const scroll = elem.scrollTop;
|
|
const max = elem.scrollTopMax;
|
|
|
|
// Rescroll in 2 frames
|
|
window.requestAnimationFrame(() => {
|
|
window.requestAnimationFrame(() => {
|
|
// Chat was fully scrolled down
|
|
if (forceBottom || scroll == max) {
|
|
elem.scrollTop = elem.scrollTopMax;
|
|
} else if (bottomRelative) {
|
|
// TODO: Keep scroll at the same distance from the bottom.
|
|
// This will be used when the user scrolls to the top and previous messages are loaded
|
|
} else {
|
|
// Do nothing, scroll remains in place
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function chatEntryClass (msg) {
|
|
if (msg.type == 'note') {
|
|
return ['note'];
|
|
} else if (msg.type == 'message') {
|
|
return ['message', msg.sender == 'user' ? 'sent' : 'received'];
|
|
} else {
|
|
return ['info'];
|
|
}
|
|
}
|
|
|
|
function inputKeyDown (event) {
|
|
if (event.key == "Enter" && event.ctrlKey) {
|
|
event.preventDefault();
|
|
sendMessage();
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<h1>{{ chat.name || 'Chat #' + chat.id }}</h1>
|
|
|
|
<div class="messages-container" ref="chatContainerElem">
|
|
<div v-for="msg in chatEntries" :class="chatEntryClass(msg)">
|
|
<template v-if="msg.type == 'message' || msg.type == null">
|
|
<div v-if="msg.sender != 'user'" class="sender">{{msg.sender}}</div>
|
|
<div class="content">{{msg.content}}</div>
|
|
</template>
|
|
|
|
<template v-if="msg.type == 'note'">
|
|
<div class="sender">{{msg.sender}}</div>
|
|
<div class="content">{{msg.content}}</div>
|
|
</template>
|
|
|
|
<template v-if="msg.type == 'thread-header'">
|
|
<div class="content">
|
|
Thread {{msg.threadId}} ({{msg.messageCount}} messages)
|
|
<a hred="#" @click.prevent="expandThread(msg.threadId, !msg.expanded)">{{msg.expanded ? "Hide" : "Show"}}</a>
|
|
</div>
|
|
</template>
|
|
|
|
<!--message v-if="!msg.collapse" :value="msg.content" :format="msg.format"></message-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-container">
|
|
<div v-if="noteMode" style="font-size: 75%; margin-bottom: 0.7em;">
|
|
Editing Note
|
|
</div>
|
|
|
|
<div class="input-field" ref="inputFieldElem" @keydown="inputKeyDown($event)" contenteditable></div>
|
|
|
|
<div class="input-row">
|
|
<button @click="startNewThread()">
|
|
New Thread
|
|
</button>
|
|
<button @click="noteMode=!noteMode">
|
|
{{noteMode ? 'Cancel Note' : 'Make Note'}}
|
|
</button>
|
|
<button id="send-button" @click="sendMessage()">
|
|
Send
|
|
<span style="font-size: 66%;">(Ctrl+Enter)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped>
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.messages-container {
|
|
flex: 1;
|
|
overflow-y: scroll;
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.messages-container > div {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.info {
|
|
align-self: center;
|
|
}
|
|
|
|
.message {
|
|
width: fit-content;
|
|
max-width: 50em;
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
background-color: var(--color-background-soft);
|
|
}
|
|
|
|
.note {
|
|
width: fit-content;
|
|
padding: 10px;
|
|
background-color: var(--color-background-soft);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.message.sent {
|
|
align-self: end;
|
|
margin-left: 2em;
|
|
}
|
|
.message.received {
|
|
margin-right: 2em;
|
|
}
|
|
|
|
.message .content {
|
|
white-space: preserve;
|
|
width: fit-content;
|
|
}
|
|
|
|
.message .sender,
|
|
.note .sender {
|
|
font-weight: bold;
|
|
font-size: 100%;
|
|
margin-top: -5px; /* half message padding */
|
|
}
|
|
|
|
.input-container {
|
|
padding: 10px;
|
|
background-color: var(--color-background-soft);
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.input-field {
|
|
white-space: preserve;
|
|
outline: none;
|
|
}
|
|
|
|
.input-field:empty::before {
|
|
opacity: 50%;
|
|
content: "Type your message...";
|
|
}
|
|
|
|
.input-row {
|
|
width: 100%;
|
|
}
|
|
|
|
#send-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background-color: #4caf50;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
|
|
height: min-content;
|
|
|
|
/* align-self: end; /* for flex rows */
|
|
float: right; /* for flow rows */
|
|
}
|
|
</style>
|