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

Author: PBK-B

src/runtime/components/ChatMessages.vue

@@ -1,6 +1,5 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { ComponentPublicInstance } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { UIMessage, ChatStatus } from 'ai'
 import theme from '#build/ui/chat-messages'
@@ -120,10 +119,17 @@ const lastMessageSubmitted = ref(false)
 const lastScrollTop = ref(0)
 const userScrolledUp = ref(false)
 
-function registerMessageRef(id: string, element: ComponentPublicInstance | null) {
-  const elInstance = element?.$el
-  if (elInstance) {
-    messagesRefs.value.set(id, elInstance)
+const stableMessageComp = computed(() => {
+  return typeof slots.message === 'function'
+    ? slots.message
+    : UChatMessage
+})
+
+function registerMessageRef(id: string, element: HTMLDivElement | null) {
+  if (element) {
+    messagesRefs.value.set(id, element)
+  } else {
+    console.warn('message id', id, 'unregistered dom instance may cause the failure of rolling to the message')
   }
 }
 
@@ -299,22 +305,25 @@ onMounted(() => {
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
-      <template v-for="message in messages" :key="message.id">
+      <div
+        v-for="messageData in messages"
+        :key="messageData.id"
+        :ref="(el) => registerMessageRef(messageData.id, el as HTMLDivElement)"
+      >
         <component
-          :is="$slots.message ? $slots.message : UChatMessage"
+          :is="stableMessageComp"
+          :memo="[messageData, compact]"
+          :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" :message="messageData" />
           </template>
         </component>
-      </template>
+      </div>
     </slot>
     <UChatMessage
       v-if="status === 'submitted'"