@nuxt/ui 4.6.0 → 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";
 ```
@@ -126,7 +129,7 @@ Thank you for considering contributing to Nuxt UI. Here are a few ways you can g
 - Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 > [!TIP]
-> We provide a [contributing skill](https://github.com/nuxt/ui/tree/v4/.claude/skills/contributing) for AI assistants to help you contribute to Nuxt UI. It will automatically guide you through component structure, theming patterns, testing conventions, and documentation guidelines when working in this repository.
+> We provide contributing guidelines through [`AGENTS.md`](https://github.com/nuxt/ui/blob/v4/AGENTS.md) for AI assistants to help you contribute to Nuxt UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.
 
 ## Local Development
 

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.0",
+  "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.0";
+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",
@@ -97,6 +98,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultConfig(options.theme));
+    nuxt.options.build.transpile.push("reka-ui");
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, `${options.theme?.prefix ? options.theme.prefix + ":" : ""}isolate`].filter(Boolean).join(" ");
     nuxt.hook("vite:extend", async ({ config }) => {

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,
@@ -44,41 +46,33 @@ 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" data-slot="files" :class="ui.files({ class: uiProp?.files })">
-      <slot name="files" :parts="fileParts" />
+    <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>
 
     <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>