From 4dffa8ea61824a912421840c669a4207bd83ef6b Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Tue, 28 Apr 2026 14:58:36 +0200
Subject: [PATCH 1/4] feat(chatMessage): add color props and header slot

---
 .../nuxt/app/composables/useNavigation.ts     |  1 +
 .../app/pages/components/chat-message.vue     | 22 ++++++
 src/runtime/components/ChatMessage.vue        | 14 +++-
 src/theme/chat-message.ts                     | 76 +++++++++++++++----
 4 files changed, 95 insertions(+), 18 deletions(-)
 create mode 100644 playgrounds/nuxt/app/pages/components/chat-message.vue

diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index e427a0ee72..295a2b51c4 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -13,6 +13,7 @@ const components = [
   'calendar',
   'card',
   'carousel',
+  'chat-message',
   'chat-reasoning',
   'chat-shimmer',
   'chat-tool',
diff --git a/playgrounds/nuxt/app/pages/components/chat-message.vue b/playgrounds/nuxt/app/pages/components/chat-message.vue
new file mode 100644
index 0000000000..13d225b313
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/chat-message.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import theme from '#build/ui/chat-message'
+
+const colors = Object.keys(theme.variants.color)
+const variants = Object.keys(theme.variants.variant)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color],
+  variant: [theme.defaultVariants.variant],
+})
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+    <USelect v-model="attrs.variant" :items="variants" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UChatMessage content="My message" v-bind="props" />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 39c82519e1..44c8b4e078 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -23,6 +23,10 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
    * @defaultValue 'naked'
    */
   variant?: ChatMessage['variants']['variant']
+  /**
+   * @defaultValue 'neutral'
+   */
+  color?: ChatMessage['variants']['color']
   /**
    * @defaultValue 'left'
    */
@@ -49,6 +53,7 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
 }
 
 export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+  header?(props: UIMessage<TMetadata, TDataParts, TTools>): VNode[]
   leading?(props: UIMessage<TMetadata, TDataParts, TTools> & { avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'], ui: ChatMessage['ui'] }): VNode[]
   files?(props: Omit<UIMessage<TMetadata, TDataParts, TTools>, 'parts'> & { parts: FileUIPart[] }): VNode[]
   content?(props: UIMessage<TMetadata, TDataParts, TTools> & { content?: string }): VNode[]
@@ -83,6 +88,7 @@ const messageProps = computed(() => omit(props, ['as', 'icon', 'avatar', 'varian
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage || {}) })({
   variant: props.variant,
+  color: props.color,
   side: props.side,
   leading: !!props.icon || !!props.avatar || !!slots.leading,
   actions: !!props.actions || !!slots.actions,
@@ -92,8 +98,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
 
 <template>
   <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
-      <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+    <div v-if="(!!slots.files && fileParts.length) || !!slots.header" data-slot="header" :class="ui.container({ class: uiProp?.header })">
+      <slot name="header" v-bind="{ ...messageProps }">
+        <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
+          <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+        </div>
+      </slot>
     </div>
 
     <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
diff --git a/src/theme/chat-message.ts b/src/theme/chat-message.ts
index e12c084169..0e97c0004f 100644
--- a/src/theme/chat-message.ts
+++ b/src/theme/chat-message.ts
@@ -3,6 +3,7 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'group/message relative w-full',
+    header: '',
     container: 'relative flex items-start',
     leading: 'inline-flex items-center justify-center min-h-6',
     leadingIcon: 'shrink-0',
@@ -14,21 +15,15 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     variant: {
-      solid: {
-        content: 'bg-inverted text-inverted'
-      },
-      outline: {
-        content: 'bg-default ring ring-default'
-      },
-      soft: {
-        content: 'bg-elevated/50'
-      },
-      subtle: {
-        content: 'bg-elevated/50 ring ring-default'
-      },
-      naked: {
-        content: ''
-      }
+      solid: '',
+      outline: '',
+      soft: '',
+      subtle: '',
+      naked: ''
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
     },
     side: {
       left: {},
@@ -100,8 +95,57 @@ export default (options: Required<ModuleOptions>) => ({
     class: {
       content: 'w-full'
     }
+  }, ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: 'solid',
+    class: {
+      content: `bg-${color} text-inverted`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: 'outline',
+    class: {
+      content: `text-${color} ring ring-${color}/25`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: 'soft',
+    class: {
+      content: `bg-${color}/10 text-${color}`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: 'subtle',
+    class: {
+      content: `bg-${color}/10 text-${color} ring ring-${color}/25`
+    }
+  })), {
+    color: 'neutral',
+    variant: 'solid',
+    class: {
+      content: 'bg-inverted text-inverted'
+    }
+  }, {
+    color: 'neutral',
+    variant: 'outline',
+    class: {
+      content: 'bg-default ring ring-default'
+    }
+  }, {
+    color: 'neutral',
+    variant: 'soft',
+    class: {
+      content: 'bg-elevated/50'
+    }
+  }, {
+    color: 'neutral',
+    variant: 'subtle',
+    class: {
+      content: 'bg-elevated/50 ring ring-default'
+    }
   }],
   defaultVariants: {
-    variant: 'naked'
+    variant: 'naked',
+    color: 'neutral'
   }
 })

From 64e5fd6b35ce6101d5ebae2d60118d8c1c11092e Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Tue, 28 Apr 2026 15:20:47 +0200
Subject: [PATCH 2/4] test(ChatMessage): add with primary variant

---
 .../content/docs/2.components/chat-message.md |  25 +++++
 .../app/pages/components/chat-message.vue     |   2 +-
 src/runtime/components/ChatMessage.vue        |   2 +-
 test/components/ChatMessage.spec.ts           |   4 +-
 .../ChatMessage-vue.spec.ts.snap              | 104 +++++++++++++++---
 .../__snapshots__/ChatMessage.spec.ts.snap    | 104 +++++++++++++++---
 .../ChatMessages-vue.spec.ts.snap             |  28 ++---
 .../__snapshots__/ChatMessages.spec.ts.snap   |  28 ++---
 8 files changed, 230 insertions(+), 67 deletions(-)

diff --git a/docs/content/docs/2.components/chat-message.md b/docs/content/docs/2.components/chat-message.md
index c930cbde41..bee28d1f9c 100644
--- a/docs/content/docs/2.components/chat-message.md
+++ b/docs/content/docs/2.components/chat-message.md
@@ -87,6 +87,30 @@ props:
 When using the [`ChatMessages`](/docs/components/chat-messages) component, the `side` prop is set to `left` for `assistant` messages and `right` for `user` messages.
 ::
 
+### Color :badge{label="Soon" class="align-text-top"}
+
+Use the `color` prop to change the color of the message.
+
+::component-code
+---
+prettier: true
+ignore:
+  - parts
+  - role
+  - id
+  - variant
+props:
+  variant: 'soft'
+  color: 'primary'
+  parts:
+    - type: 'text'
+      id: '1'
+      text: 'Hello! Tell me more about building AI chatbots with Nuxt UI.'
+  role: 'user'
+  id: '1'
+---
+::
+
 ### Variant
 
 Use the `variant` prop to change style of the message.
@@ -100,6 +124,7 @@ ignore:
   - id
 props:
   variant: 'soft'
+  color: 'neutral'
   parts:
     - type: 'text'
       id: '1'
diff --git a/playgrounds/nuxt/app/pages/components/chat-message.vue b/playgrounds/nuxt/app/pages/components/chat-message.vue
index 13d225b313..6ffe246dcd 100644
--- a/playgrounds/nuxt/app/pages/components/chat-message.vue
+++ b/playgrounds/nuxt/app/pages/components/chat-message.vue
@@ -6,7 +6,7 @@ const variants = Object.keys(theme.variants.variant)
 
 const attrs = reactive({
   color: [theme.defaultVariants.color],
-  variant: [theme.defaultVariants.variant],
+  variant: [theme.defaultVariants.variant]
 })
 </script>
 
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 44c8b4e078..91b45a0d42 100644
--- a/src/runtime/components/ChatMessage.vue
+++ b/src/runtime/components/ChatMessage.vue
@@ -98,7 +98,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
 
 <template>
   <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="(!!slots.files && fileParts.length) || !!slots.header" data-slot="header" :class="ui.container({ class: uiProp?.header })">
+    <div v-if="(!!slots.files && fileParts.length) || !!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
       <slot name="header" v-bind="{ ...messageProps }">
         <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
           <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
diff --git a/test/components/ChatMessage.spec.ts b/test/components/ChatMessage.spec.ts
index 9559179e5c..2404505e03 100644
--- a/test/components/ChatMessage.spec.ts
+++ b/test/components/ChatMessage.spec.ts
@@ -22,11 +22,13 @@ describe('ChatMessage', () => {
     ['with role assistant', { props: { ...props, role: 'assistant' } }],
     ['with side right', { props: { ...props, side: 'right' } }],
     ['with compact', { props: { ...props, compact: true } }],
-    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { ...props, variant } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { ...props, variant } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant, color: 'primary' } }]),
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: '' } }],
     ['with ui', { props: { ...props, ui: {} } }],
     // Slots
+    ['with header slot', { props, slots: { header: () => 'Header slot' } }],
     ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
     ['with files slot', { props: { ...props, parts: [...props.parts, { type: 'file' as const, mediaType: 'text/plain', url: 'https://example.com/test.txt', filename: 'test.txt' }] }, slots: { files: () => 'Files slot' } }],
     ['with content slot', { props, slots: { content: () => 'Content slot' } }],
diff --git a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
index de7de21317..e02e86ad10 100644
--- a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
@@ -79,7 +79,20 @@ exports[`ChatMessage > renders with content slot correctly 1`] = `
 
 exports[`ChatMessage > renders with files slot correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
+  <div data-slot="header" class="">
+    <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
+  </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?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with header slot correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="header" class="">Header 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?</div>
@@ -110,7 +123,7 @@ exports[`ChatMessage > renders with leading slot correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with parts correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant naked correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -121,29 +134,51 @@ exports[`ChatMessage > renders with parts correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with role assistant correctly 1`] = `
-"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+exports[`ChatMessage > renders with neutral variant outline correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-default ring ring-default">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with side right correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant soft correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
-  <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
+  <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?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with ui correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant solid correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 bg-inverted text-inverted">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with neutral variant subtle correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 bg-elevated/50 ring ring-default">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with parts correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -154,7 +189,7 @@ exports[`ChatMessage > renders with ui correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant naked correctly 1`] = `
+exports[`ChatMessage > renders with primary variant naked correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -165,45 +200,78 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant outline correctly 1`] = `
+exports[`ChatMessage > renders with primary variant outline correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 text-primary ring ring-primary/25">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with primary variant soft correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-default ring ring-default space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary/10 text-primary">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant soft correctly 1`] = `
+exports[`ChatMessage > renders with primary variant solid correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary text-inverted">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant solid correctly 1`] = `
+exports[`ChatMessage > renders with primary variant subtle correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-inverted text-inverted space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary/10 text-primary ring ring-primary/25">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with role assistant correctly 1`] = `
+"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with side right correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] 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?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant subtle correctly 1`] = `
+exports[`ChatMessage > renders with ui correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-elevated/50 ring ring-default space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</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>"
diff --git a/test/components/__snapshots__/ChatMessage.spec.ts.snap b/test/components/__snapshots__/ChatMessage.spec.ts.snap
index cb1cb22097..36787882a1 100644
--- a/test/components/__snapshots__/ChatMessage.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessage.spec.ts.snap
@@ -79,7 +79,20 @@ exports[`ChatMessage > renders with content slot correctly 1`] = `
 
 exports[`ChatMessage > renders with files slot correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
-  <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
+  <div data-slot="header" class="">
+    <div data-slot="files" class="flex items-center gap-1.5 mb-1.5">Files slot</div>
+  </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?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with header slot correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <div data-slot="header" class="">Header 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?</div>
@@ -110,7 +123,7 @@ exports[`ChatMessage > renders with leading slot correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with parts correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant naked correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -121,29 +134,51 @@ exports[`ChatMessage > renders with parts correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with role assistant correctly 1`] = `
-"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+exports[`ChatMessage > renders with neutral variant outline correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-default ring ring-default">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with side right correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant soft correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
-  <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
+  <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?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with ui correctly 1`] = `
+exports[`ChatMessage > renders with neutral variant solid correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 bg-inverted text-inverted">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with neutral variant subtle correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 bg-elevated/50 ring ring-default">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with parts correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -154,7 +189,7 @@ exports[`ChatMessage > renders with ui correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant naked correctly 1`] = `
+exports[`ChatMessage > renders with primary variant naked correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <div data-slot="container" class="relative flex items-start gap-3 pb-8">
@@ -165,45 +200,78 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant outline correctly 1`] = `
+exports[`ChatMessage > renders with primary variant outline correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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 px-4 py-3 rounded-lg min-h-12 text-primary ring ring-primary/25">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with primary variant soft correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-default ring ring-default space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary/10 text-primary">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant soft correctly 1`] = `
+exports[`ChatMessage > renders with primary variant solid correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary text-inverted">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant solid correctly 1`] = `
+exports[`ChatMessage > renders with primary variant subtle correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-inverted text-inverted space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+    <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-primary/10 text-primary ring ring-primary/25">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with role assistant correctly 1`] = `
+"<article data-role="assistant" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <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?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+exports[`ChatMessage > renders with side right correctly 1`] = `
+"<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
+  <!--v-if-->
+  <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] 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?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant subtle correctly 1`] = `
+exports[`ChatMessage > renders with ui correctly 1`] = `
 "<article data-role="user" data-slot="root" class="group/message relative w-full scroll-mt-4 sm:scroll-mt-6">
   <!--v-if-->
   <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 bg-elevated/50 ring ring-default space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</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>"
diff --git a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
index 701f3186f2..f5e168734c 100644
--- a/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages-vue.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -29,7 +29,7 @@ exports[`ChatMessages > renders with class correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -52,7 +52,7 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-2 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-2 px-2 py-1 rounded-lg min-h-8 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -75,7 +75,7 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Content slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -105,7 +105,7 @@ exports[`ChatMessages > renders with files slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -128,7 +128,7 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -158,7 +158,7 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -181,7 +181,7 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -204,7 +204,7 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -227,7 +227,7 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -250,7 +250,7 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -282,7 +282,7 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -305,7 +305,7 @@ exports[`ChatMessages > renders with user correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <div data-slot="leading" class="inline-flex items-center justify-center min-h-6 mt-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -328,7 +328,7 @@ exports[`ChatMessages > renders with viewport slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
diff --git a/test/components/__snapshots__/ChatMessages.spec.ts.snap b/test/components/__snapshots__/ChatMessages.spec.ts.snap
index 5348df0787..42b0b602b8 100644
--- a/test/components/__snapshots__/ChatMessages.spec.ts.snap
+++ b/test/components/__snapshots__/ChatMessages.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`ChatMessages > renders with assistant correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -29,7 +29,7 @@ exports[`ChatMessages > renders with class correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -52,7 +52,7 @@ exports[`ChatMessages > renders with compact correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-1.5 pb-3">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-2 px-2 py-1 rounded-lg min-h-8">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-2 px-2 py-1 rounded-lg min-h-8 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -75,7 +75,7 @@ exports[`ChatMessages > renders with content slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Content slot</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Content slot</div>
       <!--v-if-->
     </div>
   </article>
@@ -105,7 +105,7 @@ exports[`ChatMessages > renders with files slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -128,7 +128,7 @@ exports[`ChatMessages > renders with indicator slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -158,7 +158,7 @@ exports[`ChatMessages > renders with messages correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -181,7 +181,7 @@ exports[`ChatMessages > renders with status error correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -204,7 +204,7 @@ exports[`ChatMessages > renders with status ready correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -227,7 +227,7 @@ exports[`ChatMessages > renders with status streaming correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -250,7 +250,7 @@ exports[`ChatMessages > renders with status submitted correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -282,7 +282,7 @@ exports[`ChatMessages > renders with ui correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -305,7 +305,7 @@ exports[`ChatMessages > renders with user correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <div data-slot="leading" class="inline-flex items-center justify-center min-h-6 mt-2"><span data-slot="root" class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://github.com/benjamincanac.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span></div>
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>
@@ -328,7 +328,7 @@ exports[`ChatMessages > renders with viewport slot correctly 1`] = `
     <!--v-if-->
     <div data-slot="container" class="relative flex items-start justify-end ms-auto max-w-[75%] gap-3 pb-8">
       <!--v-if-->
-      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 bg-elevated/50 space-y-4 px-4 py-3 rounded-lg min-h-12">Hello, how are you?</div>
+      <div data-slot="content" class="relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0 space-y-4 px-4 py-3 rounded-lg min-h-12 bg-elevated/50">Hello, how are you?</div>
       <!--v-if-->
     </div>
   </article>

From 28cc3f1b759533781a88cc38a638a0b1d5f8dc8d Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Tue, 28 Apr 2026 15:33:55 +0200
Subject: [PATCH 3/4] Update chat-message.md

---
 .../content/docs/2.components/chat-message.md | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/docs/content/docs/2.components/chat-message.md b/docs/content/docs/2.components/chat-message.md
index bee28d1f9c..34c38b35a7 100644
--- a/docs/content/docs/2.components/chat-message.md
+++ b/docs/content/docs/2.components/chat-message.md
@@ -87,9 +87,9 @@ props:
 When using the [`ChatMessages`](/docs/components/chat-messages) component, the `side` prop is set to `left` for `assistant` messages and `right` for `user` messages.
 ::
 
-### Color :badge{label="Soon" class="align-text-top"}
+### Variant
 
-Use the `color` prop to change the color of the message.
+Use the `variant` prop to change style of the message.
 
 ::component-code
 ---
@@ -98,10 +98,8 @@ ignore:
   - parts
   - role
   - id
-  - variant
 props:
   variant: 'soft'
-  color: 'primary'
   parts:
     - type: 'text'
       id: '1'
@@ -111,9 +109,13 @@ props:
 ---
 ::
 
-### Variant
+::note
+When using the [`ChatMessages`](/docs/components/chat-messages) component, the `variant` prop is set to `naked` for `assistant` messages and `soft` for `user` messages.
+::
 
-Use the `variant` prop to change style of the message.
+### Color :badge{label="Soon" class="align-text-top"}
+
+Use the `color` prop to change the color of the message.
 
 ::component-code
 ---
@@ -124,7 +126,7 @@ ignore:
   - id
 props:
   variant: 'soft'
-  color: 'neutral'
+  color: 'primary'
   parts:
     - type: 'text'
       id: '1'
@@ -134,10 +136,6 @@ props:
 ---
 ::
 
-::note
-When using the [`ChatMessages`](/docs/components/chat-messages) component, the `variant` prop is set to `naked` for `assistant` messages and `soft` for `user` messages.
-::
-
 ### Icon
 
 Use the `icon` prop to display an [Icon](/docs/components/icon) component next to the message.

From d03831060f59a88b68115db4b303274cc625f394 Mon Sep 17 00:00:00 2001
From: Maxime Pauvert <maximepvrt@gmail.com>
Date: Tue, 28 Apr 2026 15:57:03 +0200
Subject: [PATCH 4/4] Update chat-message.vue

---
 playgrounds/nuxt/app/pages/components/chat-message.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playgrounds/nuxt/app/pages/components/chat-message.vue b/playgrounds/nuxt/app/pages/components/chat-message.vue
index 6ffe246dcd..e02015c507 100644
--- a/playgrounds/nuxt/app/pages/components/chat-message.vue
+++ b/playgrounds/nuxt/app/pages/components/chat-message.vue
@@ -17,6 +17,6 @@ const attrs = reactive({
   </Navbar>
 
   <Matrix v-slot="props" :attrs="attrs">
-    <UChatMessage content="My message" v-bind="props" />
+    <UChatMessage id="1" role="user" :parts="[{ type: 'text', text: 'Hello, how are you?' }]" v-bind="props" />
   </Matrix>
 </template>