From 5495525263848ec85c5fbcc718947591ad5dad7d Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Sun, 19 Oct 2025 16:22:37 +0200
Subject: [PATCH 1/4] 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 ac9522fc8f..bff92782b9 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 907a886b67..72ab561ede 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -7,8 +7,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.
@@ -57,13 +57,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
@@ -71,7 +71,7 @@ export type ChatMessagesSlots = {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends UIMessage[]">
 import type { ComponentPublicInstance } from 'vue'
 import { ref, computed, watch, nextTick, toRef, onMounted } from 'vue'
 import { Presence } from 'reka-ui'
@@ -83,13 +83,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 68029e1c6c73190995f2f9ba2189594fe122ca1c Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 15:40:20 +0200
Subject: [PATCH 2/4] 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 bff92782b9..41e4ca78d0 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 9885a5bae42c4dc24895795d45ed46bdcee4442d Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 16:03:04 +0200
Subject: [PATCH 3/4] 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 72ab561ede..c846aaf181 100644
--- a/src/runtime/components/ChatMessages.vue
+++ b/src/runtime/components/ChatMessages.vue
@@ -7,7 +7,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
   /**
@@ -62,7 +62,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
@@ -71,7 +71,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 type { ComponentPublicInstance } from 'vue'
 import { ref, computed, watch, nextTick, toRef, onMounted } from 'vue'
 import { Presence } from 'reka-ui'

From 03f44b21c28cc062c94f217662b0fa7969cb5348 Mon Sep 17 00:00:00 2001
From: Dany <alwe.dev@gmail.com>
Date: Thu, 23 Oct 2025 18:01:33 +0200
Subject: [PATCH 4/4] 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 41e4ca78d0..3cfa044f73 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 }}