hordelab/hub
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: split chat functionality in chat.js

Browse Source
This commit is contained in:
Shivering Ocelot committed 2026-09-21 13:22:46 -05:00
1 parent 5aa086cb15
commit dac5d201cd
2 files changed
+449 -399
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/chat.js
+410
View File
@@ -0,0 +1,410 @@
import { ref, computed } from 'vue';
import * as backend from './backend';
import * as runs from './runs';
import * as ui from './ui';
// === Thread Helpers === //
const THREAD_STALE_MS = 10 * 60 * 1000;
function messageTime (message) {
// Accept the common backend timestamp field names and formats
const t = message.timestamp ?? message.time ?? message.createdAt;
if (t == null) return null;
const ms = typeof t == 'number' ? (t < 1e12 ? t * 1000 : t) : Date.parse(t);
return isNaN(ms) ? null : ms;
}
function isMessageStale (message) {
const time = messageTime(message);
// No timestamp available -> treat as stale; a new thread is the safer default
return time == null || (Date.now() - time) > THREAD_STALE_MS;
}
// === Chat Session === //
// State and logic of one open chat, decoupled from the document.
// The view creates a session, hooks onRescroll() to its message container,
// and drives it with load()/unload(). Shared state is exposed as refs.
export class ChatSession {
constructor () {
// Chat state
this.chat = ref({});
this.messages = ref([]);
this.unsentMessages = ref([]);
this.currentThreadId = ref(null);
this.isNewThread = ref(true); // "New Thread" UI state
this.messageRunMap = ref({}); // messageId -> runId of the run it started
// Editing state
this.editingMessageId = ref(null);
this.noteMode = ref(false);
this.chatEntries = computed(() => {
return this.computeChatEntries(
this.messages.value.concat(this.unsentMessages.value)
);
});
this.editInfo = computed(() => {
const parts = [this.isNewThread.value ? 'New Thread' : `Thread ${this.currentThreadId.value}`];
if (this.editingMessageId.value != null) {
if (this.noteMode.value) {
parts.push(`Editing Note ${this.editingMessageId.value}`);
} else {
parts.push(`Editing ${this.editingMessageId.value}`);
}
} else if (this.noteMode.value) {
parts.push('Editing Note');
}
return parts.join(' - ');
});
// Internals
this.chatId = null;
this.agentNames = {};
// TODO: user sent messages are added without an id; send-chat-message
// should return the message id instead of matching by content
this._messageNonce = 1;
this._unsubscribeChat = null;
this._unsubscribeRuns = null;
this._runListener = null;
this._rescroll = null;
}
// The view injects a hook that re-scrolls its message container
onRescroll (callback) {
this._rescroll = callback;
}
rescroll (options) {
if (this._rescroll) this._rescroll(options);
}
// === Loading === //
async load (chatId) {
this.unload();
this.chatId = chatId;
// Reset state
this.chat.value = {};
this.messages.value = [];
this.unsentMessages.value = [];
this.messageRunMap.value = {};
this.currentThreadId.value = null;
this.isNewThread.value = true;
this.editingMessageId.value = null;
this.noteMode.value = false;
// Create an agent name dictionary
const agents = await backend.getAgents();
if (this.chatId != chatId) return; // A newer load or unload has won
this.agentNames = {};
for (let agent of agents) {
this.agentNames[agent.id] = agent.name;
}
backend.getChat(chatId).then(info => {
if (this.chatId == chatId) {
this.chat.value = Object.assign({}, info);
}
});
this._unsubscribeChat = backend.onChatMessages(chatId, it => this.receiveMessage(it));
this._unsubscribeRuns = runs.onChatMessage(chatId, event => this.trackRun(event));
const response = await backend.sendAction("get-chat-messages", {chatId});
if (this.chatId != chatId) return;
// Always good to duplicate when assigning to a ref
this.messages.value = response.messages.map(it => ({
id: this._messageNonce++,
type: it.kind,
subkind: it.subkind,
sender: it.sender,
content: it.content,
threadId: it.threadId,
}));
// Continue the last thread only if it is recent (under 10 minutes old);
// otherwise start in "New Thread" state
const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage && lastMessage.threadId != null && !isMessageStale(lastMessage)) {
this.currentThreadId.value = lastMessage.threadId;
this.isNewThread.value = false;
}
// Must happen on the same async-thread that sets `messages`
this.rescroll({forceBottom: true});
}
unload () {
this.chatId = null;
if (this._unsubscribeChat) this._unsubscribeChat();
this._unsubscribeChat = null;
if (this._unsubscribeRuns) this._unsubscribeRuns();
this._unsubscribeRuns = null;
if (this._runListener) this._runListener.cancel();
this._runListener = null;
}
// === Incoming Messages === //
// Handles a chat message broadcast from the backend
receiveMessage (it) {
if (it.update) {
// Find message in list. If not found, add it
for (let entry of this.messages.value) {
if (entry.id == it.id) {
entry.type = it.kind;
entry.subkind = it.subkind;
entry.format = it.format;
entry.content = it.content;
entry.threadId = it.threadId;
return;
}
}
}
if (it.sender == 'user') {
let unsent = this.unsentMessages.value.shift();
if (unsent) {
if (unsent.content == it.content) {
unsent.id = it.id;
unsent.threadId = it.threadId;
this.addMessage(unsent);
return;
} else {
// Remove from unsent list and add message as received
ui.alert("TODO: update unsent message");
}
}
}
this.addMessage({
id: it.id,
type: it.kind,
subkind: it.subkind,
format: it.format,
sender: it.sender,
content: it.content,
threadId: it.threadId,
});
}
// === Run Tracking === //
// Tracks the run started by a message, so the view can offer cancellation
trackRun (event) {
if (!this._runListener) {
this._runListener = runs.addRunListener(run => this.onRunUpdate(run));
}
this._runListener.addRunId(event.runId);
this.messageRunMap.value[event.messageId] = event.runId;
}
onRunUpdate (run) {
if (!run.done) return;
// TODO: RunListener should expose a removeRunId() method
this._runListener.runIds.delete(run.id);
const map = this.messageRunMap.value;
for (let messageId in map) {
if (map[messageId] == run.id) {
delete map[messageId];
}
}
}
cancelMessageRun (messageId) {
const runId = this.messageRunMap.value[messageId];
if (runId != null) runs.cancelRun(runId);
}
// === Sending === //
addMessage (message, options={}) {
this.rescroll();
if (options.unsent) {
message.id = this._messageNonce++;
this.unsentMessages.value.push(message);
} else {
this.messages.value.push(message);
}
}
// Sends a new user message, or updates the one being edited.
// `kind`/`subkind` produce special messages (notes, resources, ...).
// Returns false when nothing was sent, so the view can restore its input.
async sendMessage (content, { kind=null, subkind=null } = {}) {
if (!content || !content.trim()) return false;
if (kind == null && this.noteMode.value) kind = 'note';
const messageId = this.editingMessageId.value;
if (messageId == null) {
// "New Thread" is a UI state: the thread is only created upstream
// here, once there is a message to put into it
const threadId = await this.resolveSendThread();
if (threadId == null) return false;
backend.sendAction("send-chat-message", {
chatId: this.chatId, content, threadId, kind, subkind,
}).then(response => {
if (response && response.error) {
ui.alert("Error sending chat message: " + response.error);
}
});
this.addMessage({
type: kind || 'message',
subkind,
sender: 'user',
content,
threadId,
}, {unsent: true});
} else {
const messageRef = this.messages.value.find(it => it.id == messageId);
backend.sendAction("update-chat-message", {
messageId, content, kind,
}).then(response => {
if (response && response.error) {
ui.alert("Error updating message: " + response.error);
}
});
messageRef.type = kind || 'message';
messageRef.content = content;
this.editingMessageId.value = null;
}
if (kind == 'note') this.noteMode.value = false;
return true;
}
// Returns the threadId to send into, creating the thread upstream
// if we're in "New Thread" state
async resolveSendThread () {
if (!this.isNewThread.value) return this.currentThreadId.value;
const res = await backend.sendAction("create-chat-thread", {chatId: this.chatId});
if (res.threadId == null) {
ui.alert("Error creating thread" + (res.error ? `: ${res.error}` : ""));
return null;
}
this.currentThreadId.value = res.threadId;
this.isNewThread.value = false;
return res.threadId;
}
// Begins or ends message editing; the view keeps its input field in sync
setEditing (messageId) {
this.editingMessageId.value = messageId ?? null;
}
// === Threads === //
activateThread (threadId) {
if (threadId == null) return; // "New Thread" placeholder isn't clickable
// Continuing a thread: it becomes the one open thread
this.currentThreadId.value = threadId;
this.isNewThread.value = false;
this.rescroll();
}
startNewThread () {
// Pure UI state — nothing is created upstream until a message is sent
this.isNewThread.value = true;
this.currentThreadId.value = null;
this.rescroll();
}
// === Entry Computation === //
// Builds the display list: the active thread's messages in order, every
// other thread collapsed into a single preview header
computeChatEntries (messages) {
let entries = [];
let threadGroups = {}; // Map<int, message[]>
const senderName = (sender) => {
let isInt = !isNaN(parseInt(sender));
if (isInt) {
return this.agentNames[sender] || `<agent-${sender}>`;
} else {
return sender;
}
};
const addThreadHeader = (threadId, group, options={}) => {
let preview = null;
const last = group[group.length - 1];
if (last && !options.active) {
let content = String(last.content || '').split('\n')[0].trim();
if (content.length > 100) content = content.slice(0, 100) + '…';
preview = {sender: senderName(last.sender), content};
}
entries.push({
type: 'thread-header',
threadId,
active: !!options.active,
messageCount: group.length,
preview,
});
};
// 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);
}
}
// Only the active thread is ever open; every other thread collapses
// into a single preview header
const activeThreadId = this.isNewThread.value ? null : this.currentThreadId.value;
let activeHeaderAdded = false;
// Second pass: Build the display list with correct ordering
for (let _msg of messages) {
const message = Object.assign({}, _msg, {sender: senderName(_msg.sender)});
if (message.threadId == null) {
entries.push(message);
continue;
}
let threadId = message.threadId;
let group = threadGroups[threadId];
if (threadId === activeThreadId) {
if (!activeHeaderAdded) {
addThreadHeader(threadId, group, {active: true});
activeHeaderAdded = true;
}
entries.push(message);
} else if (message.id == group[group.length - 1].id) {
// Collapsed: one preview card in place of the thread's last message
addThreadHeader(threadId, group);
}
}
// "New Thread" UI state: placeholder where the new thread will start
if (this.isNewThread.value) {
addThreadHeader(null, []);
}
return entries;
}
}
frontend/src/views/Chat.vue
+39 -399
View File
@@ -1,6 +1,6 @@
<script setup>
import {
ref, watch, computed,
ref, watch,
onMounted, onUnmounted,
} from "vue";
@@ -9,7 +9,7 @@
import * as backend from '../backend';
import * as ui from '../ui';
import * as runs from '../runs';
import { ChatSession } from '../chat';
const props = defineProps({
id: {
@@ -18,224 +18,36 @@
},
});
let chatId = null;
let agentNames = {};
// Chat state and logic live in the session; the view binds to its refs
const session = new ChatSession();
const {
chat, chatEntries, editInfo,
noteMode, editingMessageId, messageRunMap,
} = session;
// Chat State
const chat = ref({});
const messages = ref([]);
const unsentMessages = ref([]);
const currentThreadId = ref(null);
const chatEntries = computed(() => {
return computeChatEntries(messages.value.concat(unsentMessages.value));
});
// UI State
const isNewThread = ref(true); // "New Thread" UI state
const editingMessageId = ref(null);
const noteMode = ref(false);
const messageRunMap = ref({});
// UI state coupled to the document itself
const expandedLogs = ref({}); // Message ids of logs currently expanded
const editInfo = computed(() => {
const parts = [isNewThread.value ? 'New Thread' : `Thread ${currentThreadId.value}`]
if (editingMessageId.value != null) {
if (noteMode.value) {
parts.push(`Editing Note ${editingMessageId.value}`);
} else {
parts.push(`Editing ${editingMessageId.value}`);
}
} else if (noteMode.value) {
parts.push('Editing Note');
}
return parts.join(' - ');
});
let _isMounted = false;
let unsubscribeChat = null;
let unsubscribeRuns = null;
let runListener = 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;
// === Thread Helpers === //
const THREAD_STALE_MS = 10 * 60 * 1000;
function messageTime (message) {
// Accept the common backend timestamp field names and formats
const t = message.timestamp ?? message.time ?? message.createdAt;
if (t == null) return null;
const ms = typeof t == 'number' ? (t < 1e12 ? t * 1000 : t) : Date.parse(t);
return isNaN(ms) ? null : ms;
}
function isMessageStale (message) {
const time = messageTime(message);
// No timestamp available -> treat as stale; a new thread is the safer default
return time == null || (Date.now() - time) > THREAD_STALE_MS;
}
// === State Management === //
async function loadChatState (newId) {
// This line was converting newId into an integer.
// Some parts of the program may still rely on it.
chatId = newId;
// Create an agent name dictionary
const _agents = await backend.getAgents();
for (let agent of _agents) {
agentNames[agent.id] = agent.name;
}
backend.getChat(chatId).then(info => {
chat.value = Object.assign({}, info);
});
unsubscribeChat = backend.onChatMessages(chatId, it => {
if (it.update) {
// Find message in list. If not found, add it
for (let entry of messages.value) {
if (entry.id == it.id) {
entry.type = it.kind;
entry.subkind = it.subkind;
entry.format = it.format;
entry.content = it.content;
entry.threadId = it.threadId;
return;
}
}
}
if (it.sender == 'user') {
let unsent = unsentMessages.value.shift();
if (unsent) {
if (unsent.content == it.content) {
unsent.id = it.id;
unsent.threadId = it.threadId;
addMessage(unsent);
return;
} else {
// Remove from unsent list and add message as received
ui.alert("TODO: update unsent message");
}
}
}
addMessage({
id: it.id,
type: it.kind,
subkind: it.subkind,
format: it.format,
sender: it.sender,
content: it.content,
threadId: it.threadId,
});
});
unsubscribeRuns = runs.onChatMessage(chatId, onRunMessage);
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,
subkind: it.subkind,
sender: it.sender,
content: it.content,
threadId: it.threadId,
}));
// Continue the last thread only if it is recent (under 10 minutes old);
// otherwise start in "New Thread" state
if (response.messages.length > 0) {
const lastMessage = response.messages[response.messages.length - 1];
if (lastMessage.threadId != null && !isMessageStale(lastMessage)) {
activateThread(lastMessage.threadId);
} else {
startNewThread();
}
} 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;
// thread state was set above; no need to reset
}
async function unloadChatState () {
if (unsubscribeChat) unsubscribeChat();
unsubscribeChat = null;
if (unsubscribeRuns) unsubscribeRuns();
unsubscribeRuns = null;
}
function onRunMessage (event) {
if (!runListener) {
runListener = runs.addRunListener(onRunUpdate);
}
runListener.addRunId(event.runId);
messageRunMap.value[event.messageId] = event.runId;
}
function onRunUpdate (newRun) {
if (newRun.done) {
runListener.runIds.delete(newRun.id);
let map = messageRunMap.value;
for (let messageId in map) {
if (map[messageId] == newRun.id) {
delete map[messageId];
}
}
}
}
// 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, options={}) {
requestRescroll();
if (options.unsent) {
message.id = _messageNonce++;
unsentMessages.value.push(message);
} else {
messages.value.push(message);
}
}
let _isMounted = false;
watch(() => props.id, newId => {
if (_isMounted) session.load(newId);
});
onMounted(() => {
_isMounted = true;
session.onRescroll(requestRescroll); // function declarations are hoisted
session.load(props.id);
});
onUnmounted(() => {
_isMounted = false;
session.unload();
});
// === Chat Functionality === //
async function sendMessage () {
let elem = inputFieldElem.value;
@@ -243,159 +55,9 @@
let content = elem.innerText;
elem.innerText = "";
if (!content.trim()) return; // Don't send empty messages
let messageId = editingMessageId.value;
let isNote = noteMode.value;
if (messageId == null) {
// "New Thread" is a UI state: the thread is only created upstream
// here, once there is a message to put into it
let threadId = await resolveSendThread();
if (threadId == null) {
elem.innerText = content; // let the user retry
return;
}
backend.sendAction("send-chat-message", {
chatId, content, threadId,
kind: isNote ? 'note' : null,
}).then((response) => {
if (response['error']) {
ui.alert("Error sending chat message: " + response['error']);
}
});
const newMessage = {
type: isNote ? 'note' : 'message',
sender: 'user',
content,
threadId,
};
addMessage(newMessage, {unsent: true});
} else {
const messageRef = messages.value.find((it) => it.id == messageId);
backend.sendAction("update-chat-message", {
messageId, content,
'kind': isNote ? 'note' : null,
}).then((response) => {
if (response['error']) {
ui.alert("Error updating message: " + response['error']);
}
});
messageRef.type = isNote ? 'note' : 'message';
messageRef.content = content;
}
if (isNote) noteMode.value = false;
}
async function resolveSendThread () {
// Returns the threadId to send into, creating the thread upstream
// if we're in "New Thread" state
if (!isNewThread.value) return currentThreadId.value;
const res = await backend.sendAction("create-chat-thread", {chatId});
if (res.threadId == null) {
ui.alert("Error creating thread" + (res.error ? `: ${res.error}` : ""));
return null;
}
currentThreadId.value = res.threadId;
isNewThread.value = false;
return res.threadId;
}
function computeChatEntries (messages) {
let entries = [];
let threadGroups = {}; // Map<int, message[]>
function senderName (sender) {
let isInt = !isNaN(parseInt(sender));
if (isInt) {
return agentNames[sender] || `<agent-${sender}>`;
} else {
return sender;
}
}
function addThreadHeader (threadId, group, options={}) {
let preview = null;
const last = group[group.length - 1];
if (last && !options.active) {
let content = String(last.content || '').split('\n')[0].trim();
if (content.length > 100) content = content.slice(0, 100) + '…';
preview = {sender: senderName(last.sender), content};
}
entries.push({
type: 'thread-header',
threadId,
active: !!options.active,
messageCount: group.length,
preview,
});
}
// 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);
}
}
// Only the active thread is ever open; every other thread collapses
// into a single preview header
const activeThreadId = isNewThread.value ? null : currentThreadId.value;
let activeHeaderAdded = false;
// Second pass: Build the display list with correct ordering
for (let _msg of messages) {
const message = Object.assign({}, _msg, {sender: senderName(_msg.sender)});
if (message.threadId == null) {
entries.push(message);
continue;
}
let threadId = message.threadId;
let group = threadGroups[threadId];
if (threadId === activeThreadId) {
if (!activeHeaderAdded) {
addThreadHeader(threadId, group, {active: true});
activeHeaderAdded = true;
}
entries.push(message);
} else if (message.id == group[group.length - 1].id) {
// Collapsed: one preview card in place of the thread's last message
addThreadHeader(threadId, group);
}
}
// "New Thread" UI state: placeholder where the new thread will start
if (isNewThread.value) {
addThreadHeader(null, []);
}
return entries;
}
function activateThread (threadId) {
if (threadId == null) return; // "New Thread" placeholder isn't clickable
// Continuing a thread: it becomes the one open thread
currentThreadId.value = threadId;
isNewThread.value = false;
requestRescroll();
}
function startNewThread () {
// Pure UI state — nothing is created upstream until a message is sent
isNewThread.value = true;
currentThreadId.value = null;
requestRescroll();
// False when nothing was sent (empty input or thread creation failed)
const ok = await session.sendMessage(content);
if (!ok) elem.innerText = content; // let the user retry
}
async function addRemoteResource () {
@@ -412,36 +74,14 @@
})));
if (!selected) return;
const threadId = await resolveSendThread();
if (threadId == null) return;
backend.sendAction("send-chat-message", {
chatId, content: selected, threadId,
kind: 'resource', subkind: 'remote',
}).then((response) => {
if (response['error']) {
ui.alert("Error adding remote: " + response['error']);
}
});
// Optimistic entry, matched against the server broadcast by content
addMessage({
type: 'resource',
subkind: 'remote',
sender: 'user',
content: selected,
threadId,
}, {unsent: true});
// Sends a 'resource' message into the current (or a new) thread
await session.sendMessage(selected, {kind: 'resource', subkind: 'remote'});
}
function editMessage (message) {
let elem = inputFieldElem.value;
if (message) {
editingMessageId.value = message.id;
elem.innerText = message.content;
} else {
editingMessageId.value = null;
elem.innerText = "";
}
elem.innerText = message ? message.content : "";
session.setEditing(message ? message.id : null);
}
async function deleteChat (chat) {
@@ -520,14 +160,14 @@
const elem = chatContainerElem.value;
const scroll = elem.scrollTop;
const max = elem.scrollTopMax;
const max = elem.scrollHeight - elem.clientHeight;
// Rescroll in 2 frames
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
// Chat was fully scrolled down
if (forceBottom || scroll == max) {
elem.scrollTop = elem.scrollTopMax;
elem.scrollTop = max;
} 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
@@ -563,13 +203,13 @@
:key="msg.id ?? ('thread-' + msg.threadId)"
:message="msg"
@open-menu="chatEntryContextMenu"
@open-thread="activateThread"
@open-thread="session.activateThread"
:log-expanded="expandedLogs[msg.id]"
@toggle-log="toggleLogExpand(msg)"
:cancellable="messageRunMap[msg.id]"
@cancel="runs.cancelRun(messageRunMap[msg.id])"
@cancel="session.cancelMessageRun(msg.id)"
/>
</div>
@@ -581,7 +221,7 @@
<div class="input-field" ref="inputFieldElem" @keydown="inputKeyDown($event)" contenteditable></div>
<div class="input-row">
<button @click="startNewThread()">
<button @click="session.startNewThread()">
New Thread
</button>
<button @click="addRemoteResource()">