247 lines
8.7 KiB
Vue
247 lines
8.7 KiB
Vue
<script setup lang="ts">
|
|
import { type BaseMessage, type Message, ChatErrorType } from '~/composables/useChat';
|
|
import type { ModelWithProvider } from '~/composables/useModels';
|
|
import { buildFocusedMessageTree } from '~~/utils/message';
|
|
|
|
const rootStart = Date.now();
|
|
|
|
const chatPaneWrapper = ref<HTMLElement | null>(null);
|
|
const inputValue = ref<BaseMessage>({ content: '', fileIds: [] });
|
|
const route = useRoute();
|
|
const { getAgent } = await useAgents();
|
|
const { open: sidebarOpen, openSidebar } = useSidebar();
|
|
const { providers, allModels } = await useModels();
|
|
const { addShortcut } = useKeyboardShortcuts();
|
|
|
|
const agent = getAgent(route.params.id as string);
|
|
|
|
const topicId = computed(() => route.params.topicId as string);
|
|
const { topic, sendMessage, startGeneration, regenerateMessage, patchMessageLocally } = await useChat(topicId);
|
|
|
|
watch(() => topic.value?.name, (newTopicName) => {
|
|
if (newTopicName !== undefined) {
|
|
useHead({ title: `${newTopicName} | Veridian` });
|
|
}
|
|
}, { immediate: true });
|
|
|
|
const submitMessage = async (message: BaseMessage, model: ModelWithProvider | null) => {
|
|
if (!model) {
|
|
console.error('No model selected');
|
|
return;
|
|
}
|
|
|
|
inputValue.value = { content: '', fileIds: [] };
|
|
|
|
const res = await sendMessage(message, async () => {
|
|
await nextTick();
|
|
setTimeout(() => {
|
|
scrollToBottom('instant')
|
|
});
|
|
});
|
|
if (!res.ok) {
|
|
console.error('Failed to send message:', res.error);
|
|
const chatInput = document.getElementById('chat') as HTMLInputElement | null;
|
|
console.log("chat input", chatInput, message);
|
|
if (chatInput) {
|
|
inputValue.value = message;
|
|
nextTick(() => {
|
|
chatInput.focus();
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
startGeneration(model);
|
|
};
|
|
|
|
const handleRegenerate = async (message: Message) => {
|
|
if (!agent.value!.defaultModelId) {
|
|
console.error('No model selected');
|
|
return;
|
|
}
|
|
|
|
let messageId: string;
|
|
if (
|
|
(message.focusedIndex !== undefined && message.focusedIndex !== null)
|
|
&& message.focusedIndex > 0
|
|
&& message.children.length > 0
|
|
) {
|
|
messageId = message.children[message.focusedIndex - 1]!.id;
|
|
} else {
|
|
messageId = message.id;
|
|
}
|
|
|
|
const model = allModels.value.find(m => m.id === agent.value!.defaultModelId);
|
|
if (!model || !model.provider) {
|
|
console.error('Model not found or provider not found');
|
|
return;
|
|
}
|
|
|
|
const res = await regenerateMessage(messageId, buildFocusedMessageTree(topic.value!.messages), model);
|
|
if (!res.ok) {
|
|
console.error('Failed to regenerate message:', ChatErrorType[res.error]);
|
|
return;
|
|
}
|
|
}
|
|
|
|
const handleDelete = async (rootMessage: Message) => {
|
|
await $fetch(`/api/messages/${rootMessage.id}`, {
|
|
method: 'DELETE',
|
|
});
|
|
}
|
|
|
|
const flatMessages = computed(() => {
|
|
const messages: Message[] = [];
|
|
|
|
for (const message of topic.value?.messages ?? []) {
|
|
messages.push(message);
|
|
if (message.children.length > 0) {
|
|
messages.push(...message.children as Message[]);
|
|
}
|
|
}
|
|
|
|
return messages;
|
|
});
|
|
|
|
const activeGeneration = computed(() => {
|
|
if (topic.value === null) return null;
|
|
const generations = flatMessages.value.flatMap(message => message.generation);
|
|
return generations?.find((generation) => generation?.status === 'pending') ?? null;
|
|
});
|
|
|
|
const { scrollToBottom } = useAutoScroll(chatPaneWrapper);
|
|
|
|
addShortcut(['ctrl', 'alt', 'n'], (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
(document.activeElement as HTMLElement | undefined)?.blur();
|
|
return navigateTo(`/agent/${route.params.id}`);
|
|
});
|
|
|
|
addShortcut(['ctrl', 'shift', 'enter'], (event) => {
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
if (lastMessage) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleRegenerate(lastMessage);
|
|
}
|
|
});
|
|
|
|
addShortcut(['ctrl', 'shift', 'backspace'], (event) => {
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
if (lastMessage) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleDelete(lastMessage);
|
|
}
|
|
});
|
|
|
|
addShortcut(['ctrl', 'shift', 'c'], (event) => {
|
|
if (activeGeneration.value === null) return;
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
handleCancel();
|
|
})
|
|
|
|
addShortcut(['alt', '['], async (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
if (lastMessage && lastMessage.children.length > 0) {
|
|
const newIndex = Math.max(0, (lastMessage.focusedIndex || 0) - 1);
|
|
patchMessageLocally(lastMessage.id, { focusedIndex: newIndex });
|
|
}
|
|
})
|
|
|
|
addShortcut(['alt', ']'], async (event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
const messageCount = lastMessage ? (lastMessage.deleted ? lastMessage.children.length : lastMessage.children.length + 1) : 0;
|
|
if (lastMessage && lastMessage.children.length > 0) {
|
|
const newIndex = Math.min(messageCount - 1, (lastMessage.focusedIndex || 0) + 1);
|
|
patchMessageLocally(lastMessage.id, { focusedIndex: newIndex });
|
|
}
|
|
})
|
|
|
|
addShortcut(['ctrl', 'alt', 'arrowleft'], async (event) => {
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
if (lastMessage && lastMessage.children.length > 0) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const newIndex = Math.max(0, (lastMessage.focusedIndex || 0) - 1);
|
|
patchMessageLocally(lastMessage.id, { focusedIndex: newIndex });
|
|
}
|
|
})
|
|
|
|
addShortcut(['ctrl', 'alt', 'arrowright'], async (event) => {
|
|
const lastMessage = topic.value?.messages?.at(-1);
|
|
const messageCount = lastMessage ? (lastMessage.deleted ? lastMessage.children.length : lastMessage.children.length + 1) : 0;
|
|
if (lastMessage && lastMessage.children.length > 0) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const newIndex = Math.min(messageCount - 1, (lastMessage.focusedIndex || 0) + 1);
|
|
patchMessageLocally(lastMessage.id, { focusedIndex: newIndex });
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
scrollToBottom('instant');
|
|
});
|
|
|
|
const handleCancel = async () => {
|
|
// TODO: cancel generation
|
|
await $fetch(`/api/topic/${topicId.value}/chat/cancel/${activeGeneration.value?.id}`, {
|
|
method: 'POST',
|
|
});
|
|
};
|
|
|
|
console.log("full page render took", Date.now() - rootStart);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col h-full w-full max-w-full overflow-x-hidden">
|
|
<div class="h-14 flex items-center justify-between px-4 border-b border-[var(--color-border)]">
|
|
<div class="flex items-center gap-2 max-w-full">
|
|
<button v-if="!sidebarOpen" @click="openSidebar"
|
|
class="flex p-2 rounded-lg text-[var(--text-primary)] bg-transparent @hover:bg-[var(--color-hover)] transition-colors">
|
|
<span class="i-mynaui-panel-left-open text-5"></span>
|
|
</button>
|
|
<h4 class="text-lg truncate">
|
|
{{ topic?.name }}
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- chat pane -->
|
|
<div ref="chatPaneWrapper"
|
|
class="chat-scroll-container justify-center w-full h-full [scrollbar-width:thin] [scrollbar-color:#888_transparent] overflow-y-scroll overflow-x-hidden flex justify-center pt-4">
|
|
<div class="chatPane max-w-4xl w-full min-h-full flex flex-col px-4">
|
|
<div class="w-full px-px flex flex-col flex-grow gap-2 pb-9">
|
|
<Suspense>
|
|
<template v-if="Array.isArray(topic?.messages) && topic.messages.length > 0">
|
|
<Message v-for="message in topic.messages" :key="message.id" :message="message"
|
|
@edit="(value) => patchMessageLocally(message.id, { content: value })"
|
|
@patch="(updates) => patchMessageLocally(message.id, updates)"
|
|
@delete="handleDelete(message)" @regenerate="handleRegenerate(message)" />
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
|
|
<div class="sticky bottom-0 z-10 bg-[var(--bg-surface)] pb-4 w-full rounded-t-2xl">
|
|
<ChatInput v-model="inputValue" class="[view-transition-name:chat-prompt] duration-150 ease-in-out"
|
|
:loading="activeGeneration !== null" :agent="agent"
|
|
:providers="providers?.filter(p => p.enabled)" @submit="submitMessage" @cancel="handleCancel" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<MessageTokenDetailsDropdown />
|
|
</template>
|