255 lines
8.8 KiB
Vue
255 lines
8.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Message } from '~/composables/useChat';
|
|
import { getActiveMessage, getCurrentChildIndex, getMessageCount, getNextActiveChildId } from '~~/utils/message';
|
|
|
|
const { openDialog } = useDialog();
|
|
|
|
const { message } = defineProps<{
|
|
message: Message
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
regenerate: [];
|
|
delete: [];
|
|
edit: [value: string];
|
|
patch: [updates: Partial<Message>];
|
|
fork: [];
|
|
}>();
|
|
|
|
let reqAbortController: AbortController | null = null;
|
|
|
|
watch(() => message.activeChildId, async (newValue) => {
|
|
if (reqAbortController) {
|
|
reqAbortController.abort();
|
|
reqAbortController = null;
|
|
}
|
|
|
|
reqAbortController = new AbortController();
|
|
|
|
await $fetch(`/api/messages/${message.id}`, {
|
|
method: 'PATCH',
|
|
body: {
|
|
activeChildId: newValue
|
|
},
|
|
signal: reqAbortController.signal,
|
|
});
|
|
});
|
|
|
|
watch(() => message.children.length, (newCount, oldCount) => {
|
|
if (newCount === oldCount) {
|
|
return;
|
|
}
|
|
|
|
if (newCount === 0) {
|
|
emit('patch', { activeChildId: null });
|
|
return;
|
|
}
|
|
|
|
if (oldCount > newCount) {
|
|
const activeChild = message.children.find(c => c?.id === message.activeChildId);
|
|
if (!activeChild) {
|
|
emit('patch', { activeChildId: message.children[newCount - 1]?.id ?? null });
|
|
}
|
|
return;
|
|
}
|
|
|
|
const newChild = message.children[newCount - 1];
|
|
if (newChild) {
|
|
emit('patch', { activeChildId: newChild.id });
|
|
}
|
|
});
|
|
|
|
watch(() => message.deleted, (isDeleted) => {
|
|
if (isDeleted && message.children.length > 0) {
|
|
const activeChild = message.children.find(c => c?.id === message.activeChildId);
|
|
if (!activeChild) {
|
|
emit('patch', { activeChildId: message.children[0]?.id ?? null });
|
|
}
|
|
}
|
|
});
|
|
|
|
const activeMessage = computed(() => getActiveMessage(message));
|
|
|
|
const copied = ref(false);
|
|
const copyMessage = async () => {
|
|
if (activeMessage.value!.role === 'user') {
|
|
await navigator.clipboard.writeText(activeMessage.value!.content!);
|
|
} else {
|
|
let text = [];
|
|
for (const part of activeMessage.value!.parts || []) {
|
|
if (part.type === 'text') {
|
|
text.push(part.content);
|
|
}
|
|
}
|
|
|
|
await navigator.clipboard.writeText(text.join('\n\n'));
|
|
}
|
|
|
|
copied.value = true;
|
|
setTimeout(() => {
|
|
copied.value = false;
|
|
}, 2000);
|
|
}
|
|
|
|
const regenerateMessage = async () => {
|
|
emit('regenerate');
|
|
}
|
|
|
|
const handleEdit = async () => {
|
|
const originalContent = message.content!;
|
|
|
|
openDialog<string>(DialogType.Textbox, async (res) => {
|
|
if (res.ok) {
|
|
if (!res.data) return;
|
|
|
|
const req = await $fetch(`/api/messages/${message.id}`, {
|
|
method: 'PATCH',
|
|
body: {
|
|
content: res.data
|
|
},
|
|
onRequest() {
|
|
message.content = res.data;
|
|
emit('edit', res.data);
|
|
},
|
|
onResponseError() {
|
|
message.content = originalContent;
|
|
emit('edit', originalContent);
|
|
},
|
|
});
|
|
if (!req.ok) {
|
|
return;
|
|
}
|
|
|
|
await regenerateMessage();
|
|
}
|
|
}, {
|
|
title: 'Edit Message',
|
|
initialValue: message.content!
|
|
});
|
|
};
|
|
|
|
const forkMessage = () => {
|
|
emit('fork');
|
|
};
|
|
|
|
const deleteMessage = () => {
|
|
emit('delete');
|
|
};
|
|
|
|
const messageCount = computed(() => getMessageCount(message));
|
|
|
|
const currentChildIndex = computed(() => getCurrentChildIndex(message));
|
|
|
|
const navigateChild = (direction: -1 | 1) => {
|
|
const nextActiveChildId = getNextActiveChildId(message, direction);
|
|
emit('patch', { activeChildId: nextActiveChildId });
|
|
};
|
|
|
|
const { show: showTooltip, hide: hideTooltip } = useTooltip();
|
|
|
|
let hasCursor: boolean | null = null;
|
|
const checkHasCursor = () => {
|
|
if (hasCursor === null && typeof window !== 'undefined') {
|
|
hasCursor = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
|
}
|
|
return hasCursor ?? false;
|
|
};
|
|
|
|
const handleTooltipHover = (e: MouseEvent) => {
|
|
if (!checkHasCursor()) {
|
|
return;
|
|
}
|
|
const target = (e.target as HTMLElement).closest('[data-hotkey], [data-tooltip]') as HTMLElement | null;
|
|
if (!target) {
|
|
return;
|
|
}
|
|
const hotkey = target.dataset.hotkey ? target.dataset.hotkey.split(',') : undefined;
|
|
const text = target.dataset.tooltip || undefined;
|
|
showTooltip(target, hotkey, text);
|
|
};
|
|
|
|
const handleTooltipLeave = () => {
|
|
hideTooltip();
|
|
};
|
|
|
|
const handleAction = (e: MouseEvent) => {
|
|
const trigger = (e.target as HTMLElement).closest('[data-action]') as HTMLElement | null;
|
|
if (!trigger) {
|
|
return;
|
|
}
|
|
switch (trigger.dataset.action) {
|
|
case 'prev-child':
|
|
navigateChild(-1);
|
|
break;
|
|
case 'next-child':
|
|
navigateChild(1);
|
|
break;
|
|
case 'regenerate':
|
|
regenerateMessage();
|
|
break;
|
|
case 'edit':
|
|
handleEdit();
|
|
break;
|
|
case 'copy':
|
|
copyMessage();
|
|
break;
|
|
case 'fork':
|
|
forkMessage();
|
|
break;
|
|
case 'delete':
|
|
deleteMessage();
|
|
break;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="activeMessage" class="max-w-full mb-4 group flex flex-col">
|
|
<MessageUser v-if="message.role === 'user'" class="pl-9 self-end" :message="activeMessage!"></MessageUser>
|
|
<MessageAgent v-else :message="activeMessage"></MessageAgent>
|
|
<div class="flex justify-between items-center" @click="handleAction">
|
|
<div v-if="messageCount > 1" class="flex gap-1"
|
|
@mouseover="handleTooltipHover" @mouseout="handleTooltipLeave">
|
|
<button data-action="prev-child" :data-hotkey="currentChildIndex > 0 ? 'alt,[' : undefined"
|
|
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<span class="i-mynaui-chevron-left w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
|
|
:class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
|
|
</button>
|
|
<span class="text-xs text-[var(--text-secondary)]">
|
|
{{ currentChildIndex + 1 }} / {{ messageCount }}
|
|
</span>
|
|
<button data-action="next-child" :data-hotkey="currentChildIndex + 1 < messageCount ? 'alt,]' : undefined"
|
|
class="@hover:bg-[var(--color-hover)] rounded transition duration-150 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<span class="i-mynaui-chevron-right w-4 h-4 text-[var(--text-secondary)] pointer-events-none"
|
|
:class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-show="activeMessage.generation?.status !== 'pending'"
|
|
@mouseover="handleTooltipHover" @mouseout="handleTooltipLeave"
|
|
class="ml-auto self-end mt-1 w-fit bg-[var(--bg-container)] text-[var(--text-secondary)] gap-px flex items-center rounded-md overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
|
|
<button data-action="regenerate" data-hotkey="ctrl,shift,enter"
|
|
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
|
<span class="i-mynaui-refresh text-4.5 pointer-events-none"></span>
|
|
</button>
|
|
<button v-if="message.role === 'user'" data-action="edit"
|
|
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
|
<span class="i-mynaui-pencil text-4.5 pointer-events-none"></span>
|
|
</button>
|
|
<button data-action="copy" :class="{ 'text-emerald-500': copied }"
|
|
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
|
<span :class="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'" class="pointer-events-none"></span>
|
|
</button>
|
|
<button data-action="fork"
|
|
class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
|
|
<span class="i-mynaui-git-branch text-4.5 pointer-events-none"></span>
|
|
</button>
|
|
<button data-action="delete" data-hotkey="ctrl,shift,backspace"
|
|
class="flex justify-center items-center w-7 h-6 text-red-500 @hover:bg-[var(--color-hover)]">
|
|
<span class="i-mynaui-trash text-5 pointer-events-none"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|