admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(group-chat): replace NDropdown with custom dropdown to fix @mention keyboard selection (#479)

Browse Source 
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>
This commit is contained in:
memeflyfly
2026-05-06 16:20:15 +08:00
committed by GitHub
parent 266f6e1a59
commit ed94df6d85
1 changed files with 140 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/components/hermes/group-chat/GroupChatInput.vue
+140 -28
View File
@@ -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>