From a1f06b8a4235444d5fd85937e14e01feb4bfc4b5 Mon Sep 17 00:00:00 2001
From: ekko <152005280+EKKOLearnAI@users.noreply.github.com>
Date: Sat, 30 May 2026 08:53:06 +0800
Subject: [PATCH] fix virtual list empty state centering (#1141)

---
 .../hermes/chat/VirtualMessageList.vue        | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/hermes/chat/VirtualMessageList.vue b/packages/client/src/components/hermes/chat/VirtualMessageList.vue
index 876145f..4645b10 100644
--- a/packages/client/src/components/hermes/chat/VirtualMessageList.vue
+++ b/packages/client/src/components/hermes/chat/VirtualMessageList.vue
@@ -313,9 +313,6 @@ defineExpose({
       @resize="handleResize"
       @visible="syncViewport"
     >
-      <template #empty>
-        <slot name="empty" />
-      </template>
       <template #before>
         <slot v-if="messages.length > 0" name="before" />
       </template>
@@ -333,6 +330,9 @@ defineExpose({
         <slot v-if="messages.length > 0" name="after" />
       </template>
     </DynamicScroller>
+    <div v-if="messages.length === 0 && $slots.empty" class="virtual-message-list-empty">
+      <slot name="empty" />
+    </div>
   </div>
 </template>
 
@@ -343,6 +343,7 @@ defineExpose({
   flex: 1;
   min-height: 0;
   display: flex;
+  position: relative;
 }
 
 .virtual-message-list {
@@ -361,4 +362,20 @@ defineExpose({
   box-sizing: border-box;
   padding-bottom: var(--virtual-row-gap);
 }
+
+.virtual-message-list-empty {
+  position: absolute;
+  inset: var(--virtual-list-padding);
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: auto;
+}
+
+.virtual-message-list-empty :deep(.empty-state) {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
 </style>