@nuxt/ui 4.5.1 → 4.6.1

package/README.md

@@ -126,7 +126,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/dist/module.d.mts

@@ -66,11 +66,18 @@ interface ModuleOptions {
     /**
      * Force the import of prose components even if `@nuxtjs/mdc` or `@nuxt/content` are not installed
      * @defaultValue false
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#prose
+     */
+    prose?: boolean;
+    /**
+     * @deprecated Use `prose` instead
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#mdc
      */
     mdc?: boolean;
     /**
      * Force the import of content & prose components even if `@nuxt/content` is not installed
      * @defaultValue false
+     * @see https://ui.nuxt.com/docs/getting-started/installation/nuxt#content
      */
     content?: boolean;
     /**

package/dist/module.json

@@ -1,10 +1,10 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.5.1",
+  "version": "4.6.1",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {
-    "nuxt": ">=4.0.0"
+    "nuxt": ">=4.1.0"
   },
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
-import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, r as resolveColors, a as getDefaultConfig, b as addTemplates } from './shared/ui.DI_ypO2T.mjs';
+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 '../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.5.1";
+const version = "4.6.1";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -20,10 +20,76 @@ const module$1 = defineNuxtModule({
     docs: "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
     configKey: "ui",
     compatibility: {
-      nuxt: ">=4.0.0"
+      nuxt: ">=4.1.0"
     }
   },
   defaults: defaultOptions,
+  moduleDependencies(nuxt) {
+    const userUiOptions = nuxt.options.ui || {};
+    return {
+      "@nuxt/icon": {
+        defaults: {
+          cssLayer: "base"
+        }
+      },
+      ...userUiOptions.fonts !== false && {
+        "@nuxt/fonts": {
+          defaults: {
+            defaults: {
+              weights: [400, 500, 600, 700]
+            }
+          }
+        }
+      },
+      ...userUiOptions.colorMode !== false && {
+        "@nuxtjs/color-mode": {
+          defaults: {
+            classSuffix: "",
+            disableTransition: true
+          }
+        }
+      },
+      "@nuxtjs/mdc": {
+        optional: !userUiOptions.mdc && !userUiOptions.content,
+        defaults: {
+          highlight: {
+            theme: {
+              light: "material-theme-lighter",
+              default: "material-theme",
+              dark: "material-theme-palenight"
+            }
+          },
+          components: {
+            map: {
+              "accordion": "ProseAccordion",
+              "accordion-item": "ProseAccordionItem",
+              "badge": "ProseBadge",
+              "callout": "ProseCallout",
+              "card": "ProseCard",
+              "card-group": "ProseCardGroup",
+              "caution": "ProseCaution",
+              "code-collapse": "ProseCodeCollapse",
+              "code-group": "ProseCodeGroup",
+              "code-icon": "ProseCodeIcon",
+              "code-preview": "ProseCodePreview",
+              "code-tree": "ProseCodeTree",
+              "collapsible": "ProseCollapsible",
+              "field": "ProseField",
+              "field-group": "ProseFieldGroup",
+              "icon": "ProseIcon",
+              "kbd": "ProseKbd",
+              "note": "ProseNote",
+              "steps": "ProseSteps",
+              "tabs": "ProseTabs",
+              "tabs-item": "ProseTabsItem",
+              "tip": "ProseTip",
+              "warning": "ProseWarning"
+            }
+          }
+        }
+      }
+    };
+  },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     options.theme = options.theme || {};
@@ -31,6 +97,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 }) => {
@@ -41,67 +108,8 @@ const module$1 = defineNuxtModule({
     if (nuxt.options.builder !== "@nuxt/vite-builder") {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name2, key, options2) {
-      if (!hasNuxtModule(name2)) {
-        await installModule(name2, defu(nuxt.options[key], options2));
-      } else {
-        nuxt.options[key] = defu(nuxt.options[key], options2);
-      }
-    }
-    await registerModule("@nuxt/icon", "icon", {
-      cssLayer: "base"
-    });
-    if (options.fonts) {
-      await registerModule("@nuxt/fonts", "fonts", {
-        defaults: {
-          weights: [400, 500, 600, 700]
-        }
-      });
-    }
-    if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", "colorMode", {
-        classSuffix: "",
-        disableTransition: true
-      });
-    }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
-    if (hasNuxtModule("@nuxtjs/mdc") || options.mdc || (hasNuxtModule("@nuxt/content") || options.content)) {
-      nuxt.options.mdc = defu(nuxt.options.mdc, {
-        highlight: {
-          theme: {
-            light: "material-theme-lighter",
-            default: "material-theme",
-            dark: "material-theme-palenight"
-          }
-        },
-        components: {
-          map: {
-            "accordion": "ProseAccordion",
-            "accordion-item": "ProseAccordionItem",
-            "badge": "ProseBadge",
-            "callout": "ProseCallout",
-            "card": "ProseCard",
-            "card-group": "ProseCardGroup",
-            "caution": "ProseCaution",
-            "code-collapse": "ProseCodeCollapse",
-            "code-group": "ProseCodeGroup",
-            "code-icon": "ProseCodeIcon",
-            "code-preview": "ProseCodePreview",
-            "code-tree": "ProseCodeTree",
-            "collapsible": "ProseCollapsible",
-            "field": "ProseField",
-            "field-group": "ProseFieldGroup",
-            "icon": "ProseIcon",
-            "kbd": "ProseKbd",
-            "note": "ProseNote",
-            "steps": "ProseSteps",
-            "tabs": "ProseTabs",
-            "tabs-item": "ProseTabsItem",
-            "tip": "ProseTip",
-            "warning": "ProseWarning"
-          }
-        }
-      });
+    if (options.prose || options.mdc || options.content || hasNuxtModule("@nuxtjs/mdc") || hasNuxtModule("@nuxt/content")) {
       addComponentsDir({
         path: resolve("./runtime/components/prose"),
         pathPrefix: false,
@@ -109,14 +117,14 @@ const module$1 = defineNuxtModule({
         global: true
       });
     }
-    if (hasNuxtModule("@nuxt/content") || options.content) {
+    if (options.content || hasNuxtModule("@nuxt/content")) {
       addComponentsDir({
         path: resolve("./runtime/components/content"),
         pathPrefix: false,
         prefix: options.prefix
       });
     }
-    if (hasNuxtModule("@nuxtjs/color-mode")) {
+    if (options.colorMode || hasNuxtModule("@nuxtjs/color-mode")) {
       addComponentsDir({
         path: resolve("./runtime/components/color-mode"),
         pathPrefix: false,
@@ -131,7 +139,11 @@ const module$1 = defineNuxtModule({
       prefix: options.prefix,
       ignore: ["color-mode/**", "content/**", "prose/**"]
     });
-    addImportsDir(resolve("./runtime/composables"));
+    addImports(
+      Object.entries(publicComposables).flatMap(
+        ([file, exports$1]) => exports$1.map((name2) => ({ name: name2, from: resolve(`./runtime/composables/${file}`) }))
+      )
+    );
     addTemplates(options, nuxt, resolve);
   }
 });

package/dist/runtime/components/Avatar.vue

@@ -39,17 +39,15 @@ const { size } = useAvatarGroup(props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.avatar || {} })({
   size: size.value
 }));
-const sizePx = computed(() => ({
-  "3xs": 16,
-  "2xs": 20,
-  "xs": 24,
-  "sm": 28,
-  "md": 32,
-  "lg": 36,
-  "xl": 40,
-  "2xl": 44,
-  "3xl": 48
-})[props.size || "md"]);
+const rootClass = computed(() => ui.value.root({ class: [uiProp.value?.root, props.class] }));
+const sizePx = computed(() => {
+  const sizeClass = rootClass.value.split(" ").find((c) => /^size-\d+$/.test(c));
+  if (sizeClass) {
+    const num = Number.parseFloat(sizeClass.split("-")[1] ?? "");
+    if (!Number.isNaN(num)) return num * 4;
+  }
+  return null;
+});
 const error = ref(false);
 watch(() => props.src, () => {
   if (error.value) {
@@ -67,7 +65,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="rootClass"
     :style="props.style"
   >
     <component

package/dist/runtime/components/Banner.vue

@@ -101,7 +101,7 @@ function onClose() {
       tabindex="-1"
       raw
     >
-      <span class="absolute inset-0 " aria-hidden="true" />
+      <span class="absolute inset-0" aria-hidden="true" />
     </ULink>
 
     <UContainer data-slot="container" :class="ui.container({ class: uiProp?.container })">

package/dist/runtime/components/BlogPost.vue

@@ -5,9 +5,10 @@ import theme from "#build/ui/blog-post";
 <script setup>
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
-import { useLocale, useAppConfig } from "#imports";
-import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
 import { useComponentUI } from "../composables/useComponentUI";
+import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";

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

@@ -86,8 +86,8 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     class?: any;
     ui?: Calendar['slots'];
 }
-export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
-    'update:modelValue': [date: CalendarModelValue<R, M>];
+export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [value: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
@@ -102,7 +102,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & {
-        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
         "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
@@ -112,7 +112,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -86,8 +86,8 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     class?: any;
     ui?: Calendar['slots'];
 }
-export interface CalendarEmits<R extends boolean, M extends boolean> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
-    'update:modelValue': [date: CalendarModelValue<R, M>];
+export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
+    'update:modelValue': [value: CalendarModelValue<R, M>];
 }
 export interface CalendarSlots {
     'heading'?: (props: {
@@ -102,7 +102,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & {
-        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: CalendarModelValue<R, M>) => any) | undefined;
         "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
         "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
         "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
@@ -112,7 +112,7 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CalendarSlots;
-    emit: ((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
+    emit: ((evt: "update:modelValue", value: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/ChangelogVersion.vue

@@ -6,9 +6,10 @@ import theme from "#build/ui/changelog-version";
 import { computed } from "vue";
 import { Primitive, useDateFormatter } from "reka-ui";
 import { createReusableTemplate } from "@vueuse/core";
-import { useLocale, useAppConfig } from "#imports";
-import ImageComponent from "#build/ui-image-component";
+import { useAppConfig } from "#imports";
+import { useLocale } from "../composables/useLocale";
 import { useComponentUI } from "../composables/useComponentUI";
+import ImageComponent from "#build/ui-image-component";
 import { getSlotChildrenText } from "../utils";
 import { tv } from "../utils/tv";
 import ULink from "./Link.vue";

package/dist/runtime/components/ChangelogVersions.vue

@@ -28,7 +28,7 @@ const springOptions = computed(() => defu(typeof props.indicatorMotion === "obje
 const scrollOptions = computed(() => typeof props.indicator === "object" ? props.indicator : {});
 const { scrollYProgress } = useScroll(scrollOptions.value);
 const y = useSpring(scrollYProgress, springOptions);
-const height = useTransform(() => `${y.get() * 100}%`);
+const height = useTransform(() => `${Number(y.get()) * 100}%`);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersions || {} })());
 </script>
 

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage } from 'ai';
+import type { UIMessage, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
@@ -53,6 +53,9 @@ export interface ChatMessageSlots {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
+    files?(props: {
+        parts: FileUIPart[];
+    }): VNode[];
     content?(props: ChatMessageProps): VNode[];
     actions?(props: {
         actions: ChatMessageProps['actions'];

package/dist/runtime/components/ChatMessage.vue

@@ -32,6 +32,7 @@ const props = defineProps({
 const slots = defineSlots();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatMessage", props);
+const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -43,6 +44,10 @@ 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" />
+    </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">

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

@@ -1,6 +1,6 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage } from 'ai';
+import type { UIMessage, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
@@ -53,6 +53,9 @@ export interface ChatMessageSlots {
         avatar: ChatMessageProps['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
+    files?(props: {
+        parts: FileUIPart[];
+    }): VNode[];
     content?(props: ChatMessageProps): VNode[];
     actions?(props: {
         actions: ChatMessageProps['actions'];

package/dist/runtime/components/ChatMessages.vue

@@ -29,6 +29,12 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
+const showIndicator = computed(() => {
+  if (props.status === "submitted") return true;
+  if (props.status !== "streaming") return false;
+  const lastMessage = props.messages?.[props.messages.length - 1];
+  return lastMessage?.role === "assistant" && !lastMessage.parts?.length;
+});
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
@@ -67,6 +73,13 @@ function scrollToBottom(smooth = true) {
   }
 }
 watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
+  if (!props.messages?.length) {
+    showAutoScroll.value = false;
+    userScrolledUp.value = false;
+    lastScrollTop.value = 0;
+    messagesRefs.value.clear();
+    return;
+  }
   if (status !== "streaming") {
     return;
   }
@@ -197,7 +210,7 @@ onMounted(() => {
     </slot>
 
     <UChatMessage
-      v-if="status === 'submitted'"
+      v-if="showIndicator"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

package/dist/runtime/components/ChatPrompt.vue

@@ -8,6 +8,7 @@ import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { useIMEGuard } from "../composables/useIMEGuard";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -54,6 +55,9 @@ function blur(e) {
   textareaRef.value?.textareaRef?.blur();
   emits("close", e);
 }
+const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
+  submit(event);
+});
 defineExpose({
   textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
@@ -76,7 +80,8 @@ defineExpose({
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
       :class="ui.body({ class: uiProp?.body })"
-      @keydown.enter.exact.prevent="submit"
+      @keydown.enter.exact="onEnter"
+      @compositionend="onCompositionEnd"
       @keydown.esc="blur"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">

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

@@ -0,0 +1,78 @@
+import type { CollapsibleRootProps } from 'reka-ui';
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-reasoning';
+import type { IconProps } from '../types';
+import type { ChatShimmerProps } from './ChatShimmer.vue';
+import type { ComponentConfig } from '../types/tv';
+type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
+export interface ChatReasoningProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The reasoning text content to display.
+     */
+    text?: string;
+    /**
+     * Whether the reasoning content is currently streaming.
+     * @defaultValue false
+     */
+    streaming?: boolean;
+    /**
+     * The duration in seconds that the AI spent reasoning.
+     * If not provided, it will be calculated automatically based on streaming time.
+     */
+    duration?: number;
+    /**
+     * The icon displayed next to the trigger.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The position of the chevron icon.
+     * @defaultValue 'trailing'
+     */
+    chevron?: 'leading' | 'trailing';
+    /**
+     * The icon displayed as the chevron.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    chevronIcon?: IconProps['name'];
+    /**
+     * The delay in milliseconds before auto-closing when streaming ends.
+     * Set to `0` to disable auto-close.
+     * @defaultValue 500
+     */
+    autoCloseDelay?: number;
+    /**
+     * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
+     */
+    shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    class?: any;
+    ui?: ChatReasoning['slots'];
+}
+export interface ChatReasoningEmits {
+    'update:open': [value: boolean];
+}
+export interface ChatReasoningSlots {
+    default?(props: {
+        open: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatReasoningProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChatReasoningProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    streaming: boolean;
+    unmountOnHide: boolean;
+    chevron: "leading" | "trailing";
+    autoCloseDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};