@nuxt/ui 4.7.1 → 4.8.1

package/dist/runtime/components/ChatMessage.vue

@@ -6,18 +6,19 @@ import theme from "#build/ui/chat-message";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 import UTooltip from "./Tooltip.vue";
 import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "article" },
   icon: { type: null, required: false },
   avatar: { type: Object, required: false },
   variant: { type: null, required: false },
+  color: { type: null, required: false },
   side: { type: null, required: false },
   actions: { type: Array, required: false },
   compact: { type: Boolean, required: false },
@@ -30,13 +31,14 @@ const props = defineProps({
   parts: { type: Array, required: true }
 });
 const slots = defineSlots();
+const props = useComponentProps("chatMessage", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chatMessage", props);
 const fileParts = computed(() => props.parts?.filter((part) => part.type === "file") ?? []);
 const textParts = computed(() => props.parts?.filter((part) => part.type === "text") ?? []);
-const messageProps = computed(() => omit(props, ["as", "icon", "avatar", "variant", "side", "actions", "compact", "class", "ui", "content"]));
+const messageProps = computed(() => omit(props, ["as", "icon", "avatar", "variant", "color", "side", "actions", "compact", "class", "ui", "content"]));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage || {} })({
   variant: props.variant,
+  color: props.color,
   side: props.side,
   leading: !!props.icon || !!props.avatar || !!slots.leading,
   actions: !!props.actions || !!slots.actions,
@@ -45,44 +47,52 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
-      <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+  <Primitive :as="props.as" :data-role="props.role" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <div v-if="!!slots.files && fileParts.length || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
+      <slot name="header" v-bind="{ ...messageProps }">
+        <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: props.ui?.files })">
+          <slot name="files" v-bind="{ ...messageProps, parts: fileParts }" />
+        </div>
+      </slot>
     </div>
 
-    <div data-slot="container" :class="ui.container({ class: uiProp?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
-        <slot name="leading" v-bind="{ ...messageProps, avatar, ui }">
-          <UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: uiProp?.leadingIcon })" />
-          <UAvatar v-else-if="avatar" :size="uiProp?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: uiProp?.leadingAvatar })" />
+    <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
+      <div v-if="props.icon || props.avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" v-bind="{ ...messageProps, avatar: props.avatar, ui }">
+          <UIcon v-if="props.icon" :name="props.icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="props.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="props.avatar" data-slot="leadingAvatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
       </div>
 
-      <div v-if="content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: uiProp?.content })">
-        <slot name="content" v-bind="{ ...messageProps, content }">
-          <template v-if="content">
-            {{ content }}
-          </template>
-          <template v-else>
-            <template v-for="(part, index) in textParts" :key="`${id}-${part.type}-${index}`">
-              {{ part.text }}
-            </template>
-          </template>
-        </slot>
-      </div>
+      <div v-if="props.content || textParts.length || !!slots.content || props.actions || !!slots.actions || !!slots.body" data-slot="body" :class="ui.body({ class: props.ui?.body })">
+        <slot name="body" v-bind="{ ...messageProps }">
+          <div v-if="props.content || textParts.length || !!slots.content" data-slot="content" :class="ui.content({ class: props.ui?.content })">
+            <slot name="content" v-bind="{ ...messageProps, content: props.content }">
+              <template v-if="props.content">
+                {{ props.content }}
+              </template>
+              <template v-else>
+                <template v-for="(part, index) in textParts" :key="`${props.id}-${part.type}-${index}`">
+                  {{ part.text }}
+                </template>
+              </template>
+            </slot>
+          </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: uiProp?.actions })">
-        <slot name="actions" v-bind="{ ...messageProps, actions }">
-          <UTooltip v-for="(action, index) in actions" :key="index" :text="action.label">
-            <UButton
-              size="sm"
-              color="neutral"
-              variant="ghost"
-              v-bind="omit(action, ['onClick'])"
-              :label="undefined"
-              @click="typeof action.onClick === 'function' ? action.onClick($event, messageProps) : void 0"
-            />
-          </UTooltip>
+          <div v-if="props.actions || !!slots.actions" data-slot="actions" :class="ui.actions({ class: props.ui?.actions })">
+            <slot name="actions" v-bind="{ ...messageProps, actions: props.actions }">
+              <UTooltip v-for="(action, index) in props.actions" :key="index" :text="action.label">
+                <UButton
+                  size="sm"
+                  color="neutral"
+                  variant="ghost"
+                  v-bind="omit(action, ['onClick'])"
+                  :label="undefined"
+                  @click="typeof action.onClick === 'function' ? action.onClick($event, messageProps) : void 0"
+                />
+              </UTooltip>
+            </slot>
+          </div>
         </slot>
       </div>
     </div>

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

@@ -22,6 +22,10 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
      * @defaultValue 'naked'
      */
     variant?: ChatMessage['variants']['variant'];
+    /**
+     * @defaultValue 'neutral'
+     */
+    color?: ChatMessage['variants']['color'];
     /**
      * @defaultValue 'left'
      */
@@ -49,6 +53,7 @@ export interface ChatMessageProps<TMetadata = unknown, TDataParts extends UIData
     ui?: ChatMessage['slots'];
 }
 export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIDataTypes = UIDataTypes, TTools extends UITools = UITools> {
+    header?(props: UIMessage<TMetadata, TDataParts, TTools>): VNode[];
     leading?(props: UIMessage<TMetadata, TDataParts, TTools> & {
         avatar: ChatMessageProps<TMetadata, TDataParts, TTools>['avatar'];
         ui: ChatMessage['ui'];
@@ -56,6 +61,7 @@ export interface ChatMessageSlots<TMetadata = unknown, TDataParts extends UIData
     files?(props: Omit<UIMessage<TMetadata, TDataParts, TTools>, 'parts'> & {
         parts: FileUIPart[];
     }): VNode[];
+    body?(props: UIMessage<TMetadata, TDataParts, TTools>): VNode[];
     content?(props: UIMessage<TMetadata, TDataParts, TTools> & {
         content?: string;
     }): VNode[];

package/dist/runtime/components/ChatMessages.vue

@@ -8,12 +8,12 @@ import { Presence } from "reka-ui";
 import { defu } from "defu";
 import { useElementBounding, useEventListener, useMutationObserver, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UChatMessage from "./ChatMessage.vue";
 import UButton from "./Button.vue";
-const props = defineProps({
+const _props = defineProps({
   messages: { type: null, required: false },
   status: { type: String, required: false },
   shouldAutoScroll: { type: Boolean, required: false, default: false },
@@ -28,6 +28,7 @@ const props = defineProps({
   ui: { type: Object, required: false }
 });
 const slots = defineSlots();
+const props = useComponentProps("chatMessages", _props);
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const showIndicator = computed(() => {
   if (props.status === "submitted") return true;
@@ -36,7 +37,6 @@ const showIndicator = computed(() => {
   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" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "naked" }));
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
@@ -188,18 +188,18 @@ onMounted(() => {
 <template>
   <div
     ref="el"
-    :data-status="status"
+    :data-status="props.status"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
-      <template v-for="message in messages" :key="message.id">
+      <template v-for="message in props.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"
+          :compact="props.compact"
         >
           <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
             <slot :name="name" v-bind="{ ...slotData, message }" />
@@ -213,11 +213,11 @@ onMounted(() => {
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"
-      :compact="compact"
+      :compact="props.compact"
     >
       <template #content>
         <slot name="indicator" :ui="ui">
-          <div data-slot="indicator" :class="ui.indicator({ class: uiProp?.indicator })">
+          <div data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
@@ -227,16 +227,16 @@ onMounted(() => {
     </UChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: uiProp?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="ui.viewport({ class: props.ui?.viewport })">
         <slot name="viewport" :ui="ui" :on-click="onAutoScrollClick">
           <UButton
-            v-if="autoScroll"
-            :icon="autoScrollIcon || appConfig.ui.icons.arrowDown"
+            v-if="props.autoScroll"
+            :icon="props.autoScrollIcon || appConfig.ui.icons.arrowDown"
             color="neutral"
             variant="outline"
-            v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
+            v-bind="typeof props.autoScroll === 'object' ? props.autoScroll : {}"
             data-slot="autoScroll"
-            :class="ui.autoScroll({ class: uiProp?.autoScroll })"
+            :class="ui.autoScroll({ class: props.ui?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>

package/dist/runtime/components/ChatPalette.vue

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

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

@@ -19,6 +19,12 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue 'outline'
      */
     variant?: ChatPrompt['variants']['variant'];
+    /**
+     * When `true`, pressing `Enter` submits and `Shift+Enter` inserts a newline.
+     * When `false`, pressing `Enter` inserts a newline and `Ctrl+Enter` / `Cmd+Enter` submits.
+     * @defaultValue true
+     */
+    submitOnEnter?: boolean;
     error?: Error;
     class?: any;
     ui?: ChatPrompt['slots'] & TextareaProps['ui'];
@@ -52,6 +58,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     autofocus: boolean;
     rows: number;
     autoresize: boolean;
+    submitOnEnter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/ChatPrompt.vue

@@ -4,20 +4,22 @@ import theme from "#build/ui/chat-prompt";
 
 <script setup>
 import { computed, toRef, useTemplateRef } from "vue";
-import { Primitive, useForwardProps } from "reka-ui";
+import { Primitive } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useIMEGuard } from "../composables/useIMEGuard";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UTextarea from "./Textarea.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
   variant: { type: null, required: false },
+  submitOnEnter: { type: Boolean, required: false, default: true },
   error: { type: Error, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -35,10 +37,10 @@ const props = defineProps({
 });
 const emits = defineEmits(["submit", "close"]);
 const slots = defineSlots();
+const props = useComponentProps("chatPrompt", _props);
 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", "loadingIcon"));
 const getProxySlots = () => omit(slots, ["header", "footer"]);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
@@ -58,29 +60,37 @@ function blur(e) {
 const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
   submit(event);
 });
+function handleEnter(event) {
+  if (props.submitOnEnter) {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) return;
+  } else {
+    if (!event.ctrlKey && !event.metaKey) return;
+  }
+  onEnter(event);
+}
 defineExpose({
   textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: uiProp?.header })">
+  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
     <UTextarea
       ref="textareaRef"
       v-model="model"
-      :placeholder="placeholder || t('chatPrompt.placeholder')"
-      :disabled="Boolean(error) || disabled"
+      :placeholder="props.placeholder ?? t('chatPrompt.placeholder')"
+      :disabled="Boolean(props.error) || props.disabled"
       variant="none"
       fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), uiProp)"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
       data-slot="body"
-      :class="ui.body({ class: uiProp?.body })"
-      @keydown.enter.exact="onEnter"
+      :class="ui.body({ class: props.ui?.body })"
+      @keydown.enter="handleEnter"
       @compositionend="onCompositionEnd"
       @keydown.esc="blur"
     >
@@ -89,7 +99,7 @@ defineExpose({
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -19,6 +19,12 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue 'outline'
      */
     variant?: ChatPrompt['variants']['variant'];
+    /**
+     * When `true`, pressing `Enter` submits and `Shift+Enter` inserts a newline.
+     * When `false`, pressing `Enter` inserts a newline and `Ctrl+Enter` / `Cmd+Enter` submits.
+     * @defaultValue true
+     */
+    submitOnEnter?: boolean;
     error?: Error;
     class?: any;
     ui?: ChatPrompt['slots'] & TextareaProps['ui'];
@@ -52,6 +58,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     autofocus: boolean;
     rows: number;
     autoresize: boolean;
+    submitOnEnter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -87,11 +87,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -4,16 +4,16 @@ import theme from "#build/ui/chat-prompt-submit";
 
 <script setup>
 import { computed } from "vue";
-import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
+import { useForwardProps } from "../composables/useForwardProps";
 import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
 import UButton from "./Button.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps({
+const _props = defineProps({
   status: { type: String, required: false, default: "ready" },
   icon: { type: null, required: false },
   color: { type: null, required: false },
@@ -52,9 +52,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
+const props = useComponentProps("chatPromptSubmit", _props);
 const { t } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chatPromptSubmit", props);
 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(() => ({
@@ -101,8 +101,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSub
   'aria-label': t('chatPromptSubmit.label'),
   ...$attrs
 }"
-    :class="ui.base({ class: [uiProp?.base, props.class] })"
-    :ui="transformUI(ui, uiProp)"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :ui="transformUI(ui, props.ui)"
   >
     <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />

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

@@ -87,11 +87,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
     errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/ChatReasoning.vue

@@ -6,13 +6,13 @@ import theme from "#build/ui/chat-reasoning";
 import { ref, computed, watch, onUnmounted, nextTick, useTemplateRef } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { useLocale } from "../composables/useLocale";
 import { useScrollShadow } from "../composables/useScrollShadow";
 import { tv } from "../utils/tv";
 import UIcon from "./Icon.vue";
 import UChatShimmer from "./ChatShimmer.vue";
-const props = defineProps({
+const _props = defineProps({
   text: { type: String, required: false },
   streaming: { type: Boolean, required: false, default: false },
   duration: { type: Number, required: false },
@@ -30,9 +30,9 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:open"]);
 defineSlots();
+const props = useComponentProps("chatReasoning", _props);
 const { t, code } = useLocale();
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chatReasoning", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatReasoning || {} })({
   chevron: props.chevron
 }));
@@ -112,49 +112,49 @@ watch(() => props.text, () => {
     v-if="hasContent"
     v-slot="{ open: isOpen }"
     :open="resolvedOpen"
-    :disabled="disabled"
-    :unmount-on-hide="unmountOnHide"
+    :disabled="props.disabled"
+    :unmount-on-hide="props.unmountOnHide"
     data-slot="root"
-    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:open="setOpen"
   >
     <CollapsibleTrigger as-child :disabled="!hasContent">
       <button
         type="button"
         data-slot="trigger"
-        :class="ui.trigger({ class: uiProp?.trigger })"
+        :class="ui.trigger({ class: props.ui?.trigger })"
       >
-        <span v-if="icon || hasContent && chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+        <span v-if="props.icon || hasContent && props.chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
           <UIcon
-            v-if="icon"
-            :name="icon"
+            v-if="props.icon"
+            :name="props.icon"
             data-slot="leadingIcon"
-            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+            :class="ui.leadingIcon({ class: props.ui?.leadingIcon, alone: !(hasContent && props.chevron === 'leading') })"
           />
           <UIcon
-            v-if="hasContent && chevron === 'leading'"
+            v-if="hasContent && props.chevron === 'leading'"
             :name="chevronIconName"
             data-slot="chevronIcon"
-            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !icon })"
+            :class="ui.chevronIcon({ class: props.ui?.chevronIcon, alone: !props.icon })"
           />
         </span>
 
-        <UChatShimmer v-if="streaming" :text="thinkingText" v-bind="props.shimmer" data-slot="label" :class="ui.label({ class: uiProp?.label })" />
-        <span v-else data-slot="label" :class="ui.label({ class: uiProp?.label })">{{ thinkingText }}</span>
+        <UChatShimmer v-if="props.streaming" :text="thinkingText" v-bind="props.shimmer" data-slot="label" :class="ui.label({ class: props.ui?.label })" />
+        <span v-else data-slot="label" :class="ui.label({ class: props.ui?.label })">{{ thinkingText }}</span>
 
         <UIcon
-          v-if="hasContent && chevron === 'trailing'"
+          v-if="hasContent && props.chevron === 'trailing'"
           :name="chevronIconName"
           data-slot="trailingIcon"
-          :class="ui.trailingIcon({ class: uiProp?.trailingIcon })"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
         />
       </button>
     </CollapsibleTrigger>
 
-    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
-      <div ref="bodyRef" data-slot="body" :class="ui.body({ class: uiProp?.body })" :style="scrollShadowStyle">
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: props.ui?.content })">
+      <div ref="bodyRef" data-slot="body" :class="ui.body({ class: props.ui?.body })" :style="scrollShadowStyle">
         <slot :open="isOpen">
-          {{ text }}
+          {{ props.text }}
         </slot>
       </div>
     </CollapsibleContent>

package/dist/runtime/components/ChatShimmer.vue

@@ -6,9 +6,9 @@ import theme from "#build/ui/chat-shimmer";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useComponentUI } from "../composables/useComponentUI";
+import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
-const props = defineProps({
+const _props = defineProps({
   as: { type: null, required: false, default: "span" },
   text: { type: String, required: true },
   duration: { type: Number, required: false, default: 2 },
@@ -16,22 +16,22 @@ const props = defineProps({
   class: { type: null, required: false },
   ui: { type: Object, required: false }
 });
+const props = useComponentProps("chatShimmer", _props);
 const appConfig = useAppConfig();
-const uiProp = useComponentUI("chatShimmer", props);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatShimmer || {} }));
 const spread = computed(() => props.text.length * props.spread);
 </script>
 
 <template>
   <Primitive
-    :as="as"
+    :as="props.as"
     :style="{
   '--spread': `${spread}px`,
-  '--duration': `${duration}s`
+  '--duration': `${props.duration}s`
 }"
     data-slot="base"
-    :class="ui({ class: [uiProp?.base, props.class] })"
+    :class="ui({ class: [props.ui?.base, props.class] })"
   >
-    {{ text }}
+    {{ props.text }}
   </Primitive>
 </template>

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

@@ -74,9 +74,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
 }, string, import("vue").PublicProps, Readonly<ChatToolProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    open: boolean;
     streaming: boolean;
     unmountOnHide: boolean;
     chevron: "leading" | "trailing";