fix(ChatMessage): prevent content leak and guard content wrapper

Author: benjamincanac

src/runtime/components/ChatMessage.vue

@@ -79,7 +79,7 @@ const uiProp = useComponentUI('chatMessage', props)
 const fileParts = computed(() => props.parts?.filter((part): part is FileUIPart => part.type === 'file') ?? [])
 const textParts = computed(() => props.parts?.filter((part): part is TextUIPart => part.type === 'text') ?? [])
 
-const messageProps = computed(() => omit(props, ['as', 'icon', 'avatar', 'variant', 'side', 'actions', 'compact', 'class', 'ui']))
+const messageProps = computed(() => omit(props, ['as', 'icon', 'avatar', 'variant', 'side', 'actions', 'compact', 'class', 'ui', 'content']))
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage || {}) })({
   variant: props.variant,
@@ -104,8 +104,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
         </slot>
       </div>
 
-      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
-        <slot name="content" v-bind="messageProps">
+      <div v-if="content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
+        <slot name="content" v-bind="{ ...messageProps, content }">
           <template v-if="content">
             {{ content }}
           </template>

test/components/__snapshots__/ChatMessage-vue.spec.ts.snap

@@ -82,9 +82,7 @@ exports[`ChatMessage > renders with files slot correctly 1`] = `
   <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4">Hello, how are you?
-      <!--v-if-->
-    </div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"

test/components/__snapshots__/ChatMessage.spec.ts.snap

@@ -82,9 +82,7 @@ exports[`ChatMessage > renders with files slot correctly 1`] = `
   <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
     <!--v-if-->
-    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4">Hello, how are you?
-      <!--v-if-->
-    </div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"