From ef375c198d62eddd9c8ed9331dd9aa98f1b29f71 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Sun, 19 Oct 2025 16:22:37 +0200
Subject: [PATCH 01/10] feat(ChatMessage/ChatMessages): add generics

---
 src/runtime/components/ChatMessage.vue  | 23 ++++++++++++-----------
 src/runtime/components/ChatMessages.vue | 18 +++++++++---------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index ed74458722..62913f6552 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -1,13 +1,14 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
-import type { UIMessage } from 'ai'
+import type { UIDataTypes, UIMessage, UITools } from 'ai'
 import theme from '#build/ui/chat-message'
 import type { AvatarProps, ButtonProps, IconProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>
 
-export interface ChatMessageProps extends UIMessage {
+export interface ChatMessageProps<METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools>
+  extends UIMessage<METADATA, DATA_PARTS, TOOLS> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'article'
@@ -31,7 +32,7 @@ export interface ChatMessageProps extends UIMessage {
    * The `label` will be used in a tooltip.
    * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    */
-  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: UIMessage) => void })[]
+  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: UIMessage<METADATA, DATA_PARTS, TOOLS>) => void })[]
   /**
    * Render the message in a compact style.
    * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
@@ -47,14 +48,14 @@ export interface ChatMessageProps extends UIMessage {
   ui?: ChatMessage['slots']
 }
 
-export interface ChatMessageSlots {
-  leading(props: { avatar: ChatMessageProps['avatar'], ui: ChatMessage['ui'] }): any
-  content(props: ChatMessageProps): any
-  actions(props: { actions: ChatMessageProps['actions'] }): any
+export interface ChatMessageSlots<METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools> {
+  leading(props: { avatar: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['avatar'], ui: ChatMessage['ui'] }): any
+  content(props: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>): any
+  actions(props: { actions: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['actions'] }): any
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
@@ -65,10 +66,10 @@ import UTooltip from './Tooltip.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<ChatMessageProps>(), {
+const props = withDefaults(defineProps<ChatMessageProps<METADATA, DATA_PARTS, TOOLS>>(), {
   as: 'article'
 })
-const slots = defineSlots<ChatMessageSlots>()
+const slots = defineSlots<ChatMessageSlots<METADATA, DATA_PARTS, TOOLS>>()
 
 const appConfig = useAppConfig() as ChatMessage['AppConfig']
 
@@ -105,7 +106,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
           <template v-else>
             <template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
               <template v-if="part.type === 'text'">
-                {{ part.text }}
+                {{ (part as any).text }}
               </template>
             </template>
           </template>
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 5a98d62523..6a3b309e65 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -9,8 +9,8 @@ import type { ComponentConfig } from '../types/tv'
 
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>
 
-export interface ChatMessagesProps {
-  messages?: UIMessage[]
+export interface ChatMessagesProps<T extends UIMessage[]> {
+  messages?: T
   status?: ChatStatus
   /**
    * Whether to automatically scroll to the bottom when a message is streaming.
@@ -59,13 +59,13 @@ export interface ChatMessagesProps {
   ui?: ChatMessages['slots']
 }
 
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots>
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots, T extends UIMessage[]>
   = ChatMessageSlots[K] extends (props: infer P) => any
-    ? (props: P & { message: UIMessage }) => any
+    ? (props: P & { message: T[number] }) => any
     : ChatMessageSlots[K]
 
-export type ChatMessagesSlots = {
-  [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>
+export type ChatMessagesSlots<T extends UIMessage[]> = {
+  [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K, T>
 } & {
   default(props?: {}): any
   indicator(props: { ui: ChatMessages['ui'] }): any
@@ -74,7 +74,7 @@ export type ChatMessagesSlots = {
 
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends UIMessage[]">
 import { ref, computed, watch, nextTick, toRef, onMounted } from 'vue'
 import { Presence } from 'reka-ui'
 import { defu } from 'defu'
@@ -85,13 +85,13 @@ import { tv } from '../utils/tv'
 import UChatMessage from './ChatMessage.vue'
 import UButton from './Button.vue'
 
-const props = withDefaults(defineProps<ChatMessagesProps>(), {
+const props = withDefaults(defineProps<ChatMessagesProps<T>>(), {
   autoScroll: true,
   shouldAutoScroll: false,
   shouldScrollToBottom: true,
   spacingOffset: 0
 })
-const slots = defineSlots<ChatMessagesSlots>()
+const slots = defineSlots<ChatMessagesSlots<T>>()
 
 const getProxySlots = () => omit(slots, ['default', 'indicator', 'viewport'])
 

From c4b7e56b907f1899f54fd068f2529835fb92c83a Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 15:40:20 +0200
Subject: [PATCH 02/10] Update ChatMessage.vue

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

diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 62913f6552..7459e915c6 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -105,8 +105,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
           </template>
           <template v-else>
             <template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
-              <template v-if="part.type === 'text'">
-                {{ (part as any).text }}
+              <template v-if="part.type === 'text' && 'text' in part">
+                {{ part.text }}
               </template>
             </template>
           </template>

From 5ce55e343865817edefd31424a0f91a8b2ef9bcd Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 16:03:04 +0200
Subject: [PATCH 03/10] Update ChatMessages.vue

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

diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 6a3b309e65..0eefacfd56 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -9,7 +9,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>
 
-export interface ChatMessagesProps<T extends UIMessage[]> {
+export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
   messages?: T
   status?: ChatStatus
   /**
@@ -64,7 +64,7 @@ type ExtendSlotWithVersion<K extends keyof ChatMessageSlots, T extends UIMessage
     ? (props: P & { message: T[number] }) => any
     : ChatMessageSlots[K]
 
-export type ChatMessagesSlots<T extends UIMessage[]> = {
+export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
   [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K, T>
 } & {
   default(props?: {}): any
@@ -74,7 +74,7 @@ export type ChatMessagesSlots<T extends UIMessage[]> = {
 
 </script>
 
-<script setup lang="ts" generic="T extends UIMessage[]">
+<script setup lang="ts" generic="T extends UIMessage[] = UIMessage[]">
 import { ref, computed, watch, nextTick, toRef, onMounted } from 'vue'
 import { Presence } from 'reka-ui'
 import { defu } from 'defu'

From 738acf06c23a922eeefb0957d4f0d819558cef91 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 18:01:33 +0200
Subject: [PATCH 04/10] missing metadata in slot

---
 src/runtime/components/ChatMessage.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 7459e915c6..6d3eaf208a 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -50,7 +50,7 @@ export interface ChatMessageProps<METADATA = unknown, DATA_PARTS extends UIDataT
 
 export interface ChatMessageSlots<METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools> {
   leading(props: { avatar: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['avatar'], ui: ChatMessage['ui'] }): any
-  content(props: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>): any
+  content(props: Pick<ChatMessageProps<METADATA, DATA_PARTS, TOOLS>, 'id' | 'role' | 'parts' | 'metadata' | 'content'>): any
   actions(props: { actions: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['actions'] }): any
 }
 </script>
@@ -99,6 +99,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
           :role="role"
           :content="content"
           :parts="parts"
+          :metadata="metadata"
         >
           <template v-if="content">
             {{ content }}

From 92b170bc894d7fc8ba8271eae016834bc7443005 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Sat, 31 Jan 2026 14:39:35 +0100
Subject: [PATCH 05/10] types tweaks

---
 src/runtime/components/ChatMessage.vue  | 2 +-
 src/runtime/components/ChatMessages.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 6d3eaf208a..55d0db1a90 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -55,7 +55,7 @@ export interface ChatMessageSlots<METADATA = unknown, DATA_PARTS extends UIDataT
 }
 </script>
 
-<script setup lang="ts" generic="METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools">
+<script setup lang="ts" generic="METADATA, DATA_PARTS extends UIDataTypes, TOOLS extends UITools">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 0eefacfd56..223664d76c 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -59,7 +59,7 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
   ui?: ChatMessages['slots']
 }
 
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots, T extends UIMessage[]>
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots, T extends UIMessage[] = UIMessage[]>
   = ChatMessageSlots[K] extends (props: infer P) => any
     ? (props: P & { message: T[number] }) => any
     : ChatMessageSlots[K]

From 44300f1bd43b0c5a0a73c18feebcb5ff70916a05 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 26 Feb 2026 12:25:53 +0100
Subject: [PATCH 06/10] up

---
 src/runtime/components/ChatMessage.vue | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 5ef87b4756..a4f867d5da 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -7,8 +7,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>
 
-export interface ChatMessageProps<METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools>
-  extends UIMessage<METADATA, DATA_PARTS, TOOLS> {
+export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'article'
@@ -32,7 +31,7 @@ export interface ChatMessageProps<METADATA = unknown, DATA_PARTS extends UIDataT
    * The `label` will be used in a tooltip.
    * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
    */
-  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: UIMessage<METADATA, DATA_PARTS, TOOLS>) => void })[]
+  actions?: (Omit<ButtonProps, 'onClick'> & { onClick?: (e: MouseEvent, message: UIMessage<TMetadata, TDataParts, TTools>) => void })[]
   /**
    * Render the message in a compact style.
    * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
@@ -48,14 +47,14 @@ export interface ChatMessageProps<METADATA = unknown, DATA_PARTS extends UIDataT
   ui?: ChatMessage['slots']
 }
 
-export interface ChatMessageSlots<METADATA = unknown, DATA_PARTS extends UIDataTypes = UIDataTypes, TOOLS extends UITools = UITools> {
-  leading(props: { avatar: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['avatar'], ui: ChatMessage['ui'] }): any
-  content(props: Pick<ChatMessageProps<METADATA, DATA_PARTS, TOOLS>, 'id' | 'role' | 'parts' | 'metadata' | 'content'>): any
-  actions(props: { actions: ChatMessageProps<METADATA, DATA_PARTS, TOOLS>['actions'] }): any
+export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+  leading(props: { avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'], ui: ChatMessage['ui'] }): any
+  content(props: Pick<ChatMessageProps<TMetadata, TDataParts, TTools>, 'id' | 'role' | 'parts' | 'metadata' | 'content'>): any
+  actions(props: { actions: ChatMessageProps<TMetadata, TDataParts, TTools>['actions'] }): any
 }
 </script>
 
-<script setup lang="ts" generic="METADATA, DATA_PARTS extends UIDataTypes, TOOLS extends UITools">
+<script setup lang="ts" generic="TMetadata, TDataParts extends UIDataTypes, TTools extends UITools">
 import { computed } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
@@ -67,10 +66,10 @@ import UTooltip from './Tooltip.vue'
 import UAvatar from './Avatar.vue'
 import UIcon from './Icon.vue'
 
-const props = withDefaults(defineProps<ChatMessageProps<METADATA, DATA_PARTS, TOOLS>>(), {
+const props = withDefaults(defineProps<ChatMessageProps<TMetadata, TDataParts, TTools>>(), {
   as: 'article'
 })
-const slots = defineSlots<ChatMessageSlots<METADATA, DATA_PARTS, TOOLS>>()
+const slots = defineSlots<ChatMessageSlots<TMetadata, TDataParts, TTools>>()
 
 const appConfig = useAppConfig() as ChatMessage['AppConfig']
 const uiProp = useComponentUI('chatMessage', props)

From 9b3908732dc5d0fc03a595d0669df78afc2fde29 Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 26 Feb 2026 12:26:23 +0100
Subject: [PATCH 07/10] fix(ChatMessages): properly propagate generics into
 slots

---
 src/runtime/components/ChatMessages.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index 6df6762164..246ddde7d0 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -59,13 +59,18 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
   ui?: ChatMessages['slots']
 }
 
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots, T extends UIMessage[] = UIMessage[]>
-  = ChatMessageSlots[K] extends (props: infer P) => any
+type SlotBase<T extends UIMessage[]>
+  = T[number] extends UIMessage<infer M, infer D, infer U>
+    ? ChatMessageSlots<M, D, U>
+    : ChatMessageSlots
+
+type ExtendSlotWithVersion<K extends keyof SlotBase<T>, T extends UIMessage[] = UIMessage[]>
+  = SlotBase<T>[K] extends (props: infer P) => any
     ? (props: P & { message: T[number] }) => any
-    : ChatMessageSlots[K]
+    : SlotBase<T>[K]
 
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-  [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K, T>
+  [K in keyof SlotBase<T>]: ExtendSlotWithVersion<K, T>
 } & {
   default(props?: {}): any
   indicator(props: { ui: ChatMessages['ui'] }): any
@@ -305,7 +310,7 @@ onMounted(() => {
         :compact="compact"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-          <slot :name="name" v-bind="(slotData as any)" :message="message" />
+          <slot :name="(name as keyof ChatMessagesSlots<T>)" v-bind="(slotData as any)" :message="message" />
         </template>
       </UChatMessage>
     </slot>

From 44dd75238a7cbfc31c5a7ab4f55473c00a25579f Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Thu, 26 Feb 2026 12:26:54 +0100
Subject: [PATCH 08/10] up

---
 .../content/examples/chat/ChatPaletteContentSearchExample.vue   | 2 +-
 .../content/examples/chat/ChatPaletteModalExample.vue           | 2 +-
 docs/app/components/search/SearchChat.vue                       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
index df6c930202..e94a14eac2 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
@@ -65,7 +65,7 @@ function onClose(e: Event) {
                 v-if="part.type === 'text' && message.role === 'assistant'"
                 :value="part.text"
                 :cache-key="`${message.id}-${index}`"
-                class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
+                class="[&_.my-5]:my-2.5 *:first:mt-0! *:last:mb-0! [&_.leading-7]:leading-6!"
               />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
                 {{ part.text }}
diff --git a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
index f43fab2631..9959b1988f 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
@@ -32,7 +32,7 @@ function onSubmit() {
                 v-if="part.type === 'text' && message.role === 'assistant'"
                 :value="part.text"
                 :cache-key="`${message.id}-${index}`"
-                class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
+                class="[&_.my-5]:my-2.5 *:first:mt-0! *:last:mb-0! [&_.leading-7]:leading-6!"
               />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
                 {{ part.text }}
diff --git a/docs/app/components/search/SearchChat.vue b/docs/app/components/search/SearchChat.vue
index 7ab98f359e..87d08d31ce 100644
--- a/docs/app/components/search/SearchChat.vue
+++ b/docs/app/components/search/SearchChat.vue
@@ -115,7 +115,7 @@ const getCachedToolMessage = useMemoize((state: State, toolName: string, input:
             :cache-key="`${message.id}-${index}`"
             :components="components"
             :parser-options="{ highlight: false }"
-            class="[&_.my-5]:my-2.5 *:first:!mt-0 *:last:!mb-0 [&_.leading-7]:!leading-6"
+            class="[&_.my-5]:my-2.5 *:first:mt-0! *:last:mb-0! [&_.leading-7]:leading-6!"
           />
           <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">
             {{ part.text }}

From 2db51ec21c41f1625248fc4772a22b0a466efdbd Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 2 Mar 2026 16:00:34 +0100
Subject: [PATCH 09/10] fix(ChatMessage): content slot destructuring

---
 .../examples/chat/ChatPaletteContentSearchExample.vue       | 2 +-
 .../content/examples/chat/ChatPaletteModalExample.vue       | 2 +-
 docs/app/components/search/SearchChat.vue                   | 2 +-
 docs/content/blog/how-to-build-an-ai-chat.md                | 6 +++---
 docs/content/docs/1.getting-started/3.migration/1.v4.md     | 2 +-
 docs/content/docs/2.components/chat-messages.md             | 4 ++--
 docs/content/docs/2.components/chat-prompt-submit.md        | 2 +-
 docs/content/docs/2.components/chat-prompt.md               | 2 +-
 playgrounds/nuxt/app/pages/chat.vue                         | 2 +-
 skills/nuxt-ui/references/layouts/chat.md                   | 2 +-
 10 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
index e94a14eac2..bb5a3e7395 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteContentSearchExample.vue
@@ -59,7 +59,7 @@ function onClose(e: Event) {
           :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
           :assistant="{ icon: 'i-lucide-bot' }"
         >
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC
                 v-if="part.type === 'text' && message.role === 'assistant'"
diff --git a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
index 9959b1988f..5145edb773 100644
--- a/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
+++ b/docs/app/components/content/examples/chat/ChatPaletteModalExample.vue
@@ -26,7 +26,7 @@ function onSubmit() {
           :user="{ side: 'left', variant: 'naked', avatar: { src: 'https://github.com/benjamincanac.png' } }"
           :assistant="{ icon: 'i-lucide-bot' }"
         >
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC
                 v-if="part.type === 'text' && message.role === 'assistant'"
diff --git a/docs/app/components/search/SearchChat.vue b/docs/app/components/search/SearchChat.vue
index 87d08d31ce..a4467e7a5d 100644
--- a/docs/app/components/search/SearchChat.vue
+++ b/docs/app/components/search/SearchChat.vue
@@ -107,7 +107,7 @@ const getCachedToolMessage = useMemoize((state: State, toolName: string, input:
       :user="{ side: 'left', variant: 'naked', icon: 'i-lucide-user' }"
       :assistant="{ icon: 'i-lucide-bot' }"
     >
-      <template #content="{ message }">
+      <template #content="message">
         <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`">
           <MDCCached
             v-if="part.type === 'text' && message.role === 'assistant'"
diff --git a/docs/content/blog/how-to-build-an-ai-chat.md b/docs/content/blog/how-to-build-an-ai-chat.md
index 95ed6b293b..773a06b277 100644
--- a/docs/content/blog/how-to-build-an-ai-chat.md
+++ b/docs/content/blog/how-to-build-an-ai-chat.md
@@ -514,7 +514,7 @@ onMounted(() => {
           should-auto-scroll
           class="flex-1"
         >
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
@@ -779,7 +779,7 @@ onMounted(() => {
           should-auto-scroll
           class="flex-1"
         >
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
@@ -944,7 +944,7 @@ onMounted(() => {
           should-auto-scroll
           class="flex-1"
         >
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
diff --git a/docs/content/docs/1.getting-started/3.migration/1.v4.md b/docs/content/docs/1.getting-started/3.migration/1.v4.md
index 1376baaa60..3f8b457031 100644
--- a/docs/content/docs/1.getting-started/3.migration/1.v4.md
+++ b/docs/content/docs/1.getting-started/3.migration/1.v4.md
@@ -419,7 +419,7 @@ This section only applies if you're using the AI SDK and chat components (`ChatM
 ```vue
 <template>
   <UChatMessages :messages="chat.messages" :status="chat.status">
-    <template #content="{ message }">
+    <template #content="message">
       <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
         <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
         <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
diff --git a/docs/content/docs/2.components/chat-messages.md b/docs/content/docs/2.components/chat-messages.md
index b4143fcd46..22e216bf06 100644
--- a/docs/content/docs/2.components/chat-messages.md
+++ b/docs/content/docs/2.components/chat-messages.md
@@ -462,7 +462,7 @@ function onSubmit() {
     <template #body>
       <UContainer>
         <UChatMessages :messages="chat.messages" :status="chat.status">
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
@@ -516,7 +516,7 @@ You can use all the slots of the [`ChatMessage`](/docs/components/chat-message#s
 ```vue{5-9}
 <template>
   <UChatMessages :messages="messages" :status="status">
-    <template #content="{ message }">
+    <template #content="message">
       <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
         <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
         <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
diff --git a/docs/content/docs/2.components/chat-prompt-submit.md b/docs/content/docs/2.components/chat-prompt-submit.md
index 491afa8d6a..8b7b703411 100644
--- a/docs/content/docs/2.components/chat-prompt-submit.md
+++ b/docs/content/docs/2.components/chat-prompt-submit.md
@@ -269,7 +269,7 @@ function onSubmit() {
     <template #body>
       <UContainer>
         <UChatMessages :messages="chat.messages" :status="chat.status">
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
diff --git a/docs/content/docs/2.components/chat-prompt.md b/docs/content/docs/2.components/chat-prompt.md
index d438ac241d..6e15b7ca09 100644
--- a/docs/content/docs/2.components/chat-prompt.md
+++ b/docs/content/docs/2.components/chat-prompt.md
@@ -114,7 +114,7 @@ function onSubmit() {
     <template #body>
       <UContainer>
         <UChatMessages :messages="chat.messages" :status="chat.status">
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
               <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
diff --git a/playgrounds/nuxt/app/pages/chat.vue b/playgrounds/nuxt/app/pages/chat.vue
index c11a40c107..1d1a2e1bfd 100644
--- a/playgrounds/nuxt/app/pages/chat.vue
+++ b/playgrounds/nuxt/app/pages/chat.vue
@@ -46,7 +46,7 @@ function onSubmit() {
       :user="{ avatar: { src: 'https://github.com/benjamincanac.png' } }"
       :spacing-offset="48"
     >
-      <template #content="{ message }">
+      <template #content="message">
         <template
           v-for="(part, index) in message.parts"
           :key="`${message.id}-${part.type}-${index}${'state' in part ? `-${part.state}` : ''}`"
diff --git a/skills/nuxt-ui/references/layouts/chat.md b/skills/nuxt-ui/references/layouts/chat.md
index aaad2c4baf..624ce48396 100644
--- a/skills/nuxt-ui/references/layouts/chat.md
+++ b/skills/nuxt-ui/references/layouts/chat.md
@@ -73,7 +73,7 @@ function onSubmit() {
     <template #body>
       <UContainer>
         <UChatMessages :messages="chat.messages" :status="chat.status">
-          <template #content="{ message }">
+          <template #content="message">
             <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
               <MDC
                 v-if="part.type === 'text' && message.role === 'assistant'"

From feca8d964504bed11fc2bed5eee3164c0bc91eab Mon Sep 17 00:00:00 2001
From: Sandro Circi <sandro.circi@digitoolmedia.com>
Date: Mon, 2 Mar 2026 16:43:09 +0100
Subject: [PATCH 10/10] fix(ChatMessages): do not duplicate messages in props

---
 src/runtime/components/ChatMessages.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/runtime/components/ChatMessages.vue b/src/runtime/components/ChatMessages.vue
index eae03206ab..91a416eb02 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -64,18 +64,11 @@ type SlotBase<T extends UIMessage[]>
     ? ChatMessageSlots<M, D, U>
     : ChatMessageSlots
 
-type ExtendSlotWithVersion<K extends keyof SlotBase<T>, T extends UIMessage[] = UIMessage[]>
-  = SlotBase<T>[K] extends (props: infer P) => VNode[]
-    ? (props: P & { message: T[number] }) => VNode[]
-    : SlotBase<T>[K]
-
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-  [K in keyof SlotBase<T>]?: ExtendSlotWithVersion<K, T>
-} & {
   default?(props?: {}): VNode[]
   indicator?(props: { ui: ChatMessages['ui'] }): VNode[]
   viewport?(props: { ui: ChatMessages['ui'], onClick: () => void }): VNode[]
-}
+} & SlotBase<T>
 
 </script>
 
@@ -86,7 +79,6 @@ import { defu } from 'defu'
 import { useElementBounding, useEventListener, watchThrottled } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../composables/useComponentUI'
-import { omit } from '../utils'
 import { tv } from '../utils/tv'
 import UChatMessage from './ChatMessage.vue'
 import UButton from './Button.vue'
@@ -99,7 +91,10 @@ const props = withDefaults(defineProps<ChatMessagesProps<T>>(), {
 })
 const slots = defineSlots<ChatMessagesSlots<T>>()
 
-const getProxySlots = () => omit(slots, ['default', 'indicator', 'viewport'])
+function getSlotsKeys() {
+  const omitKeys = ['default', 'indicator', 'viewport']
+  return Object.keys(slots).filter(key => !omitKeys.includes(key)) as (keyof SlotBase<T>)[]
+}
 
 const appConfig = useAppConfig() as ChatMessages['AppConfig']
 const uiProp = useComponentUI('chatMessages', props)
@@ -309,8 +304,8 @@ onMounted(() => {
         :ref="el => registerMessageRef(message.id, el as ComponentPublicInstance)"
         :compact="compact"
       >
-        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-          <slot :name="(name as keyof ChatMessagesSlots<T>)" v-bind="(slotData as any)" :message="message" />
+        <template v-for="name in getSlotsKeys()" #[name]="messageOrData">
+          <slot :name="name" v-bind="messageOrData" />
         </template>
       </UChatMessage>
     </slot>