@nuxt/ui 4.6.1 → 4.7.0

package/README.md

@@ -58,13 +58,14 @@ bun add @nuxt/ui tailwindcss
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  modules: ['@nuxt/ui']
+  modules: ['@nuxt/ui'],
+  css: ['~/assets/css/main.css']
 })
 ```
 
 2. Import Tailwind CSS and Nuxt UI in your CSS:
 
-```css [assets/css/main.css]
+```css [app/assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 ```
@@ -90,7 +91,9 @@ export default defineConfig({
 
 2. Use the Nuxt UI Vue plugin in your `main.ts`:
 
-```ts [main.ts]
+```ts [src/main.ts]
+import './assets/css/main.css'
+
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import ui from '@nuxt/ui/vue-plugin'
@@ -111,7 +114,7 @@ app.mount('#app')
 
 3. Import Tailwind CSS and Nuxt UI in your CSS:
 
-```css [assets/main.css]
+```css [src/assets/css/main.css]
 @import "tailwindcss";
 @import "@nuxt/ui";
 ```

package/cli/package.json

@@ -5,7 +5,7 @@
     ".": "./index.mjs"
   },
   "dependencies": {
-    "citty": "^0.2.1",
+    "citty": "^0.2.2",
     "consola": "^3.4.2",
     "pathe": "^2.0.3",
     "scule": "^1.3.0"

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, p as publicComposables, b as addTemplates } from './shared/ui.DJUbBpE2.mjs';
+import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, p as publicComposables, b as addTemplates } from './shared/ui.BIQuJqNV.mjs';
 import '../dist/runtime/utils/index.js';
 import 'node:url';
 import 'scule';
@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.6.1";
+const version = "4.7.0";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -79,6 +79,7 @@ const module$1 = defineNuxtModule({
               "icon": "ProseIcon",
               "kbd": "ProseKbd",
               "note": "ProseNote",
+              "prompt": "ProsePrompt",
               "steps": "ProseSteps",
               "tabs": "ProseTabs",
               "tabs-item": "ProseTabsItem",

package/dist/runtime/components/Accordion.d.vue.ts

@@ -18,7 +18,12 @@ export interface AccordionItem {
     trailingIcon?: IconProps['name'];
     slot?: string;
     content?: string;
-    /** A unique value for the accordion item. Defaults to the index. */
+    /**
+     * A unique value for the accordion item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents
+     * accordion content (and its local state) from remounting when items are added, removed,
+     * or reordered.
+     */
     value?: string;
     disabled?: boolean;
     class?: any;

package/dist/runtime/components/Accordion.vue

@@ -41,7 +41,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.accordion ||
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
-      :key="index"
+      :key="get(item, props.valueKey) ?? index"
       :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"

package/dist/runtime/components/Accordion.vue.d.ts

@@ -18,7 +18,12 @@ export interface AccordionItem {
     trailingIcon?: IconProps['name'];
     slot?: string;
     content?: string;
-    /** A unique value for the accordion item. Defaults to the index. */
+    /**
+     * A unique value for the accordion item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents
+     * accordion content (and its local state) from remounting when items are added, removed,
+     * or reordered.
+     */
     value?: string;
     disabled?: boolean;
     class?: any;

package/dist/runtime/components/AuthForm.d.vue.ts

@@ -87,6 +87,7 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     title?(props?: {}): VNode[];
     description?(props?: {}): VNode[];
     providers?(props?: {}): VNode[];
+    separator?(props?: {}): VNode[];
     validation?(props?: {}): VNode[];
     submit?(props: {
         loading: boolean;
@@ -102,7 +103,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<{
             validate: {
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
@@ -117,30 +118,26 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     transform?: T_1 | undefined;
                 }): Promise<false | import("../types").FormData<T, T_1>>;
             };
-            errors: import("vue").Ref<{
+            errors: {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+            }[];
+            setErrors: (errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            submit: () => Promise<void>;
+            getErrors: (name?: string | RegExp | keyof InferInput<T> | undefined) => {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
             }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
+            clear: (name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            disabled: boolean;
+            loading: boolean;
+            dirty: boolean;
             dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null, import("vue").ShallowUnwrapRef<{
+        } | null, {
             validate: {
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
@@ -155,30 +152,26 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     transform?: T_1 | undefined;
                 }): Promise<false | import("../types").FormData<T, T_1>>;
             };
-            errors: import("vue").Ref<{
+            errors: {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+            }[];
+            setErrors: (errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            submit: () => Promise<void>;
+            getErrors: (name?: string | RegExp | keyof InferInput<T> | undefined) => {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
             }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
+            clear: (name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            disabled: boolean;
+            loading: boolean;
+            dirty: boolean;
             dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null>>;
+        } | null>>;
         state: import("vue").Reactive<InferInput<T>>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/AuthForm.vue

@@ -116,12 +116,14 @@ defineExpose({
         </slot>
       </div>
 
-      <USeparator
-        v-if="providers?.length && fields?.length"
-        v-bind="typeof separator === 'object' ? separator : { label: separator }"
-        data-slot="separator"
-        :class="ui.separator({ class: uiProp?.separator })"
-      />
+      <slot name="separator">
+        <USeparator
+          v-if="providers?.length && fields?.length"
+          v-bind="typeof separator === 'object' ? separator : { label: separator }"
+          data-slot="separator"
+          :class="ui.separator({ class: uiProp?.separator })"
+        />
+      </slot>
 
       <UForm
         v-if="fields?.length"

package/dist/runtime/components/AuthForm.vue.d.ts

@@ -87,6 +87,7 @@ export type AuthFormSlots<T extends object = object, F extends AuthFormField = A
     title?(props?: {}): VNode[];
     description?(props?: {}): VNode[];
     providers?(props?: {}): VNode[];
+    separator?(props?: {}): VNode[];
     validation?(props?: {}): VNode[];
     submit?(props: {
         loading: boolean;
@@ -102,7 +103,7 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: Readonly<import("vue").ShallowRef<import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<{
             validate: {
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
@@ -117,30 +118,26 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     transform?: T_1 | undefined;
                 }): Promise<false | import("../types").FormData<T, T_1>>;
             };
-            errors: import("vue").Ref<{
+            errors: {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+            }[];
+            setErrors: (errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            submit: () => Promise<void>;
+            getErrors: (name?: string | RegExp | keyof InferInput<T> | undefined) => {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
             }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
+            clear: (name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            disabled: boolean;
+            loading: boolean;
+            dirty: boolean;
             dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null, import("vue").ShallowUnwrapRef<{
+        } | null, {
             validate: {
                 <T_1 extends boolean>(opts: {
                     name?: keyof InferInput<T> | (keyof InferInput<T>)[] | undefined;
@@ -155,30 +152,26 @@ declare const __VLS_export: <T extends FormSchema, F extends AuthFormField>(__VL
                     transform?: T_1 | undefined;
                 }): Promise<false | import("../types").FormData<T, T_1>>;
             };
-            errors: import("vue").Ref<{
+            errors: {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
-            }[], import("../types").FormErrorWithId[] | {
-                id?: string | undefined;
-                name?: string | undefined;
-                message: string;
-            }[]>;
-            setErrors(errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            submit(): Promise<void>;
-            getErrors(name?: string | RegExp | keyof InferInput<T> | undefined): {
+            }[];
+            setErrors: (errs: import("../types").FormError[], name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            submit: () => Promise<void>;
+            getErrors: (name?: string | RegExp | keyof InferInput<T> | undefined) => {
                 id?: string | undefined;
                 name?: string | undefined;
                 message: string;
             }[];
-            clear(name?: string | RegExp | keyof InferInput<T> | undefined): void;
-            disabled: import("vue").ComputedRef<boolean>;
-            loading: import("vue").Ref<boolean, boolean>;
-            dirty: import("vue").ComputedRef<boolean>;
+            clear: (name?: string | RegExp | keyof InferInput<T> | undefined) => void;
+            disabled: boolean;
+            loading: boolean;
+            dirty: boolean;
             dirtyFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             blurredFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
             touchedFields: ReadonlySet<import("vue").DeepReadonly<import("@vue/reactivity").UnwrapRefSimple<keyof InferInput<T>>>>;
-        }> | null>>;
+        } | null>>;
         state: import("vue").Reactive<InferInput<T>>;
     }>) => void;
     attrs: any;

package/dist/runtime/components/Calendar.vue

@@ -35,8 +35,8 @@ const props = defineProps({
   weekNumbers: { type: Boolean, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
-  defaultPlaceholder: { type: null, required: false },
-  placeholder: { type: null, required: false },
+  defaultPlaceholder: { type: Object, required: false },
+  placeholder: { type: Object, required: false },
   allowNonContiguousRanges: { type: Boolean, required: false },
   pagedNavigation: { type: Boolean, required: false },
   preventDeselect: { type: Boolean, required: false },
@@ -44,8 +44,8 @@ const props = defineProps({
   weekStartsOn: { type: Number, required: false },
   weekdayFormat: { type: String, required: false },
   fixedWeeks: { type: Boolean, required: false, default: true },
-  maxValue: { type: null, required: false },
-  minValue: { type: null, required: false },
+  maxValue: { type: Object, required: false },
+  minValue: { type: Object, required: false },
   numberOfMonths: { type: Number, required: false },
   disabled: { type: Boolean, required: false },
   readonly: { type: Boolean, required: false },

package/dist/runtime/components/Card.d.vue.ts

@@ -9,6 +9,8 @@ export interface CardProps {
      * @defaultValue 'div'
      */
     as?: any;
+    title?: string;
+    description?: string;
     /**
      * @defaultValue 'outline'
      */
@@ -18,6 +20,8 @@ export interface CardProps {
 }
 export interface CardSlots {
     header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
     default?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
 }

package/dist/runtime/components/Card.vue

@@ -10,6 +10,8 @@ import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
   variant: { type: null, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false }
@@ -24,8 +26,20 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.card || {} })
 
 <template>
   <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
-      <slot name="header" />
+    <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description)" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+      <slot name="header">
+        <div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: uiProp?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </div>
+
+        <div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: uiProp?.description })">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </div>
+      </slot>
     </div>
 
     <div v-if="!!slots.default" data-slot="body" :class="ui.body({ class: uiProp?.body })">

package/dist/runtime/components/Card.vue.d.ts

@@ -9,6 +9,8 @@ export interface CardProps {
      * @defaultValue 'div'
      */
     as?: any;
+    title?: string;
+    description?: string;
     /**
      * @defaultValue 'outline'
      */
@@ -18,6 +20,8 @@ export interface CardProps {
 }
 export interface CardSlots {
     header?(props?: {}): VNode[];
+    title?(props?: {}): VNode[];
+    description?(props?: {}): VNode[];
     default?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
 }

package/dist/runtime/components/ChatMessage.d.vue.ts

@@ -1,11 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage, FileUIPart } from 'ai';
+import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
-export interface ChatMessageProps extends UIMessage {
+export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'article'
@@ -32,7 +32,7 @@ export interface ChatMessageProps extends UIMessage {
      * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
     actions?: (Omit<ButtonProps, 'onClick'> & {
-        onClick?: (e: MouseEvent, message: UIMessage) => void;
+        onClick?: (e: MouseEvent, message: UIMessage<TMetadata, TDataParts, TTools>) => void;
     })[];
     /**
      * Render the message in a compact style.
@@ -48,26 +48,36 @@ export interface ChatMessageProps extends UIMessage {
     class?: any;
     ui?: ChatMessage['slots'];
 }
-export interface ChatMessageSlots {
-    leading?(props: {
-        avatar: ChatMessageProps['avatar'];
+export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+    leading?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
-    files?(props: {
+    files?(props: Omit<UIMessage<TMetadata, TDataParts, TTools>, 'parts'> & {
         parts: FileUIPart[];
     }): VNode[];
-    content?(props: ChatMessageProps): VNode[];
-    actions?(props: {
-        actions: ChatMessageProps['actions'];
+    content?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        content?: string;
+    }): VNode[];
+    actions?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        actions: ChatMessageProps<TMetadata, TDataParts, TTools>['actions'];
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessageSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools extends UITools>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessageProps<TMetadata, TDataParts, TTools>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ChatMessage.vue

@@ -33,6 +33,8 @@ const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatMessage", props);
 const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
+const textParts = computed(() => props.parts?.filter((part) => part.type === "text") ?? []);
+const messageProps = computed(() => omit(props, ["as", "icon", "avatar", "variant", "side", "actions", "compact", "class", "ui", "content"]));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -45,40 +47,32 @@ 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" :parts="fileParts" />
+      <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
     </div>
 
     <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
-        <slot name="leading" :avatar="avatar" :ui="ui">
+        <slot name="leading" v-bind="{ ...messageProps, avatar, ui }">
           <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
           <UAvatar v-else-if="avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
-        <slot
-          :id="id"
-          name="content"
-          :role="role"
-          :content="content"
-          :parts="parts"
-        >
+      <div v-if="content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
+        <slot name="content" v-bind="{ ...messageProps, content }">
           <template v-if="content">
             {{ content }}
           </template>
           <template v-else>
-            <template v-for="(part, index) in parts" :key="`${id}-${part.type}-${index}`">
-              <template v-if="part.type === 'text'">
-                {{ part.text }}
-              </template>
+            <template v-for="(part, index) in textParts" :key="`${id}-${part.type}-${index}`">
+              {{ part.text }}
             </template>
           </template>
         </slot>
       </div>
 
       <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
-        <slot name="actions" :actions="actions">
+        <slot name="actions" v-bind="{ ...messageProps, actions }">
           <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <UButton
               size="sm"
@@ -86,7 +80,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
               variant="ghost"
               v-bind="omit(action, ['onClick'])"
               :label="undefined"
-              @click="typeof action.onClick === 'function' ? action.onClick($event, props) : void 0"
+              @click="typeof action.onClick === 'function' ? action.onClick($event, messageProps) : void 0"
             />
           </UTooltip>
         </slot>