@nuxt/ui 4.0.1 → 4.1.0

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

@@ -43,7 +43,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
   <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">
+        <slot name="leading" :avatar="avatar" :ui="ui">
           <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 })" />
         </slot>

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);
@@ -168,8 +184,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,7 +198,7 @@ onMounted(() => {
       :compact="compact"
     >
       <template #content>
-        <slot name="indicator">
+        <slot name="indicator" :ui="ui">
           <div :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
@@ -194,7 +210,7 @@ onMounted(() => {
 
     <Presence :present="showAutoScroll">
       <div :data-state="showAutoScroll ? 'open' : 'closed'" :class="ui.viewport({ class: props.ui?.viewport })">
-        <slot name="viewport" :on-click="onAutoScrollClick">
+        <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
             v-if="autoScroll"
             :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"

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/CommandPalette.d.vue.ts

@@ -11,6 +11,7 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
     prefix?: string;
     label?: string;
     suffix?: string;
+    description?: string;
     /**
      * @IconifyIcon
      */
@@ -27,9 +28,9 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     placeholder?: string;
     children?: CommandPaletteItem[];
-    onSelect?(e?: Event): void;
+    onSelect?: (e: Event) => void;
     class?: any;
-    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
+    ui?: Pick<CommandPalette['slots'], 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemWrapper' | 'itemLabel' | 'itemDescription' | 'itemLabelPrefix' | 'itemLabelBase' | 'itemLabelSuffix' | 'itemTrailing' | 'itemTrailingKbds' | 'itemTrailingKbdsSize' | 'itemTrailingHighlightedIcon' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
 export interface CommandPaletteGroup<T extends CommandPaletteItem = CommandPaletteItem> {
@@ -63,6 +64,12 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @IconifyIcon
      */
     icon?: IconProps['name'];
+    /**
+     * The icon displayed on the right side of the input.
+     * @defaultValue appConfig.ui.icons.search
+     * @IconifyIcon
+     */
+    trailingIcon?: IconProps['name'];
     /**
      * The icon displayed when an item is selected.
      * @defaultValue appConfig.ui.icons.check
@@ -74,7 +81,7 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue appConfig.ui.icons.chevronRight
      * @IconifyIcon
      */
-    trailingIcon?: IconProps['name'];
+    childrenIcon?: IconProps['name'];
     /**
      * The placeholder text for the input.
      * @defaultValue t('commandPalette.placeholder')
@@ -124,11 +131,39 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
       }
      */
     fuse?: UseFuseOptions<T>;
+    /**
+     * Enable virtualization for large lists.
+     * Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).
+     * @defaultValue false
+     */
+    virtualize?: boolean | {
+        /**
+         * Number of items rendered outside the visible area
+         * @defaultValue 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @defaultValue 32
+         */
+        estimateSize?: number;
+    };
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
     labelKey?: GetItemKeys<T>;
+    /**
+     * The key used to get the description from the item.
+     * @defaultValue 'description'
+     */
+    descriptionKey?: GetItemKeys<T>;
+    /**
+     * Whether to preserve the order of groups as defined in the `groups` prop when filtering.
+     * When `false`, groups will appear based on item matches.
+     * @defaultValue false
+     */
+    preserveGroupOrder?: boolean;
     class?: any;
     ui?: CommandPalette['slots'];
 }
@@ -138,29 +173,25 @@ export type CommandPaletteEmits<T extends CommandPaletteItem = CommandPaletteIte
 type SlotProps<T> = (props: {
     item: T;
     index: number;
+    ui: CommandPalette['ui'];
 }) => any;
 export type CommandPaletteSlots<G extends CommandPaletteGroup<T> = CommandPaletteGroup<any>, T extends CommandPaletteItem = CommandPaletteItem> = {
     'empty'(props: {
         searchTerm?: string;
     }): any;
     'footer'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'back'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'close'(props: {
-        ui: {
-            [K in keyof Required<CommandPalette['slots']>]: (props?: Record<string, any>) => string;
-        };
+        ui: CommandPalette['ui'];
     }): any;
     'item': SlotProps<T>;
     'item-leading': SlotProps<T>;
     'item-label': SlotProps<T>;
+    'item-description': SlotProps<T>;
     'item-trailing': SlotProps<T>;
 } & Record<string, SlotProps<G>> & Record<string, SlotProps<T>>;
 declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends CommandPaletteItem>(__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<{