@eslamdevui/ui 4.0.0 → 4.1.0

package/dist/runtime/components/Carousel.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/carousel";
 </script>
 
 <script setup>
-import { computed, ref, watch, onMounted } from "vue";
+import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
 import useEmblaCarousel from "embla-carousel-vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
@@ -91,11 +91,14 @@ async function loadPlugins() {
   }
   plugins.value = emblaPlugins;
 }
-watch(() => [props.autoplay, props.autoScroll, props.autoHeight, props.classNames, props.fade, props.wheelGestures], loadPlugins, { immediate: true });
-const [emblaRef, emblaApi] = useEmblaCarousel(options.value, plugins.value);
-watch([options, plugins], () => {
+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 });
+const [emblaRef, emblaApi] = useEmblaCarousel(options, plugins);
+watch(options, () => {
+  emblaApi.value?.reInit(options.value, plugins.value);
+}, { flush: "post" });
 function scrollPrev() {
   emblaApi.value?.scrollPrev();
 }
@@ -106,8 +109,15 @@ function scrollTo(index) {
   emblaApi.value?.scrollTo(index);
 }
 function onKeyDown(event) {
-  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
-  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  let prevKey;
+  let nextKey;
+  if (props.orientation === "horizontal") {
+    prevKey = dir.value === "ltr" ? "ArrowLeft" : "ArrowRight";
+    nextKey = dir.value === "ltr" ? "ArrowRight" : "ArrowLeft";
+  } else {
+    prevKey = "ArrowUp";
+    nextKey = "ArrowDown";
+  }
   if (event.key === prevKey) {
     event.preventDefault();
     scrollPrev();
@@ -138,11 +148,21 @@ onMounted(() => {
   if (!emblaApi.value) {
     return;
   }
-  emblaApi.value?.on("init", onInit);
-  emblaApi.value?.on("init", onSelect);
-  emblaApi.value?.on("reInit", onInit);
-  emblaApi.value?.on("reInit", onSelect);
-  emblaApi.value?.on("select", onSelect);
+  emblaApi.value.on("init", onInit);
+  emblaApi.value.on("init", onSelect);
+  emblaApi.value.on("reInit", onInit);
+  emblaApi.value.on("reInit", onSelect);
+  emblaApi.value.on("select", onSelect);
+});
+onBeforeUnmount(() => {
+  if (!emblaApi.value) {
+    return;
+  }
+  emblaApi.value.off("init", onInit);
+  emblaApi.value.off("init", onSelect);
+  emblaApi.value.off("reInit", onInit);
+  emblaApi.value.off("reInit", onSelect);
+  emblaApi.value.off("select", onSelect);
 });
 defineExpose({
   emblaRef,
@@ -155,6 +175,7 @@ defineExpose({
     :as="as"
     role="region"
     aria-roledescription="carousel"
+    :data-orientation="orientation"
     tabindex="0"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @keydown="onKeyDown"

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

@@ -107,20 +107,19 @@ export interface CarouselEmits {
      */
     select: [selectedIndex: number];
 }
-declare const _default: <T extends CarouselItem>(__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<Pick<Partial<{}> & Omit<{
-        readonly onSelect?: ((selectedIndex: number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect"> & CarouselProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
+declare const __VLS_export: <T extends CarouselItem>(__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<CarouselProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "select", selectedIndex: number) => void>>> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
         emblaRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
         emblaApi: import("vue").Ref<EmblaCarouselType | undefined, EmblaCarouselType | undefined>;
-    }>): void;
+    }>) => void;
     attrs: any;
     slots: CarouselSlots<T>;
     emit: (evt: "select", selectedIndex: number) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -22,7 +22,9 @@ export interface ChangelogVersionProps {
     /** The authors of the changelog version. */
     authors?: UserProps[];
     /** The image of the changelog version. Can be a string or an object. */
-    image?: string | Partial<HTMLImageElement>;
+    image?: string | (Partial<HTMLImageElement> & {
+        [key: string]: any;
+    });
     /**
      * Display an indicator dot on the left.
      * @defaultValue true
@@ -36,21 +38,28 @@ export interface ChangelogVersionProps {
 }
 export interface ChangelogVersionSlots {
     header(props?: {}): any;
-    badge(props?: {}): any;
+    badge(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
     date(props?: {}): any;
     title(props?: {}): any;
     description(props?: {}): any;
-    image(props?: {}): any;
+    image(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
     body(props?: {}): any;
     footer(props?: {}): any;
     authors(props?: {}): any;
     actions(props?: {}): any;
-    indicator(props?: {}): any;
+    indicator(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
     as: any;
     indicator: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChangelogVersionSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/ChangelogVersion.vue

@@ -95,7 +95,7 @@ const ariaLabel = computed(() => {
 
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @click="onClick">
     <div v-if="!!props.indicator || !!slots.indicator" :class="ui.indicator({ class: props.ui?.indicator })">
-      <slot name="indicator">
+      <slot name="indicator" :ui="ui">
         <ReuseDateTemplate />
 
         <div :class="ui.dot({ class: props.ui?.dot })">
@@ -108,7 +108,7 @@ const ariaLabel = computed(() => {
       <div v-if="!!slots.header || (date || !!slots.date) || (badge || !!slots.badge) || (title || !!slots.title) || (description || !!slots.description) || (image || !!slots.image)" :class="ui.header({ class: props.ui?.header })">
         <slot name="header">
           <div v-if="date || !!slots.date || (badge || !!slots.badge)" :class="ui.meta({ class: props.ui?.meta, badge: !!badge || !!slots.badge || !props.indicator })">
-            <slot name="badge">
+            <slot name="badge" :ui="ui">
               <UBadge v-if="badge" color="neutral" variant="solid" v-bind="typeof badge === 'string' ? { label: badge } : badge" :class="ui.badge({ class: props.ui?.badge })" />
             </slot>
 
@@ -130,7 +130,7 @@ const ariaLabel = computed(() => {
           </div>
 
           <div v-if="image || !!slots.image" :class="ui.imageWrapper({ class: props.ui?.imageWrapper })">
-            <slot name="image">
+            <slot name="image" :ui="ui">
               <component
                 :is="ImageComponent"
                 v-if="image"

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

@@ -22,7 +22,9 @@ export interface ChangelogVersionProps {
     /** The authors of the changelog version. */
     authors?: UserProps[];
     /** The image of the changelog version. Can be a string or an object. */
-    image?: string | Partial<HTMLImageElement>;
+    image?: string | (Partial<HTMLImageElement> & {
+        [key: string]: any;
+    });
     /**
      * Display an indicator dot on the left.
      * @defaultValue true
@@ -36,21 +38,28 @@ export interface ChangelogVersionProps {
 }
 export interface ChangelogVersionSlots {
     header(props?: {}): any;
-    badge(props?: {}): any;
+    badge(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
     date(props?: {}): any;
     title(props?: {}): any;
     description(props?: {}): any;
-    image(props?: {}): any;
+    image(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
     body(props?: {}): any;
     footer(props?: {}): any;
     authors(props?: {}): any;
     actions(props?: {}): any;
-    indicator(props?: {}): any;
+    indicator(props: {
+        ui: ChangelogVersion['ui'];
+    }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChangelogVersionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChangelogVersionProps> & Readonly<{}>, {
     as: any;
     indicator: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChangelogVersionSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/ChangelogVersions.d.vue.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,52 +26,25 @@ 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 _default: <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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ChangelogVersionsProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+};
+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;
     attrs: any;
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

package/dist/runtime/components/ChangelogVersions.vue

@@ -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,52 +26,25 @@ 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 _default: <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<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ChangelogVersionsProps<T> & {}> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+};
+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;
     attrs: any;
     slots: ChangelogVersionsSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
     [K in keyof T as K]: T[K];

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

@@ -50,15 +50,17 @@ export interface ChatMessageProps extends UIMessage {
 export interface ChatMessageSlots {
     leading(props: {
         avatar: ChatMessageProps['avatar'];
+        ui: ChatMessage['ui'];
     }): any;
     content(props: ChatMessageProps): any;
     actions(props: {
         actions: ChatMessageProps['actions'];
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
+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>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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,15 +50,17 @@ export interface ChatMessageProps extends UIMessage {
 export interface ChatMessageSlots {
     leading(props: {
         avatar: ChatMessageProps['avatar'];
+        ui: ChatMessage['ui'];
     }): any;
     content(props: ChatMessageProps): any;
     actions(props: {
         actions: ChatMessageProps['actions'];
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {
+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>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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,28 +53,28 @@ 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 _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
+};
+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;
     shouldScrollToBottom: boolean;
     spacingOffset: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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;
   }
-}, { 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,11 +156,14 @@ onMounted(() => {
   if (!parent.value) {
     return;
   }
-  if (props.shouldScrollToBottom) {
-    nextTick(() => scrollToBottom(false));
-  } else {
-    checkScrollPosition();
-  }
+  lastScrollTop.value = parent.value.scrollTop;
+  setTimeout(() => {
+    if (props.shouldScrollToBottom) {
+      scrollToBottom(false);
+    } else {
+      checkScrollPosition();
+    }
+  }, 100);
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
 });
@@ -166,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>
@@ -180,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 />
@@ -192,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"