diff --git a/docs/content/docs/2.components/chat-message.md b/docs/content/docs/2.components/chat-message.md
index c930cbde41..34c38b35a7 100644
--- a/docs/content/docs/2.components/chat-message.md
+++ b/docs/content/docs/2.components/chat-message.md
@@ -113,6 +113,29 @@ props:
 When using the [`ChatMessages`](/docs/components/chat-messages) component, the `variant` prop is set to `naked` for `assistant` messages and `soft` 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
+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'
+---
+::
+
 ### Icon
 
 Use the `icon` prop to display an [Icon](/docs/components/icon) component next to the message.
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index b5e7a27165..dda7b2be63 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..e02015c507
--- /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 id="1" role="user" :parts="[{ type: 'text', text: 'Hello, how are you?' }]" v-bind="props" />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/ChatMessage.vue b/src/runtime/components/ChatMessage.vue
index 397d2d6596..20d61cd3aa 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[]
@@ -80,11 +85,12 @@ const appConfig = useAppConfig() as ChatMessage['AppConfig']
 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', 'content']))
+const messageProps = computed(() => omit(props, ['as', 'icon', 'avatar', 'variant', 'color', 'side', 'actions', 'compact', 'class', 'ui', 'content']))
 
 // eslint-disable-next-line vue/no-dupe-keys
 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,
@@ -94,8 +100,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatMessage
 
 <template>
   <Primitive :as="props.as" :data-role="props.role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: props.ui?.files })">
-      <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+    <div v-if="(!!slots.files && fileParts.length) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" v-bind="{ ...messageProps }">
+        <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: props.ui?.files })">
+          <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+        </div>
+      </slot>
     </div>
 
     <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
diff --git a/src/theme/chat-message.ts b/src/theme/chat-message.ts
index e12c084169..8ef310dcde 100644
--- a/src/theme/chat-message.ts
+++ b/src/theme/chat-message.ts
@@ -3,32 +3,27 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'group/message relative w-full',
+    header: 'mb-1.5',
     container: 'relative flex items-start',
     leading: 'inline-flex items-center justify-center min-h-6',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
     leadingAvatarSize: '',
-    files: 'flex items-center gap-1.5 mb-1.5',
+    files: 'flex items-center gap-1.5',
     content: 'relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0',
     actions: ['[@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center', options.theme.transitions && 'transition-opacity']
   },
   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,63 @@ 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`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: 'naked',
+    class: {
+      content: `text-${color}`
+    }
+  })), {
+    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'
   }
 })
diff --git a/test/components/ChatMessage.spec.ts b/test/components/ChatMessage.spec.ts
index 9559179e5c..336df8d96d 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' } }],
@@ -86,7 +88,7 @@ describe('ChatMessage', () => {
       }
     })
 
-    for (const key of ['as', 'icon', 'avatar', 'variant', 'side', 'actions', 'compact', 'class', 'ui']) {
+    for (const key of ['as', 'icon', 'avatar', 'variant', 'color', 'side', 'actions', 'compact', 'class', 'ui']) {
       expect(captured[0]).not.toHaveProperty(key)
     }
   })
diff --git a/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap b/test/components/__snapshots__/ChatMessage-vue.spec.ts.snap
index de7de21317..9d0becf58e 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="mb-1.5">
+    <div data-slot="files" class="flex items-center gap-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="mb-1.5">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,40 +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">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-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 variant naked correctly 1`] = `
+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">
@@ -165,45 +189,89 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant outline 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">
     <!--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 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 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 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 text-primary ring ring-primary/25">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant solid correctly 1`] = `
+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-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">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant subtle 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 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 text-inverted">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+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 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 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 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..aac27e5aa0 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="mb-1.5">
+    <div data-slot="files" class="flex items-center gap-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="mb-1.5">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,40 +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">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-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 variant naked correctly 1`] = `
+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">
@@ -165,45 +189,89 @@ exports[`ChatMessage > renders with variant naked correctly 1`] = `
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant outline 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">
     <!--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 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 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 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 text-primary ring ring-primary/25">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant solid correctly 1`] = `
+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-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">Hello, how are you?</div>
     <!--v-if-->
   </div>
 </article>"
 `;
 
-exports[`ChatMessage > renders with variant subtle 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 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 text-inverted">Hello, how are you?</div>
+    <!--v-if-->
+  </div>
+</article>"
+`;
+
+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 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 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 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 7ac149fe89..678f36bdc1 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 62c7e1f9c6..7341c5c2a8 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>