@nuxt/ui 4.8.2 → 4.10.0

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

@@ -8,7 +8,9 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
@@ -124,7 +126,7 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
     slots: CarouselSlots<T>;
     emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Carousel.vue

@@ -68,7 +68,7 @@ const stopAutoScrollOnInteraction = computed(() => {
   }
   return props.autoScroll?.stopOnInteraction ?? true;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.carousel || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.carousel || {} })({
   orientation: props.orientation
 }));
 const options = computed(() => ({
@@ -106,10 +106,7 @@ async function loadPlugins() {
   }
   plugins.value = emblaPlugins;
 }
-watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], async () => {
-  await loadPlugins();
-  emblaApi.value?.reInit(options.value, plugins.value);
-}, { immediate: true });
+watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true });
 const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
 watch(options, () => {
   emblaApi.value?.reInit(options.value, plugins.value);

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

@@ -8,7 +8,9 @@ import type { ClassNamesOptionsType } from 'embla-carousel-class-names';
 import type { FadeOptionsType } from 'embla-carousel-fade';
 import type { WheelGesturesPluginOptions } from 'embla-carousel-wheel-gestures';
 import theme from '#build/ui/carousel';
-import type { ButtonProps, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { AcceptableValue } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Carousel = ComponentConfig<typeof theme, AppConfig, 'carousel'>;
@@ -124,7 +126,7 @@ declare const __VLS_export: <T extends CarouselItem>(__VLS_props: NonNullable<Aw
     slots: CarouselSlots<T>;
     emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
@@ -34,7 +36,7 @@ export interface ChangelogVersionProps {
     indicator?: boolean;
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: ChangelogVersion['slots'];
 }

package/dist/runtime/components/ChangelogVersion.vue

@@ -47,7 +47,7 @@ const [DefineDateTemplate, ReuseDateTemplate] = createReusableTemplate({
     }
   }
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVersion || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.changelogVersion || {} })({
   to: !!props.to || !!props.onClick
 }));
 const date = computed(() => {
@@ -55,7 +55,7 @@ const date = computed(() => {
     return;
   }
   try {
-    return formatter.custom(new Date(props.date), { dateStyle: "medium" });
+    return formatter.custom(new Date(props.date), { dateStyle: "medium", timeZone: "UTC" });
   } catch {
     return props.date;
   }
@@ -81,7 +81,7 @@ const ariaLabel = computed(() => {
     <ULink
       v-if="props.to"
       :aria-label="ariaLabel"
-      v-bind="{ to: props.to, target: props.target, ...$attrs }"
+      v-bind="{ 'to': props.to, 'target': props.target, ...$attrs, 'data-slot': void 0 }"
       :class="prefix('focus:outline-none peer')"
       raw
     >
@@ -97,7 +97,7 @@ const ariaLabel = computed(() => {
     </time>
   </DefineDateTemplate>
 
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
+  <Primitive :as="props.as" v-bind="!props.to ? $attrs : {}" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="props.onClick">
     <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />

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

@@ -1,7 +1,9 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/changelog-version';
-import type { BadgeProps, LinkProps, UserProps } from '../types';
+import type { BadgeProps } from './Badge.vue';
+import type { LinkProps } from './Link.vue';
+import type { UserProps } from './User.vue';
 import type { ImgHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersion = ComponentConfig<typeof theme, AppConfig, 'changelogVersion'>;
@@ -34,7 +36,7 @@ export interface ChangelogVersionProps {
     indicator?: boolean;
     to?: LinkProps['to'];
     target?: LinkProps['target'];
-    onClick?: (event: MouseEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
     class?: any;
     ui?: ChangelogVersion['slots'];
 }

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
-import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types';
+import type { ChangelogVersionProps, ChangelogVersionSlots } from './ChangelogVersion.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
 export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends ChangelogVersionProps>(__VLS_props: NonNu
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChangelogVersions.vue

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

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

@@ -2,7 +2,7 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions, UseScrollOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
-import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types';
+import type { ChangelogVersionProps, ChangelogVersionSlots } from './ChangelogVersion.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
 export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
@@ -49,7 +49,7 @@ declare const __VLS_export: <T extends ChangelogVersionProps>(__VLS_props: NonNu
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
-import type { AvatarProps, ButtonProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
 export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
@@ -80,7 +82,7 @@ declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools e
     slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatMessage.vue

@@ -36,7 +36,7 @@ const appConfig = useAppConfig();
 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", "color", "side", "actions", "compact", "class", "ui", "content"]));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
   color: props.color,
   side: props.side,

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

@@ -2,7 +2,9 @@ import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
-import type { AvatarProps, ButtonProps, IconProps } from '../types';
+import type { AvatarProps } from './Avatar.vue';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
 export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
@@ -80,7 +82,7 @@ declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools e
     slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

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

@@ -1,8 +1,11 @@
-import type { VNode } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -57,7 +60,9 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
     ui?: ChatMessages['slots'];
 }
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-    default?(props?: {}): VNode[];
+    default?(props: {
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
     }): VNode[];
@@ -76,12 +81,14 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessagesProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }>) => void;
     attrs: any;
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatMessages.vue

@@ -30,16 +30,16 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatMessages", _props);
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
-const showIndicator = computed(() => {
+function showIndicator() {
   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 userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "naked" }));
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatMessages || {} })({
   compact: props.compact
 }));
 const el = ref(null);
@@ -183,6 +183,9 @@ onMounted(() => {
     }, { childList: true, subtree: true });
   }
 });
+defineExpose({
+  registerMessageRef
+});
 </script>
 
 <template>
@@ -193,7 +196,7 @@ onMounted(() => {
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
-    <slot>
+    <slot :register-message-ref="registerMessageRef">
       <template v-for="message in props.messages" :key="message.id">
         <UChatMessage
           v-if="message.parts?.length"
@@ -209,7 +212,7 @@ onMounted(() => {
     </slot>
 
     <UChatMessage
-      v-if="showIndicator"
+      v-if="showIndicator()"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

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

@@ -1,8 +1,11 @@
-import type { VNode } from 'vue';
+import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -57,7 +60,9 @@ export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
     ui?: ChatMessages['slots'];
 }
 export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
-    default?(props?: {}): VNode[];
+    default?(props: {
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
     }): VNode[];
@@ -76,12 +81,14 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessagesProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
-    expose: (exposed: {}) => void;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        registerMessageRef: (id: string, element: ComponentPublicInstance | null) => void;
+    }>) => void;
     attrs: any;
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatPalette.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatPalette", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPalette || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPrompt.vue

@@ -18,6 +18,7 @@ defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
+  color: { type: null, required: false },
   variant: { type: null, required: false },
   submitOnEnter: { type: Boolean, required: false, default: true },
   error: { type: Error, required: false },
@@ -42,8 +43,9 @@ const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading", "loadingIcon"));
-const getProxySlots = () => omit(slots, ["header", "footer"]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+const getProxySlots = () => omit(slots, ["header", "footer", "body"]);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPrompt || {} })({
+  color: props.color,
   variant: props.variant
 }));
 const textareaRef = useTemplateRef("textareaRef");
@@ -51,11 +53,11 @@ function submit(e) {
   if (model.value.trim() === "") {
     return;
   }
-  emits("submit", e);
+  emits("submit", e ?? new Event("submit"));
 }
 function blur(e) {
   textareaRef.value?.textareaRef?.blur();
-  emits("close", e);
+  emits("close", e ?? new Event("close"));
 }
 const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
   submit(event);
@@ -68,36 +70,51 @@ function handleEnter(event) {
   }
   onEnter(event);
 }
+function onKeydown(event) {
+  if (event.key === "Enter") {
+    handleEnter(event);
+  } else if (event.key === "Escape") {
+    blur(event);
+  }
+}
 defineExpose({
   textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+  <Primitive :as="props.as" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
     <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
-    <UTextarea
-      ref="textareaRef"
-      v-model="model"
+    <slot
+      name="body"
+      :submit="submit"
+      :close="blur"
       :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
       :disabled="Boolean(props.error) || props.disabled"
-      variant="none"
-      fixed
-      v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
-      data-slot="body"
-      :class="ui.body({ class: props.ui?.body })"
-      @keydown.enter="handleEnter"
-      @compositionend="onCompositionEnd"
-      @keydown.esc="blur"
+      :ui="ui"
     >
-      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </UTextarea>
+      <UTextarea
+        ref="textareaRef"
+        v-model="model"
+        :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
+        :disabled="Boolean(props.error) || props.disabled"
+        variant="none"
+        fixed
+        v-bind="{ ...textareaProps, ...$attrs }"
+        :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+        data-slot="body"
+        :class="ui.body({ class: props.ui?.body })"
+        @keydown="onKeydown"
+        @compositionend="onCompositionEnd"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </UTextarea>
+    </slot>
 
     <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,17 +1,19 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ButtonSlots } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
-     * The icon displayed in the button when the status is `ready`.
+     * The icon displayed in the button when the status is `ready`. Set to `false` to hide the icon.
      * @defaultValue appConfig.ui.icons.arrowUp
      * @IconifyIcon
      */
-    icon?: IconProps['name'];
+    icon?: IconProps['name'] | false;
     /**
      * The color of the button when the status is `ready`.
      * @defaultValue 'primary'
@@ -87,11 +89,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -15,7 +15,7 @@ import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   status: { type: String, required: false, default: "ready" },
-  icon: { type: null, required: false },
+  icon: { type: [String, Boolean], required: false, skipCheck: true },
   color: { type: null, required: false },
   variant: { type: null, required: false },
   streamingIcon: { type: null, required: false },
@@ -59,7 +59,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "varian
 const disabled = computed(() => props.status === "ready" ? props.disabled : false);
 const statusButtonProps = computed(() => ({
   ready: {
-    icon: props.icon || appConfig.ui.icons.arrowUp,
+    icon: props.icon === false ? void 0 : props.icon ?? appConfig.ui.icons.arrowUp,
     color: props.color,
     variant: props.variant,
     type: "submit"
@@ -89,7 +89,7 @@ const statusButtonProps = computed(() => ({
     }
   }
 })[props.status]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPromptSubmit || {} })());
 </script>
 
 <template>