From c8046ac1cd0bcc95e7e9ed028598b4faeb392be4 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Tue, 31 Mar 2026 23:47:22 +0200
Subject: [PATCH 1/3] feat(ChatMessages): expose `registerMessageRef`

---
 docs/content/docs/2.components/chat-messages.md | 8 ++++++++
 src/runtime/components/ChatMessages.vue         | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/docs/content/docs/2.components/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index 3b4ba11d89..b3db1a6f74 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -439,6 +439,14 @@ You can use all the slots of the [`ChatMessage`](/docs/components/chat-message#s
 ```
 ::
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `registerMessageRef(id: string, element: ComponentPublicInstance | null)`{lang="ts-type"} | `void`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 1116440cb6..9d546b1760 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -302,6 +302,10 @@ onMounted(() => {
   // Add event listener to update the last message height when the window is resized
   useEventListener(window, 'resize', () => nextTick(updateLastMessageHeight))
 })
+
+defineExpose({
+  registerMessageRef
+})
 </script>
 
 <template>

From 8913a875f6dab39a941843c0475561bf90d754a6 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Tue, 31 Mar 2026 23:53:51 +0200
Subject: [PATCH 2/3] Update ChatMessages.vue

---
 src/runtime/components/ChatMessages.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 9d546b1760..d6548fbe29 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -67,7 +67,7 @@ type ExtendSlotWithVersion<K extends keyof ChatMessageSlots>
 export type ChatMessagesSlots = {
   [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>
 } & {
-  default?(props?: {}): VNode[]
+  default?(props: { registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void }): VNode[]
   indicator?(props: { ui: ChatMessages['ui'] }): VNode[]
   viewport?(props: { ui: ChatMessages['ui'], onClick: () => void }): VNode[]
 }
@@ -316,7 +316,7 @@ defineExpose({
     :class="ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
-    <slot>
+    <slot :register-message-ref="registerMessageRef">
       <template v-for="message in messages" :key="message.id">
         <UChatMessage
           v-if="message.parts?.length"

From 4f1fd8e819bd2f5bbe102260b62383b915cf47af Mon Sep 17 00:00:00 2001
From: Daniele Nicosia <alwe.dev@gmail.com>
Date: Wed, 1 Apr 2026 00:04:26 +0200
Subject: [PATCH 3/3] Update docs/content/docs/2.components/chat-messages.md

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
 docs/content/docs/2.components/chat-messages.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/docs/2.components/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index b3db1a6f74..49cf8c99e3 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -445,7 +445,7 @@ When accessing the component via a template ref, you can use the following:
 
 | Name | Type |
 | ---- | ---- |
-| `registerMessageRef(id: string, element: ComponentPublicInstance | null)`{lang="ts-type"} | `void`{lang="ts-type"} |
+| `registerMessageRef(id: string, element: ComponentPublicInstance \| null)`{lang="ts-type"} | `void`{lang="ts-type"} |
 
 ## Theme