@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

package/dist/runtime/components/Calendar.vue

@@ -1,4 +1,5 @@
 <script>
+import { getWeekNumber } from "reka-ui/date";
 import theme from "#build/b24ui/calendar";
 </script>
 
@@ -8,6 +9,7 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -30,8 +32,9 @@ const props = defineProps({
   yearControls: { type: Boolean, required: false, default: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
+  weekNumbers: { type: Boolean, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   defaultPlaceholder: { type: null, required: false },
   placeholder: { type: null, required: false },
   allowNonContiguousRanges: { type: Boolean, required: false },
@@ -58,8 +61,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:validModelValue", "update:startValue"]);
 defineSlots();
-const { dir, t } = useLocale();
+const { dir, t, locale } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("calendar", props);
 const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "size", "monthControls", "yearControls", "class", "b24ui"), emits);
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? icons.chevronDoubleLeft : icons.chevronDoubleRight));
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
@@ -67,7 +71,8 @@ const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === "rtl" ?
 const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === "rtl" ? icons.chevronRight : icons.chevronLeft));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.calendar || {} })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  weekNumbers: props.weekNumbers
 }));
 function paginateYear(date, sign) {
   if (sign === -1) {
@@ -93,16 +98,16 @@ const btnSize = computed(() => {
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+    <Calendar.Header data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <B24Button :icon="prevYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <B24Button :icon="prevMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: props.b24ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: uiProp?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -114,20 +119,20 @@ const btnSize = computed(() => {
         <B24Button :icon="nextYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="b24ui.grid({ class: props.b24ui?.grid })"
+        :class="b24ui.grid({ class: uiProp?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="b24ui.headCell({ class: props.b24ui?.headCell })"
+              :class="b24ui.headCell({ class: uiProp?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -135,25 +140,33 @@ const btnSize = computed(() => {
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: uiProp?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="b24ui.gridRow({ class: props.b24ui?.gridRow })"
+            :class="b24ui.gridRow({ class: uiProp?.gridRow })"
           >
+            <td
+              v-if="weekNumbers && weekDates[0]"
+              role="gridcell"
+              data-slot="cellWeek"
+              :class="b24ui.cellWeek({ class: uiProp?.cellWeek })"
+            >
+              {{ getWeekNumber(weekDates[0], locale.code) }}
+            </td>
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="b24ui.cell({ class: props.b24ui?.cell })"
+              :class="b24ui.cell({ class: uiProp?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="b24ui.cellTrigger({ class: props.b24ui?.cellTrigger })"
+                :class="b24ui.cellTrigger({ class: uiProp?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

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

@@ -83,6 +83,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     yearControls?: boolean;
     defaultValue?: CalendarDefaultValue<R, M>;
     modelValue?: CalendarModelValue<R, M>;
+    weekNumbers?: boolean;
     class?: any;
     b24ui?: Calendar['slots'];
 }
@@ -98,8 +99,15 @@ export interface CalendarSlots {
         day: string;
     }) => any;
 }
-declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & {
+        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -109,8 +117,8 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/Card.d.vue.ts

@@ -20,9 +20,9 @@ export interface CardSlots {
     default(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Card.vue

@@ -6,31 +6,33 @@ import theme from "#build/b24ui/card";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   variant: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("card", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.card || {} })({
   variant: props.variant
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -20,9 +20,9 @@ export interface CardSlots {
     default(props?: {}): any;
     footer(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CardSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -52,9 +52,11 @@ export interface ChatMessageSlots {
         actions: ChatMessageProps['actions'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessageSlots>;
 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;

package/dist/runtime/components/ChatMessage.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/chat-message";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24Button from "./Button.vue";
@@ -20,7 +21,7 @@ const props = defineProps({
   actions: { type: Array, required: false },
   compact: { type: Boolean, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   id: { type: String, required: true },
   role: { type: String, required: true },
   metadata: { type: null, required: false },
@@ -28,6 +29,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessage", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -38,27 +40,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <slot name="leading" :avatar="avatar" :b24ui="b24ui">
           <Component
             :is="icon"
             v-if="icon"
             data-slot="leadingIcon"
-            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+            :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
           />
           <B24Avatar
             v-else-if="avatar"
-            :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+            :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
             v-bind="avatar"
             data-slot="leadingAvatar"
-            :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+            :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
           />
         </slot>
       </div>
 
-      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
         <slot
           :id="id"
           name="content"
@@ -73,7 +75,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
         <slot name="actions" :actions="actions">
           <B24Tooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <B24Button

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

@@ -52,9 +52,11 @@ export interface ChatMessageSlots {
         actions: ChatMessageProps['actions'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessageSlots>;
 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;

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

@@ -68,9 +68,14 @@ export type ChatMessagesSlots = {
         onClick: () => void;
     }): any;
 };
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
 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;

package/dist/runtime/components/ChatMessages.vue

@@ -8,6 +8,7 @@ import { Presence } from "reka-ui";
 import { defu } from "defu";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -25,11 +26,12 @@ const props = defineProps({
   compact: { type: Boolean, required: false },
   spacingOffset: { type: Number, required: false, default: 0 },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "message" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "message" }));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessages || {} })({
@@ -158,13 +160,16 @@ onMounted(() => {
     return;
   }
   lastScrollTop.value = parent.value.scrollTop;
-  setTimeout(() => {
-    if (props.shouldScrollToBottom) {
+  if (props.shouldScrollToBottom) {
+    scrollToBottom(false);
+    setTimeout(() => {
       scrollToBottom(false);
-    } else {
+    }, 100);
+  } else {
+    nextTick(() => {
       checkScrollPosition();
-    }
-  }, 100);
+    });
+  }
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
 });
@@ -175,14 +180,14 @@ onMounted(() => {
     ref="el"
     :data-status="status"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
       <B24ChatMessage
         v-for="message in messages"
         :key="message.id"
-        v-bind="{ ...message, ...message.role === 'user' ? userProps : assistantProps }"
+        v-bind="{ ...message.role === 'user' ? userProps : assistantProps, ...message }"
         :ref="(el) => registerMessageRef(message.id, el)"
         :compact="compact"
       >
@@ -201,7 +206,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :b24ui="b24ui">
-          <div data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })">
             <span />
             <span />
             <span />
@@ -211,7 +216,7 @@ onMounted(() => {
     </B24ChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <slot name="viewport" :b24ui="b24ui" :on-click="onAutoScrollClick">
           <B24Button
             v-if="autoScroll"
@@ -219,7 +224,7 @@ onMounted(() => {
             color="air-secondary-no-accent"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
             data-slot="autoScroll"
-            :class="b24ui.autoScroll({ class: props.b24ui?.autoScroll })"
+            :class="b24ui.autoScroll({ class: uiProp?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>

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

@@ -68,9 +68,14 @@ export type ChatMessagesSlots = {
         onClick: () => void;
     }): any;
 };
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatMessagesSlots>;
 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;

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

@@ -15,9 +15,9 @@ export interface ChatPaletteSlots {
     default(props?: {}): any;
     prompt(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ChatPalette.vue

@@ -6,26 +6,28 @@ import theme from "#build/b24ui/chat-palette";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPalette", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPalette || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: props.b24ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: uiProp?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

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

@@ -15,9 +15,9 @@ export interface ChatPaletteSlots {
     default(props?: {}): any;
     prompt(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -30,10 +30,12 @@ export interface ChatPromptSlots extends TextareaSlots {
     header(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: Readonly<import("vue").Ref<any, any>>;
+    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;
@@ -44,9 +46,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onClose?: ((event: Event) => any) | undefined;
     onSubmit?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    as: any;
+    autofocus: boolean;
+    rows: number;
+    autoresize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/ChatPrompt.vue

@@ -7,6 +7,7 @@ import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -18,7 +19,7 @@ const props = defineProps({
   variant: { type: null, required: false },
   error: { type: Error, required: false },
   class: { type: null, required: false },
-  b24ui: { type: void 0, required: false },
+  b24ui: { type: Object, required: false },
   rows: { type: Number, required: false, default: 1 },
   autofocus: { type: Boolean, required: false, default: true },
   autofocusDelay: { type: Number, required: false },
@@ -35,6 +36,7 @@ const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPrompt", props);
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading"));
 const getProxySlots = () => omit(slots, ["header", "footer", "default"]);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPrompt || {} })({
@@ -57,8 +59,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
@@ -68,10 +70,11 @@ defineExpose({
       :placeholder="placeholder || t('chatPrompt.placeholder')"
       :disabled="Boolean(error) || disabled"
       no-border
+      fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)"
+      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
-      :class="b24ui.body({ class: props.b24ui?.body })"
+      :class="b24ui.body({ class: uiProp?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
     >
@@ -80,9 +83,9 @@ defineExpose({
       </template>
     </B24Textarea>
 
-    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
-      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)" />
+      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)" />
     </div>
   </Primitive>
 </template>

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

@@ -30,10 +30,12 @@ export interface ChatPromptSlots extends TextareaSlots {
     header(props?: {}): any;
     footer(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: Readonly<import("vue").Ref<any, any>>;
+    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;
@@ -44,9 +46,12 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onClose?: ((event: Event) => any) | undefined;
     onSubmit?: ((event: Event) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    as: any;
+    autofocus: boolean;
+    rows: number;
+    autoresize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;