bug fixes, and performance improvements, and drawer

app/components/Message/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Message } from '~/composables/useChat';
+import { getActiveMessage, getCurrentChildIndex, getMessageCount, getNextActiveChildId } from '~~/utils/message';
 
 const { openDialog } = useDialog();
 
@@ -35,7 +36,9 @@ watch(() => message.activeChildId, async (newValue) => {
 });
 
 watch(() => message.children.length, (newCount, oldCount) => {
-    if (newCount === oldCount) return;
+    if (newCount === oldCount) {
+        return;
+    }
 
     if (newCount === 0) {
         emit('patch', { activeChildId: null });
@@ -56,19 +59,17 @@ watch(() => message.children.length, (newCount, oldCount) => {
     }
 });
 
-const activeMessage = computed(() => {
-    if (message.activeChildId && message.children.length > 0) {
-        const child = message.children.find(c => c?.id === message.activeChildId);
-        if (child) return child;
+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 });
+        }
     }
-
-    if (message.deleted === true && message.children.length > 0) {
-        return message.children[0];
-    }
-
-    return message;
 });
 
+const activeMessage = computed(() => getActiveMessage(message));
+
 const copied = ref(false);
 const copyMessage = async () => {
     if (activeMessage.value!.role === 'user') {
@@ -135,91 +136,118 @@ const deleteMessage = () => {
     emit('delete');
 };
 
-const messageCount = computed(() => {
-    if (message.deleted === true) {
-        return message.children.length;
-    }
+const messageCount = computed(() => getMessageCount(message));
 
-    return message.children.length + 1;
-});
-
-const currentChildIndex = computed(() => {
-    if (!message.activeChildId) return 0;
-    const idx = message.children.findIndex(c => c?.id === message.activeChildId);
-    return idx >= 0 ? idx + 1 : 0;
-});
+const currentChildIndex = computed(() => getCurrentChildIndex(message));
 
 const navigateChild = (direction: -1 | 1) => {
-    const allItems = message.deleted === true
-        ? message.children
-        : [null, ...message.children];
+    const nextActiveChildId = getNextActiveChildId(message, direction);
+    emit('patch', { activeChildId: nextActiveChildId });
+};
 
-    const currentIdx = allItems.findIndex(item =>
-        !item ? !message.activeChildId : item.id === message.activeChildId
-    );
+const { show: showTooltip, hide: hideTooltip } = useTooltip();
 
-    const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));
-    const newItem = allItems[newIdx];
+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;
+};
 
-    emit('patch', { activeChildId: newItem?.id ?? null });
+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">
-        <div :class="[message.role === 'user' ? 'pl-9 flex justify-end' : '']">
-            <MessageUser v-if="message.role === 'user'" :message="activeMessage!" />
-            <MessageAgent v-else :message="activeMessage" />
-        </div>
-        <div class="flex justify-between items-center">
-            <div>
-                <div v-if="messageCount > 1" class="flex gap-1">
-                    <Tooltip :inert="currentChildIndex === 0" :hotkey="['alt', '[']">
-                        <button @click="navigateChild(-1)"
-                            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)]"
-                                :class="currentChildIndex === 0 ? 'opacity-0' : ''"></span>
-                        </button>
-                    </Tooltip>
-                    <span class="text-xs text-[var(--text-secondary)]">
-                        {{ currentChildIndex + 1 }} / {{ messageCount }}
-                    </span>
-                    <Tooltip :inert="currentChildIndex + 1 === messageCount" :hotkey="['alt', ']']">
-                        <button @click="navigateChild(1)"
-                            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)]"
-                                :class="currentChildIndex + 1 === messageCount ? 'opacity-0' : ''"></span>
-                        </button>
-                    </Tooltip>
-                </div>
+        <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'"
-                class="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)]">
-                <Tooltip :hotkey="['ctrl', 'shift', 'enter']">
-                    <button @click="regenerateMessage"
-                        class="flex justify-center items-center w-7 h-6 @hover:bg-[var(--color-hover)]">
-                        <span class="i-mynaui-refresh text-4.5"></span>
-                    </button>
-                </Tooltip>
-                <button v-if="message.role === 'user'" @click="handleEdit"
+                @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-pencil text-4.5"></span>
+                    <span class="i-mynaui-refresh text-4.5 pointer-events-none"></span>
                 </button>
-                <button @click="copyMessage" :class="{ 'text-emerald-500': copied }"
+                <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="copied ? 'i-mynaui-check text-emerald-500' : 'i-mynaui-copy text-4.5'"></span>
+                    <span class="i-mynaui-pencil text-4.5 pointer-events-none"></span>
                 </button>
-                <button @click="forkMessage"
+                <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="i-mynaui-git-branch text-4.5"></span>
+                    <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>
-                <Tooltip :hotkey="['ctrl', 'shift', 'backspace']">
-                    <button @click="deleteMessage"
-                        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"></span>
-                    </button>
-                </Tooltip>
             </div>
         </div>
     </div>