@nuxt/ui 4.0.1 → 4.2.0

package/dist/runtime/components/ChangelogVersions.vue

@@ -30,14 +30,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVers
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!props.indicator || !!slots.indicator" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
       <slot name="indicator">
-        <Motion v-if="!!props.indicatorMotion" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
+        <Motion v-if="!!props.indicatorMotion" data-slot="beam" :class="ui.beam({ class: props.ui?.beam })" :style="{ height }" />
       </slot>
     </div>
 
-    <div v-if="versions?.length || !!slots.default" :class="ui.container({ class: props.ui?.container })">
+    <div v-if="versions?.length || !!slots.default" data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <slot>
         <UChangelogVersion
           v-for="(version, index) in versions"
@@ -45,8 +45,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.changelogVers
           :indicator="!!props.indicator"
           v-bind="version"
         >
-          <template v-for="(_, name) in getProxySlots()" #[name]>
-            <slot :name="name" v-bind="{ version }" />
+          <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" :version="version" />
           </template>
         </UChangelogVersion>
       </slot>

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { SpringOptions } from 'motion-v';
 import theme from '#build/ui/changelog-versions';
-import type { ChangelogVersionProps } from '../types';
+import type { ChangelogVersionProps, ChangelogVersionSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChangelogVersions = ComponentConfig<typeof theme, AppConfig, 'changelogVersions'>;
 export interface ChangelogVersionsProps<T extends ChangelogVersionProps = ChangelogVersionProps> {
@@ -26,43 +26,15 @@ export interface ChangelogVersionsProps<T extends ChangelogVersionProps = Change
     class?: any;
     ui?: ChangelogVersions['slots'];
 }
-export interface ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> {
+type ExtendSlotWithVersion<T extends ChangelogVersionProps, K extends keyof ChangelogVersionSlots> = ChangelogVersionSlots[K] extends (props: infer P) => any ? (props: P & {
+    version: T;
+}) => any : ChangelogVersionSlots[K];
+export type ChangelogVersionsSlots<T extends ChangelogVersionProps = ChangelogVersionProps> = {
+    [K in keyof ChangelogVersionSlots]: ExtendSlotWithVersion<T, K>;
+} & {
     default(props?: {}): any;
     indicator(props?: {}): any;
-    header(props: {
-        version: T;
-    }): any;
-    badge(props: {
-        version: T;
-    }): any;
-    date(props: {
-        version: T;
-    }): any;
-    title(props: {
-        version: T;
-    }): any;
-    description(props: {
-        version: T;
-    }): any;
-    image(props: {
-        version: T;
-    }): any;
-    body(props: {
-        version: T;
-    }): any;
-    footer(props: {
-        version: T;
-    }): any;
-    authors(props: {
-        version: T;
-    }): any;
-    actions(props: {
-        version: T;
-    }): any;
-    indicator(props: {
-        version: T;
-    }): any;
-}
+};
 declare const __VLS_export: <T extends ChangelogVersionProps>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<ChangelogVersionsProps<T>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;

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

@@ -50,6 +50,7 @@ export interface ChatMessageProps extends UIMessage {
 export interface ChatMessageSlots {
     leading(props: {
         avatar: ChatMessageProps['avatar'];
+        ui: ChatMessage['ui'];
     }): any;
     content(props: ChatMessageProps): any;
     actions(props: {

package/dist/runtime/components/ChatMessage.vue

@@ -40,16 +40,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.container({ class: props.ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :avatar="avatar">
-          <UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :avatar="avatar" :ui="ui">
+          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || parts.length || !!slots.content" :class="ui.content({ class: props.ui?.content })">
+      <div v-if="content || parts.length || !!slots.content" data-slot="content" :class="ui.content({ class: props.ui?.content })">
         <slot
           :id="id"
           name="content"
@@ -70,7 +70,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" :class="ui.actions({ class: props.ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
         <slot name="actions" :actions="actions">
           <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <UButton

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

@@ -50,6 +50,7 @@ export interface ChatMessageProps extends UIMessage {
 export interface ChatMessageSlots {
     leading(props: {
         avatar: ChatMessageProps['avatar'];
+        ui: ChatMessage['ui'];
     }): any;
     content(props: ChatMessageProps): any;
     actions(props: {

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, IconProps } from '../types';
+import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 export interface ChatMessagesProps {
@@ -33,12 +33,12 @@ export interface ChatMessagesProps {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
     /**
      * The `assistant` messages props.
      * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
      */
-    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
     /**
      * Render the messages in a compact style.
      * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
@@ -53,22 +53,21 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-export interface ChatMessagesSlots {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+    message: UIMessage;
+}) => any : ChatMessageSlots[K];
+export type ChatMessagesSlots = {
+    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+} & {
     default(props?: {}): any;
-    indicator(props?: {}): any;
+    indicator(props: {
+        ui: ChatMessages['ui'];
+    }): any;
     viewport(props: {
+        ui: ChatMessages['ui'];
         onClick: () => void;
     }): any;
-    content(props: {
-        message: UIMessage;
-    }): any;
-    leading(props: {
-        message: UIMessage;
-    }): any;
-    actions(props: {
-        message: UIMessage;
-    }): any;
-}
+};
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
     autoScroll: boolean | Partial<ButtonProps>;
     shouldAutoScroll: boolean;

package/dist/runtime/components/ChatMessages.vue

@@ -40,6 +40,8 @@ const messagesRefs = ref(/* @__PURE__ */ new Map());
 const showAutoScroll = ref(false);
 const lastMessageHeight = ref(0);
 const lastMessageSubmitted = ref(false);
+const lastScrollTop = ref(0);
+const userScrolledUp = ref(false);
 function registerMessageRef(id, element) {
   const elInstance = element?.$el;
   if (elInstance) {
@@ -66,12 +68,17 @@ watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
   if (status !== "streaming") {
     return;
   }
-  if (props.shouldAutoScroll) {
-    requestAnimationFrame(() => nextTick(scrollToBottom));
-  } else {
+  if (!props.shouldAutoScroll) {
     checkScrollPosition();
+    return;
   }
-}, { deep: true, throttle: 100, leading: true });
+  nextTick(() => {
+    if (!parent.value || userScrolledUp.value) return;
+    if (parent.value.scrollHeight - parent.value.scrollTop - parent.value.clientHeight < 150) {
+      scrollToBottom(false);
+    }
+  });
+}, { deep: true, throttle: 50, leading: true });
 watch(() => props.status, (status) => {
   if (status !== "submitted") {
     return;
@@ -80,6 +87,7 @@ watch(() => props.status, (status) => {
   if (!lastMessage || lastMessage.role !== "user") {
     return;
   }
+  userScrolledUp.value = false;
   nextTick(() => {
     lastMessageSubmitted.value = true;
     updateLastMessageHeight();
@@ -96,8 +104,15 @@ function checkScrollPosition() {
   const scrollHeight = parent.value.scrollHeight;
   const threshold = 100;
   showAutoScroll.value = scrollHeight - scrollPosition >= threshold;
+  if (parent.value.scrollTop < lastScrollTop.value) {
+    userScrolledUp.value = true;
+  } else if (scrollHeight - scrollPosition < threshold) {
+    userScrolledUp.value = false;
+  }
+  lastScrollTop.value = parent.value.scrollTop;
 }
 function onAutoScrollClick() {
+  userScrolledUp.value = false;
   scrollToBottom();
 }
 function getScrollParent(node) {
@@ -141,6 +156,7 @@ onMounted(() => {
   if (!parent.value) {
     return;
   }
+  lastScrollTop.value = parent.value.scrollTop;
   setTimeout(() => {
     if (props.shouldScrollToBottom) {
       scrollToBottom(false);
@@ -157,6 +173,7 @@ onMounted(() => {
   <div
     ref="el"
     :data-status="status"
+    data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
@@ -168,8 +185,8 @@ onMounted(() => {
         :ref="(el) => registerMessageRef(message.id, el)"
         :compact="compact"
       >
-        <template v-for="(_, name) in getProxySlots()" #[name]>
-          <slot :name="name" v-bind="{ message }" />
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" :message="message" />
         </template>
       </UChatMessage>
     </slot>
@@ -182,8 +199,8 @@ onMounted(() => {
       :compact="compact"
     >
       <template #content>
-        <slot name="indicator">
-          <div :class="ui.indicator({ class: props.ui?.indicator })">
+        <slot name="indicator" :ui="ui">
+          <div data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
@@ -193,14 +210,15 @@ onMounted(() => {
     </UChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
-        <slot name="viewport" :on-click="onAutoScrollClick">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
+        <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
             v-if="autoScroll"
             :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
             color="neutral"
             variant="outline"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            data-slot="autoScroll"
             :class="ui.autoScroll({ class: props.ui?.autoScroll })"
             @click="onAutoScrollClick"
           />

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, IconProps } from '../types';
+import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 export interface ChatMessagesProps {
@@ -33,12 +33,12 @@ export interface ChatMessagesProps {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
     /**
      * The `assistant` messages props.
      * `{ side: 'left', variant: 'naked' }`{lang="ts-type"}
      */
-    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions'>;
+    assistant?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
     /**
      * Render the messages in a compact style.
      * This is done automatically when used inside a `UChatPalette`{lang="ts-type"}.
@@ -53,22 +53,21 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-export interface ChatMessagesSlots {
+type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = ChatMessageSlots[K] extends (props: infer P) => any ? (props: P & {
+    message: UIMessage;
+}) => any : ChatMessageSlots[K];
+export type ChatMessagesSlots = {
+    [K in keyof ChatMessageSlots]: ExtendSlotWithVersion<K>;
+} & {
     default(props?: {}): any;
-    indicator(props?: {}): any;
+    indicator(props: {
+        ui: ChatMessages['ui'];
+    }): any;
     viewport(props: {
+        ui: ChatMessages['ui'];
         onClick: () => void;
     }): any;
-    content(props: {
-        message: UIMessage;
-    }): any;
-    leading(props: {
-        message: UIMessage;
-    }): any;
-    actions(props: {
-        message: UIMessage;
-    }): any;
-}
+};
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
     autoScroll: boolean | Partial<ButtonProps>;
     shouldAutoScroll: boolean;

package/dist/runtime/components/ChatPalette.vue

@@ -18,14 +18,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette |
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <div :class="ui.content({ class: props.ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div data-slot="content" :class="ui.content({ class: props.ui?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" :class="ui.prompt({ class: props.ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="ui.prompt({ class: props.ui?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
-export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'form'
@@ -14,9 +14,6 @@ export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps,
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
-    autofocus?: TextareaProps['autofocus'];
-    autoresize?: TextareaProps['autoresize'];
-    rows?: TextareaProps['rows'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,7 +33,7 @@ export interface ChatPromptSlots extends TextareaSlots {
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: HTMLTextAreaElement | null | undefined;
+    textareaRef: Readonly<import("vue").Ref<HTMLTextAreaElement | null | undefined, HTMLTextAreaElement | null | undefined>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (event: Event) => any;
     submit: (event: Event) => any;
@@ -48,9 +45,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onSubmit?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    rows: number;
     as: any;
     autofocus: boolean;
-    rows: number;
     autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/ChatPrompt.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/chat-prompt";
 </script>
 
 <script setup>
-import { computed, useTemplateRef } from "vue";
+import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -15,24 +15,33 @@ defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
-  autofocus: { type: Boolean, required: false, default: true },
-  autoresize: { type: Boolean, required: false, default: true },
-  rows: { type: Number, required: false, default: 1 },
   variant: { type: null, required: false },
   error: { type: Error, required: false },
   class: { type: null, required: false },
-  ui: { type: void 0, required: false }
+  ui: { type: void 0, required: false },
+  rows: { type: Number, required: false, default: 1 },
+  autofocus: { type: Boolean, required: false, default: true },
+  autofocusDelay: { type: Number, required: false },
+  autoresize: { type: Boolean, required: false, default: true },
+  autoresizeDelay: { type: Number, required: false },
+  maxrows: { type: Number, required: false },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: [String, Object], required: false },
+  disabled: { type: Boolean, required: false }
 });
 const emits = defineEmits(["submit", "close"]);
 const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
+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 || {} })({
   variant: props.variant
 }));
+const textareaRef = useTemplateRef("textareaRef");
 function submit(e) {
   if (model.value.trim() === "") {
     return;
@@ -40,29 +49,29 @@ function submit(e) {
   emits("submit", e);
 }
 function blur(e) {
-  textarea.value?.textareaRef?.blur();
+  textareaRef.value?.textareaRef?.blur();
   emits("close", e);
 }
-const textarea = useTemplateRef("textarea");
 defineExpose({
-  textareaRef: textarea.value?.textareaRef
+  textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
+  <Primitive :as="as" 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="textarea"
+      ref="textareaRef"
       v-model="model"
       :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error)"
+      :disabled="Boolean(error) || disabled"
       variant="none"
       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.exact.prevent="submit"
       @keydown.esc="blur"
@@ -72,7 +81,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -3,7 +3,7 @@ import theme from '#build/ui/chat-prompt';
 import type { TextareaProps, TextareaSlots } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
-export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'form'
@@ -14,9 +14,6 @@ export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps,
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
-    autofocus?: TextareaProps['autofocus'];
-    autoresize?: TextareaProps['autoresize'];
-    rows?: TextareaProps['rows'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,7 +33,7 @@ export interface ChatPromptSlots extends TextareaSlots {
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: HTMLTextAreaElement | null | undefined;
+    textareaRef: Readonly<import("vue").Ref<HTMLTextAreaElement | null | undefined, HTMLTextAreaElement | null | undefined>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (event: Event) => any;
     submit: (event: Event) => any;
@@ -48,9 +45,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onSubmit?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    rows: number;
     as: any;
     autofocus: boolean;
-    rows: number;
     autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 declare const _default: typeof __VLS_export;

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

@@ -4,7 +4,7 @@ import theme from '#build/ui/chat-prompt-submit';
 import type { ButtonProps, ButtonSlots, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
-export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+export interface ChatPromptSubmitProps extends Omit<ButtonProps, 'icon' | 'color' | 'variant'> {
     status?: ChatStatus;
     /**
      * The icon displayed in the button when the status is `ready`.
@@ -85,11 +85,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: (() => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorColor: "error" | "info" | "primary" | "secondary" | "success" | "warning" | "neutral";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;