From ed94df6d8572fbd922b7385fbd27b701a3a3825f Mon Sep 17 00:00:00 2001
From: memeflyfly <55984574+1624318455@users.noreply.github.com>
Date: Wed, 6 May 2026 16:20:15 +0800
Subject: [PATCH] fix(group-chat): replace NDropdown with custom dropdown to
 fix @mention keyboard selection (#479)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug: In group chat input, using keyboard (ArrowDown/ArrowUp + Enter) to
select an agent from the @mention dropdown always inserts the wrong agent
name (the first one), regardless of which item is visually highlighted.
Mouse click works correctly.

Root cause: naive-ui's NDropdown has its own internal keyboard state machine
that is independent from the component's activeIndex ref. When Enter is
pressed, NDropdown fires @select using its own stale index before
handleKeydown runs, always selecting the wrong agent. NDropdown exposes no
public API to synchronize its internal state, making this unfixable in place.

Fix: Replace NDropdown with a custom <div class="mention-dropdown">
rendered via v-for, with fully manual keyboard/click/hover control. This
eliminates the dual-state conflict entirely — there's a single activeIndex
for all interactions.

Additional improvements over the previous NDropdown-based implementation:
- Scroll follows the active item automatically (scrollToActive)
- Dropdown flips upward when insufficient space below (smart placement)
- Click-outside-to-close via document-level listener
- Transition animation matching NDropdown's fade-in-scale-up exactly
  (0.2s cubic-bezier, scale 0.9->1 with opacity fade)

Co-authored-by: Fix Contributor <fix-contributor@hermes-web-ui.dev>
---
 .../hermes/group-chat/GroupChatInput.vue      | 168 +++++++++++++++---
 1 file changed, 140 insertions(+), 28 deletions(-)

diff --git a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
index 8f6b507..f9165e6 100644
--- a/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
+++ b/packages/client/src/components/hermes/group-chat/GroupChatInput.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { NButton, NDropdown } from 'naive-ui'
+import { NButton } from 'naive-ui'
 import { useGroupChatStore } from '@/stores/hermes/group-chat'
-import type { DropdownOption } from 'naive-ui'
 
 const { t } = useI18n()
 const emit = defineEmits<{ send: [content: string] }>()
@@ -11,6 +10,7 @@ const store = useGroupChatStore()
 
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement>()
+const dropdownRef = ref<HTMLDivElement>()
 const isComposing = ref(false)
 
 // ─── Mention State ───────────────────────────────────────
@@ -20,6 +20,8 @@ const mentionQuery = ref('')
 const mentionStartIndex = ref(-1)
 const dropdownX = ref(0)
 const dropdownY = ref(0)
+const dropdownBottom = ref(0)
+const placement = ref<'bottom' | 'top'>('bottom')
 const activeIndex = ref(0)
 
 const filteredAgents = computed(() => {
@@ -27,16 +29,18 @@ const filteredAgents = computed(() => {
     return store.agents.filter(a => a.name.toLowerCase().includes(query))
 })
 
-const dropdownOptions = computed<DropdownOption[]>(() => {
-    return filteredAgents.value.map((a, i) => ({
-        label: `${a.name}  (${a.profile})`,
-        key: a.name,
-        index: i,
-    }))
-})
-
 const canSend = computed(() => !!inputText.value.trim())
 
+// ─── Scroll active item into view ──────────────────────
+
+function scrollToActive() {
+    nextTick(() => {
+        if (!dropdownRef.value) return
+        const active = dropdownRef.value.querySelector('.active') as HTMLElement | null
+        if (active) active.scrollIntoView({ block: 'nearest', behavior: 'instant' })
+    })
+}
+
 // ─── Mention Logic ───────────────────────────────────────
 
 function updateMentionState() {
@@ -90,7 +94,19 @@ function updateMentionState() {
     document.body.removeChild(mirror)
 
     dropdownX.value = rect.left + mirrorRect.width - el.scrollLeft
-    dropdownY.value = rect.top - el.scrollTop - 8
+
+    // Decide placement: if dropdown would go below viewport, flip upward
+    const estimatedHeight = Math.min(filteredAgents.value.length * 36 + 8, 240)
+    const spaceBelow = window.innerHeight - rect.top + el.scrollTop - 8
+    if (spaceBelow < estimatedHeight && rect.top - el.scrollTop - 8 > estimatedHeight) {
+        placement.value = 'top'
+        dropdownY.value = rect.top - el.scrollTop - 8
+    } else {
+        placement.value = 'bottom'
+        dropdownY.value = rect.top - el.scrollTop - 8
+    }
+
+    dropdownBottom.value = window.innerHeight - dropdownY.value
 
     mentionActive.value = filteredAgents.value.length > 0
 }
@@ -118,16 +134,18 @@ function selectMention(name: string) {
 // ─── Event Handlers ──────────────────────────────────────
 
 function handleKeydown(e: KeyboardEvent) {
-    // Mention navigation
+    // Mention navigation — fully custom, no NDropdown interference
     if (mentionActive.value && filteredAgents.value.length > 0) {
         if (e.key === 'ArrowDown') {
             e.preventDefault()
             activeIndex.value = (activeIndex.value + 1) % filteredAgents.value.length
+            scrollToActive()
             return
         }
         if (e.key === 'ArrowUp') {
             e.preventDefault()
             activeIndex.value = (activeIndex.value - 1 + filteredAgents.value.length) % filteredAgents.value.length
+            scrollToActive()
             return
         }
         if (e.key === 'Enter' || e.key === 'Tab') {
@@ -174,14 +192,32 @@ function handleInput(e: Event) {
     }
 }
 
-function handleDropdownSelect(key: string) {
-    selectMention(key)
+function handleMentionClick(name: string) {
+    selectMention(name)
 }
 
-function handleDropdownClickOutside() {
-    mentionActive.value = false
+function handleMentionHover(index: number) {
+    activeIndex.value = index
 }
 
+// ─── Click outside to close dropdown ─────────────────
+
+function onDocumentMousedown(e: MouseEvent) {
+    if (!mentionActive.value) return
+    const target = e.target as HTMLElement
+    if (!target.closest('.mention-dropdown')) {
+        mentionActive.value = false
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('mousedown', onDocumentMousedown)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('mousedown', onDocumentMousedown)
+})
+
 function handleCompositionStart() {
     isComposing.value = true
 }
@@ -222,17 +258,31 @@ function handleCompositionEnd() {
                 </NButton>
             </div>
         </div>
-        <NDropdown
-            placement="top-start"
-            trigger="manual"
-            :x="dropdownX"
-            :y="dropdownY"
-            :options="dropdownOptions"
-            :show="mentionActive"
-            :render-icon="() => null"
-            @select="handleDropdownSelect"
-            @clickoutside="handleDropdownClickOutside"
-        />
+        <Transition name="dropdown-fade">
+            <div
+                v-if="mentionActive && filteredAgents.length > 0"
+                ref="dropdownRef"
+                class="mention-dropdown"
+                :class="{ 'placement-top': placement === 'top' }"
+                :style="{
+                    left: dropdownX + 'px',
+                    top: placement === 'bottom' ? dropdownY + 'px' : 'auto',
+                    bottom: placement === 'top' ? dropdownBottom + 'px' : 'auto',
+                }"
+            >
+                <div
+                    v-for="(agent, i) in filteredAgents"
+                    :key="agent.name"
+                    class="mention-dropdown-item"
+                    :class="{ active: i === activeIndex }"
+                    @mousedown.prevent="handleMentionClick(agent.name)"
+                    @mouseenter="handleMentionHover(i)"
+                >
+                    <span class="mention-name">@{{ agent.name }}</span>
+                    <span class="mention-profile">{{ agent.profile }}</span>
+                </div>
+            </div>
+        </Transition>
     </div>
 </template>
 
@@ -315,4 +365,66 @@ function handleCompositionEnd() {
     flex-shrink: 0;
     align-items: center;
 }
+
+/* ── Custom mention dropdown (replaces NDropdown) ── */
+
+.mention-dropdown {
+    position: fixed;
+    background: $bg-card;
+    border: 1px solid $border-color;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    min-width: 200px;
+    max-height: 240px;
+    overflow-y: auto;
+    z-index: 9999;
+    padding: 4px;
+}
+
+.mention-dropdown-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.1s;
+
+    &:hover,
+    &.active {
+        background: rgba(var(--text-primary-rgb), 0.08);
+    }
+
+    .mention-name {
+        color: $text-primary;
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    .mention-profile {
+        color: $text-muted;
+        font-size: 12px;
+    }
+}
+
+/* ── Dropdown fade/scale animation (matching NDropdown) ── */
+
+.dropdown-fade-enter-active {
+    transition: opacity 0.2s cubic-bezier(0, 0, .2, 1), transform 0.2s cubic-bezier(0, 0, .2, 1);
+    transform-origin: top;
+}
+.dropdown-fade-leave-active {
+    transition: opacity 0.2s cubic-bezier(.4, 0, 1, 1), transform 0.2s cubic-bezier(.4, 0, 1, 1);
+    transform-origin: top;
+}
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+    opacity: 0;
+    transform: scale(0.9);
+}
+.placement-top.dropdown-fade-enter-active,
+.placement-top.dropdown-fade-leave-active {
+    transform-origin: bottom;
+}
 </style>