fix(messages): handle the problem of failure to scroll to the position of custom message item

Author: PBK-B

src/runtime/components/ChatMessages.vue

@@ -64,6 +64,7 @@ type ChatSlotMessageProps = ChatMessageProps & {
   slots?: {
     [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>
   }
+  [key: string]: any
 }
 
 type ExtendSlotWithVersion<K extends keyof ChatMessageSlots>
@@ -124,6 +125,8 @@ function registerMessageRef(id: string, element: ComponentPublicInstance | null)
   const elInstance = element?.$el
   if (elInstance) {
     messagesRefs.value.set(id, elInstance)
+  } else {
+    console.warn('message id', id, 'unregistered dom instance may cause the failure of rolling to the message')
   }
 }
 
@@ -299,21 +302,33 @@ onMounted(() => {
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
-      <template v-for="message in messages" :key="message.id">
-        <component
-          :is="$slots.message ? $slots.message : UChatMessage"
+      <template
+        v-for="messageData in messages"
+        :key="messageData.id"
+      >
+        <slot
+          v-if="$slots.message"
+          :ref="(el: ComponentPublicInstance) => registerMessageRef(messageData.id, el)"
+          name="message"
+          :compact="compact"
+          v-bind="{
+            ...messageData,
+            ...(messageData.role === 'user' ? userProps : assistantProps)
+          }"
+        />
+        <UChatMessage
+          v-else
+          :ref="(el) => registerMessageRef(messageData.id, el as ComponentPublicInstance)"
+          :compact="compact"
           v-bind="{
-            ...message,
-            ...(message.role === 'user' ? userProps : assistantProps),
-            ...($slots.message ? { message, slots: getProxySlots() } : {}),
-            compact
+            ...messageData,
+            ...(messageData.role === 'user' ? userProps : assistantProps)
           }"
-          :ref="(el: ComponentPublicInstance) => registerMessageRef(message.id, el)"
         >
           <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" :message="message" />
+            <slot :name="name" v-bind="(slotData as any)" :message="messageData" />
           </template>
-        </component>
+        </UChatMessage>
       </template>
     </slot>
     <UChatMessage