@nuxt/ui 4.6.0 → 4.7.0

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

@@ -1,11 +1,11 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage, FileUIPart } from 'ai';
+import type { UIDataTypes, UIMessage, UITools, FileUIPart } from 'ai';
 import theme from '#build/ui/chat-message';
 import type { AvatarProps, ButtonProps, IconProps } from '../types';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessage = ComponentConfig<typeof theme, AppConfig, 'chatMessage'>;
-export interface ChatMessageProps extends UIMessage {
+export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> extends UIMessage<TMetadata, TDataParts, TTools> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'article'
@@ -32,7 +32,7 @@ export interface ChatMessageProps extends UIMessage {
      * `{ size: 'xs', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
      */
     actions?: (Omit<ButtonProps, 'onClick'> & {
-        onClick?: (e: MouseEvent, message: UIMessage) => void;
+        onClick?: (e: MouseEvent, message: UIMessage<TMetadata, TDataParts, TTools>) => void;
     })[];
     /**
      * Render the message in a compact style.
@@ -48,26 +48,36 @@ export interface ChatMessageProps extends UIMessage {
     class?: any;
     ui?: ChatMessage['slots'];
 }
-export interface ChatMessageSlots {
-    leading?(props: {
-        avatar: ChatMessageProps['avatar'];
+export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+    leading?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'];
         ui: ChatMessage['ui'];
     }): VNode[];
-    files?(props: {
+    files?(props: Omit<UIMessage<TMetadata, TDataParts, TTools>, 'parts'> & {
         parts: FileUIPart[];
     }): VNode[];
-    content?(props: ChatMessageProps): VNode[];
-    actions?(props: {
-        actions: ChatMessageProps['actions'];
+    content?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        content?: string;
+    }): VNode[];
+    actions?(props: UIMessage<TMetadata, TDataParts, TTools> & {
+        actions: ChatMessageProps<TMetadata, TDataParts, TTools>['actions'];
     }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
-    as: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessageSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <TMetadata, TDataParts extends UIDataTypes, TTools extends UITools>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<ChatMessageProps<TMetadata, TDataParts, TTools>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ChatMessageSlots<TMetadata, TDataParts, TTools>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,12 +1,14 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage, ChatStatus } from 'ai';
+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 { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
-export interface ChatMessagesProps {
-    messages?: UIMessage[];
+type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
+type PropsBase<T extends UIMessage[]> = MessageBase<T> extends UIMessage<infer M, infer D, infer U> ? ChatMessageProps<M, D, U> : never;
+export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
+    messages?: T;
     status?: ChatStatus;
     /**
      * Whether to automatically scroll to the bottom when a message is streaming.
@@ -34,12 +36,12 @@ export interface ChatMessagesProps {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    user?: Pick<PropsBase<T>, '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' | 'ui'>;
+    assistant?: Pick<PropsBase<T>, '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"}.
@@ -54,12 +56,7 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
-    message: UIMessage;
-}) => VNode[] : Required<ChatMessageSlots>[K];
-export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
-} & {
+export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
     default?(props?: {}): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
@@ -68,17 +65,26 @@ export type ChatMessagesSlots = {
         ui: ChatMessages['ui'];
         onClick: () => void;
     }): VNode[];
+} & {
+    [K in keyof ChatMessageSlots]?: NonNullable<ChatMessageSlots[K]> extends (props: infer P) => VNode[] ? (props: P & {
+        message: MessageBase<T>;
+    }) => VNode[] : never;
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-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 | Omit<ButtonProps, LinkPropsKeys>;
-    shouldAutoScroll: boolean;
-    shouldScrollToBottom: boolean;
-    spacingOffset: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__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<ChatMessagesProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ChatMessagesSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/ChatMessages.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/chat-messages";
 import { ref, computed, watch, nextTick, toRef, onMounted } from "vue";
 import { Presence } from "reka-ui";
 import { defu } from "defu";
-import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
+import { useElementBounding, useEventListener, useMutationObserver, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
@@ -14,7 +14,7 @@ import { tv } from "../utils/tv";
 import UChatMessage from "./ChatMessage.vue";
 import UButton from "./Button.vue";
 const props = defineProps({
-  messages: { type: Array, required: false },
+  messages: { type: null, required: false },
   status: { type: String, required: false },
   shouldAutoScroll: { type: Boolean, required: false, default: false },
   shouldScrollToBottom: { type: Boolean, required: false, default: true },
@@ -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,19 +73,17 @@ function scrollToBottom(smooth = true) {
   }
 }
 watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
-  if (status !== "streaming") {
+  if (!props.messages?.length) {
+    showAutoScroll.value = false;
+    userScrolledUp.value = false;
+    lastScrollTop.value = 0;
+    messagesRefs.value.clear();
     return;
   }
-  if (!props.shouldAutoScroll) {
-    checkScrollPosition();
+  if (status !== "streaming") {
     return;
   }
-  nextTick(() => {
-    if (!parent.value || userScrolledUp.value) return;
-    if (parent.value.scrollHeight - parent.value.scrollTop - parent.value.clientHeight < 150) {
-      scrollToBottom(false);
-    }
-  });
+  checkScrollPosition();
 }, { deep: true, throttle: 50, leading: true });
 watch(() => props.status, (status) => {
   if (status !== "submitted") {
@@ -171,6 +175,13 @@ onMounted(() => {
   }
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
+  if (el.value) {
+    useMutationObserver(el, () => {
+      if (props.shouldAutoScroll && props.status === "streaming" && !userScrolledUp.value) {
+        scrollToBottom(false);
+      }
+    }, { childList: true, subtree: true });
+  }
 });
 </script>
 
@@ -183,21 +194,22 @@ onMounted(() => {
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
-      <UChatMessage
-        v-for="message in messages"
-        :key="message.id"
-        v-bind="{ ...message.role === 'user' ? userProps : assistantProps, ...message }"
-        :ref="(el) => registerMessageRef(message.id, el)"
-        :compact="compact"
-      >
-        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-          <slot :name="name" v-bind="slotData" :message="message" />
-        </template>
-      </UChatMessage>
+      <template v-for="message in messages" :key="message.id">
+        <UChatMessage
+          v-if="message.parts?.length"
+          v-bind="{ ...message.role === 'user' ? userProps : assistantProps, ...message }"
+          :ref="(el) => registerMessageRef(message.id, el)"
+          :compact="compact"
+        >
+          <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+            <slot :name="name" v-bind="{ ...slotData, message }" />
+          </template>
+        </UChatMessage>
+      </template>
     </slot>
 
     <UChatMessage
-      v-if="status === 'submitted'"
+      v-if="showIndicator"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

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

@@ -1,12 +1,14 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
-import type { UIMessage, ChatStatus } from 'ai';
+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 { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
-export interface ChatMessagesProps {
-    messages?: UIMessage[];
+type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
+type PropsBase<T extends UIMessage[]> = MessageBase<T> extends UIMessage<infer M, infer D, infer U> ? ChatMessageProps<M, D, U> : never;
+export interface ChatMessagesProps<T extends UIMessage[] = UIMessage[]> {
+    messages?: T;
     status?: ChatStatus;
     /**
      * Whether to automatically scroll to the bottom when a message is streaming.
@@ -34,12 +36,12 @@ export interface ChatMessagesProps {
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
      */
-    user?: Pick<ChatMessageProps, 'icon' | 'avatar' | 'variant' | 'side' | 'actions' | 'ui'>;
+    user?: Pick<PropsBase<T>, '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' | 'ui'>;
+    assistant?: Pick<PropsBase<T>, '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"}.
@@ -54,12 +56,7 @@ export interface ChatMessagesProps {
     class?: any;
     ui?: ChatMessages['slots'];
 }
-type ExtendSlotWithVersion<K extends keyof ChatMessageSlots> = Required<ChatMessageSlots>[K] extends (props: infer P) => VNode[] ? (props: P & {
-    message: UIMessage;
-}) => VNode[] : Required<ChatMessageSlots>[K];
-export type ChatMessagesSlots = {
-    [K in keyof ChatMessageSlots]?: ExtendSlotWithVersion<K>;
-} & {
+export type ChatMessagesSlots<T extends UIMessage[] = UIMessage[]> = {
     default?(props?: {}): VNode[];
     indicator?(props: {
         ui: ChatMessages['ui'];
@@ -68,17 +65,26 @@ export type ChatMessagesSlots = {
         ui: ChatMessages['ui'];
         onClick: () => void;
     }): VNode[];
+} & {
+    [K in keyof ChatMessageSlots]?: NonNullable<ChatMessageSlots[K]> extends (props: infer P) => VNode[] ? (props: P & {
+        message: MessageBase<T>;
+    }) => VNode[] : never;
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-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 | Omit<ButtonProps, LinkPropsKeys>;
-    shouldAutoScroll: boolean;
-    shouldScrollToBottom: boolean;
-    spacingOffset: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
+declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__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<ChatMessagesProps<T>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: ChatMessagesSlots<T>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/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/ChatPromptSubmit.vue

@@ -55,7 +55,8 @@ const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatPromptSubmit", props);
-const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "variant", "status", "streamingIcon", "streamingColor", "streamingVariant", "submittedIcon", "submittedColor", "submittedVariant", "errorIcon", "errorColor", "errorVariant", "class", "ui"));
+const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "variant", "status", "disabled", "streamingIcon", "streamingColor", "streamingVariant", "submittedIcon", "submittedColor", "submittedVariant", "errorIcon", "errorColor", "errorVariant", "class", "ui"));
+const disabled = computed(() => props.status === "ready" ? props.disabled : false);
 const statusButtonProps = computed(() => ({
   ready: {
     icon: props.icon || appConfig.ui.icons.arrowUp,
@@ -96,6 +97,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSub
     v-bind="{
   ...buttonProps,
   ...statusButtonProps,
+  disabled,
   'aria-label': t('chatPromptSubmit.label'),
   ...$attrs
 }"

package/dist/runtime/components/Checkbox.vue

@@ -8,6 +8,7 @@ import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { useResolvedVariants } from "../composables/useResolvedVariants";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
@@ -41,6 +42,7 @@ const uiProp = useComponentUI("checkbox", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
+const { variant } = useResolvedVariants("checkbox", props, theme, ["variant"]);
 const attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
@@ -49,7 +51,7 @@ const forwardedAttrs = computed(() => {
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
   size: size.value,
   color: color.value,
-  variant: props.variant,
+  variant: variant.value,
   indicator: props.indicator,
   required: props.required,
   disabled: disabled.value
@@ -63,7 +65,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
+  <Primitive :as="variant === 'list' ? as : Label" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
       <CheckboxRoot
         :id="id"
@@ -84,7 +86,7 @@ function onUpdate(value) {
     </div>
 
     <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: uiProp?.wrapper })">
-      <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: uiProp?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>

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

@@ -179,6 +179,13 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue false
      */
     preserveGroupOrder?: boolean;
+    /**
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful when indexing large datasets where fuzzy search becomes the bottleneck — the input stays responsive while Fuse and the result pipeline only re-run after typing settles.
+     * Set to `0` (the default) to disable.
+     * @defaultValue 0
+     */
+    searchDelay?: number;
     class?: any;
     ui?: CommandPalette['slots'];
 }
@@ -190,7 +197,15 @@ type SlotProps<T> = (props: {
     index: number;
     ui: CommandPalette['ui'];
 }) => VNode[];
-export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem> = {
+type GroupSlotProps<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = (props: {
+    group: G;
+    label: string;
+    ui: CommandPalette['ui'];
+}) => VNode[];
+type GroupSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
+    'group-label'?: GroupSlotProps<T, G>;
+} & Record<`${string}-group-label`, GroupSlotProps<T, G>>;
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
     'empty'?(props: {
         searchTerm: string;
     }): VNode[];
@@ -208,7 +223,7 @@ export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteIte
     'item-label'?: SlotProps<T>;
     'item-description'?: SlotProps<T>;
     'item-trailing'?: SlotProps<T>;
-} & Record<string, SlotProps<T>>;
+} & Record<string, SlotProps<T>> & GroupSlots<T, G>;
 declare const _default: typeof __VLS_export;
 export default _default;
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -229,7 +244,7 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: CommandPaletteSlots<T>;
+    slots: CommandPaletteSlots<T, G>;
     emit: (((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;

package/dist/runtime/components/CommandPalette.vue

@@ -6,7 +6,7 @@ import theme from "#build/ui/command-palette";
 import { computed, ref, useTemplateRef, toRef } from "vue";
 import { ListboxRoot, ListboxFilter, ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxVirtualizer, ListboxItem, ListboxItemIndicator, useForwardPropsEmits } from "reka-ui";
 import { defu } from "defu";
-import { reactivePick, createReusableTemplate, refThrottled } from "@vueuse/core";
+import { reactivePick, createReusableTemplate, refDebounced, refThrottled } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
@@ -46,6 +46,7 @@ const props = defineProps({
   labelKey: { type: null, required: false, default: "label" },
   descriptionKey: { type: null, required: false, default: "description" },
   preserveGroupOrder: { type: Boolean, required: false, default: false },
+  searchDelay: { type: Number, required: false, default: 0 },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   multiple: { type: Boolean, required: false },
@@ -113,20 +114,21 @@ const items = computed(() => groups.value?.filter((group) => {
   }
   return true;
 })?.flatMap((group) => group.items?.map((item) => ({ ...item, group: group.id })) || []) || []);
-const { results: fuseResults } = useFuse(searchTerm, items, fuse);
+const fuseSearchTerm = refDebounced(searchTerm, () => props.searchDelay);
+const { results: fuseResults } = useFuse(fuseSearchTerm, items, fuse);
 const throttledFuseResults = refThrottled(fuseResults, 16, true);
 function processGroupItems(group, items2) {
   let processedItems = items2;
   if (group?.postFilter && typeof group.postFilter === "function") {
-    processedItems = group.postFilter(searchTerm.value, processedItems);
+    processedItems = group.postFilter(fuseSearchTerm.value, processedItems);
   }
   return {
     ...group,
     items: processedItems.slice(0, fuse.value.resultLimit).map((item) => {
       return {
         ...item,
-        labelHtml: highlight(item, searchTerm.value, props.labelKey),
-        suffixHtml: highlight(item, searchTerm.value, void 0, [props.labelKey])
+        labelHtml: highlight(item, fuseSearchTerm.value, props.labelKey),
+        suffixHtml: highlight(item, fuseSearchTerm.value, void 0, [props.labelKey])
       };
     })
   };
@@ -352,8 +354,10 @@ function onSelect(e, item) {
 
         <template v-else>
           <ListboxGroup v-for="group in filteredGroups" :key="`group-${group.id}`" data-slot="group" :class="ui.group({ class: uiProp?.group })">
-            <ListboxGroupLabel v-if="get(group, props.labelKey)" data-slot="label" :class="ui.label({ class: uiProp?.label })">
-              {{ get(group, props.labelKey) }}
+            <ListboxGroupLabel v-if="get(group, props.labelKey) || !!slots[group.slot ? `${group.slot}-group-label` : 'group-label']" data-slot="label" :class="ui.label({ class: uiProp?.label })">
+              <slot :name="group.slot ? `${group.slot}-group-label` : 'group-label'" :group="group" :label="get(group, props.labelKey)" :ui="ui">
+                {{ get(group, props.labelKey) }}
+              </slot>
             </ListboxGroupLabel>
 
             <ReuseItemTemplate

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

@@ -179,6 +179,13 @@ export interface CommandPaletteProps<G extends CommandPaletteGroup<T> = CommandP
      * @defaultValue false
      */
     preserveGroupOrder?: boolean;
+    /**
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful when indexing large datasets where fuzzy search becomes the bottleneck — the input stays responsive while Fuse and the result pipeline only re-run after typing settles.
+     * Set to `0` (the default) to disable.
+     * @defaultValue 0
+     */
+    searchDelay?: number;
     class?: any;
     ui?: CommandPalette['slots'];
 }
@@ -190,7 +197,15 @@ type SlotProps<T> = (props: {
     index: number;
     ui: CommandPalette['ui'];
 }) => VNode[];
-export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem> = {
+type GroupSlotProps<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = (props: {
+    group: G;
+    label: string;
+    ui: CommandPalette['ui'];
+}) => VNode[];
+type GroupSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
+    'group-label'?: GroupSlotProps<T, G>;
+} & Record<`${string}-group-label`, GroupSlotProps<T, G>>;
+export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteItem, G extends CommandPaletteGroup<T> = CommandPaletteGroup<T>> = {
     'empty'?(props: {
         searchTerm: string;
     }): VNode[];
@@ -208,7 +223,7 @@ export type CommandPaletteSlots<T extends CommandPaletteItem = CommandPaletteIte
     'item-label'?: SlotProps<T>;
     'item-description'?: SlotProps<T>;
     'item-trailing'?: SlotProps<T>;
-} & Record<string, SlotProps<T>>;
+} & Record<string, SlotProps<T>> & GroupSlots<T, G>;
 declare const _default: typeof __VLS_export;
 export default _default;
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -229,7 +244,7 @@ declare const __VLS_export: <G extends CommandPaletteGroup<T>, T extends Command
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: CommandPaletteSlots<T>;
+    slots: CommandPaletteSlots<T, G>;
     emit: (((evt: "highlight", payload: {
         ref: HTMLElement;
         value: T;