@nuxt/ui 4.9.0 → 4.11.0

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

@@ -2,7 +2,10 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -85,7 +88,7 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatMessages.vue

@@ -30,16 +30,16 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatMessages", _props);
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
-const showIndicator = computed(() => {
+function showIndicator() {
   if (props.status === "submitted") return true;
   if (props.status !== "streaming") return false;
   const lastMessage = props.messages?.[props.messages.length - 1];
   return lastMessage?.role === "assistant" && !lastMessage.parts?.length;
-});
+}
 const appConfig = useAppConfig();
 const 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 || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatMessages || {} })({
   compact: props.compact
 }));
 const el = ref(null);
@@ -212,7 +212,7 @@ defineExpose({
     </slot>
 
     <UChatMessage
-      v-if="showIndicator"
+      v-if="showIndicator()"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

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

@@ -2,7 +2,10 @@ import type { ComponentPublicInstance, VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import type { UIDataTypes, UIMessage, UITools, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
-import type { ButtonProps, ChatMessageProps, ChatMessageSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { ChatMessageProps, ChatMessageSlots } from './ChatMessage.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 type MessageBase<T extends UIMessage[]> = T[number] extends UIMessage<infer M, infer D, infer U> ? UIMessage<M, D, U> : UIMessage<unknown, UIDataTypes, UITools>;
@@ -85,7 +88,7 @@ declare const __VLS_export: <T extends UIMessage[] = UIMessage[]>(__VLS_props: N
     slots: ChatMessagesSlots<T>;
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/ChatPalette.vue

@@ -16,7 +16,7 @@ const _props = defineProps({
 const slots = defineSlots();
 const props = useComponentProps("chatPalette", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPalette || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPalette || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/ChatPrompt.vue

@@ -18,6 +18,7 @@ defineOptions({ inheritAttrs: false });
 const _props = defineProps({
   as: { type: null, required: false, default: "form" },
   placeholder: { type: String, required: false },
+  color: { type: null, required: false },
   variant: { type: null, required: false },
   submitOnEnter: { type: Boolean, required: false, default: true },
   error: { type: Error, required: false },
@@ -42,8 +43,9 @@ const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
 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 || {} })({
+const getProxySlots = () => omit(slots, ["header", "footer", "body"]);
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPrompt || {} })({
+  color: props.color,
   variant: props.variant
 }));
 const textareaRef = useTemplateRef("textareaRef");
@@ -51,11 +53,11 @@ function submit(e) {
   if (model.value.trim() === "") {
     return;
   }
-  emits("submit", e);
+  emits("submit", e ?? new Event("submit"));
 }
 function blur(e) {
   textareaRef.value?.textareaRef?.blur();
-  emits("close", e);
+  emits("close", e ?? new Event("close"));
 }
 const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
   submit(event);
@@ -81,29 +83,38 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+  <Primitive :as="props.as" :data-slot="$attrs['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"
+    <slot
+      name="body"
+      :submit="submit"
+      :close="blur"
       :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']), props.ui)"
-      data-slot="body"
-      :class="ui.body({ class: props.ui?.body })"
-      @keydown="onKeydown"
-      @compositionend="onCompositionEnd"
+      :ui="ui"
     >
-      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </UTextarea>
+      <UTextarea
+        ref="textareaRef"
+        v-model="model"
+        :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']), props.ui)"
+        data-slot="body"
+        :class="ui.body({ class: props.ui?.body })"
+        @keydown="onKeydown"
+        @compositionend="onCompositionEnd"
+      >
+        <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </UTextarea>
+    </slot>
 
     <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />

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

@@ -1,7 +1,7 @@
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt';
-import type { TextareaProps, TextareaSlots } from '../types';
+import type { TextareaProps, TextareaSlots } from './Textarea.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus' | 'autofocusDelay' | 'autoresize' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon' | 'disabled'> {
@@ -15,6 +15,10 @@ export interface ChatPromptProps extends Pick<TextareaProps, 'rows' | 'autofocus
      * @defaultValue t('chatPrompt.placeholder')
      */
     placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: ChatPrompt['variants']['color'];
     /**
      * @defaultValue 'outline'
      */
@@ -36,6 +40,16 @@ export interface ChatPromptEmits {
 export interface ChatPromptSlots extends TextareaSlots {
     header?(props?: {}): VNode[];
     footer?(props?: {}): VNode[];
+    /**
+     * Replace the internal textarea, e.g. to render an [Editor](/docs/components/editor) with mentions.
+     */
+    body?(props: {
+        submit: (event?: Event) => void;
+        close: (event?: Event) => void;
+        placeholder: string;
+        disabled: boolean;
+        ui: any;
+    }): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,7 +1,9 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ButtonSlots } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
@@ -80,18 +82,18 @@ export interface ChatPromptSubmitEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: (event: MouseEvent) => any;
     reload: (event: MouseEvent) => any;
+    stop: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     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

@@ -89,7 +89,7 @@ const statusButtonProps = computed(() => ({
     }
   }
 })[props.status]);
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatPromptSubmit || {} })());
 </script>
 
 <template>

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

@@ -1,7 +1,9 @@
 import type { ChatStatus } from 'ai';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-prompt-submit';
-import type { ButtonProps, ButtonSlots, IconProps, LinkPropsKeys } from '../types';
+import type { ButtonProps, ButtonSlots } from './Button.vue';
+import type { IconProps } from './Icon.vue';
+import type { LinkPropsKeys } from './Link.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
 export interface ChatPromptSubmitProps extends Omit<ButtonProps, LinkPropsKeys | 'icon' | 'color' | 'variant'> {
@@ -80,18 +82,18 @@ export interface ChatPromptSubmitEmits {
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    stop: (event: MouseEvent) => any;
     reload: (event: MouseEvent) => any;
+    stop: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
-    onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
+    onStop?: ((event: MouseEvent) => any) | undefined;
 }>, {
     status: ChatStatus;
-    streamingColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    submittedColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
-    errorColor: "error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
     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.d.vue.ts

@@ -2,7 +2,7 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-reasoning';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
@@ -66,8 +66,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatRe
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     open: boolean;
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
     autoCloseDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;

package/dist/runtime/components/ChatReasoning.vue

@@ -33,7 +33,7 @@ defineSlots();
 const props = useComponentProps("chatReasoning", _props);
 const { t, code } = useLocale();
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatReasoning || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatReasoning || {} })({
   chevron: props.chevron
 }));
 const isControlled = computed(() => props.open !== void 0);

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

@@ -2,7 +2,7 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-reasoning';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
@@ -66,8 +66,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatRe
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     open: boolean;
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
     autoCloseDelay: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;

package/dist/runtime/components/ChatShimmer.vue

@@ -18,7 +18,7 @@ const _props = defineProps({
 });
 const props = useComponentProps("chatShimmer", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatShimmer || {} }));
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatShimmer || {} }));
 const spread = computed(() => props.text.length * props.spread);
 </script>
 

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

@@ -2,7 +2,8 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-tool';
-import type { IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
@@ -56,6 +57,11 @@ export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen'
      * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
      */
     shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    /**
+     * Display a list of actions below the trigger, useful for tool approval flows.
+     * `{ size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
     class?: any;
     ui?: ChatTool['slots'];
 }
@@ -66,6 +72,7 @@ export interface ChatToolSlots {
     default?(props: {
         open: boolean;
     }): VNode[];
+    actions?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -77,8 +84,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
     open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/ChatTool.vue

@@ -3,11 +3,12 @@ import theme from "#build/ui/chat-tool";
 </script>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { useAppConfig } from "#imports";
 import { useComponentProps } from "../composables/useComponentProps";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
 import UIcon from "./Icon.vue";
 import UChatShimmer from "./ChatShimmer.vue";
 const _props = defineProps({
@@ -21,6 +22,7 @@ const _props = defineProps({
   chevron: { type: String, required: false, default: "trailing" },
   chevronIcon: { type: null, required: false },
   shimmer: { type: Object, required: false },
+  actions: { type: Array, required: false },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -32,7 +34,7 @@ const emits = defineEmits(["update:open"]);
 const slots = defineSlots();
 const props = useComponentProps("chatTool", _props);
 const appConfig = useAppConfig();
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatTool || {} })({
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.chatTool || {} })({
   variant: props.variant,
   chevron: props.chevron,
   loading: props.loading
@@ -45,6 +47,11 @@ function setOpen(value) {
   emits("update:open", value);
 }
 const hasContent = computed(() => !!slots.default);
+watch(() => !!props.actions?.length, (hasActions) => {
+  if (hasActions && hasContent.value && props.open === void 0 && props.defaultOpen === void 0) {
+    internalOpen.value = true;
+  }
+}, { immediate: true });
 const resolvedLoadingIcon = computed(() => props.loadingIcon || appConfig.ui.icons?.loading);
 const resolvedIcon = computed(() => props.loading ? resolvedLoadingIcon.value : props.icon);
 const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.chevronDown);
@@ -101,5 +108,16 @@ const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.
         <slot :open="isOpen" />
       </div>
     </CollapsibleContent>
+
+    <div
+      v-if="props.actions?.length || !!slots.actions"
+      data-slot="actions"
+      :data-state="hasContent && isOpen ? 'open' : 'closed'"
+      :class="ui.actions({ class: props.ui?.actions })"
+    >
+      <slot name="actions">
+        <UButton v-for="(action, index) in props.actions" :key="index" size="xs" v-bind="action" />
+      </slot>
+    </div>
   </CollapsibleRoot>
 </template>

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

@@ -2,7 +2,8 @@ import type { CollapsibleRootProps } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/chat-tool';
-import type { IconProps } from '../types';
+import type { ButtonProps } from './Button.vue';
+import type { IconProps } from './Icon.vue';
 import type { ChatShimmerProps } from './ChatShimmer.vue';
 import type { ComponentConfig } from '../types/tv';
 type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
@@ -56,6 +57,11 @@ export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen'
      * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
      */
     shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    /**
+     * Display a list of actions below the trigger, useful for tool approval flows.
+     * `{ size: 'xs' }`{lang="ts-type"}
+     */
+    actions?: ButtonProps[];
     class?: any;
     ui?: ChatTool['slots'];
 }
@@ -66,6 +72,7 @@ export interface ChatToolSlots {
     default?(props: {
         open: boolean;
     }): VNode[];
+    actions?(props?: {}): VNode[];
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -77,8 +84,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatTo
     open: boolean;
     loading: boolean;
     variant: ChatTool["variants"]["variant"];
-    streaming: boolean;
     unmountOnHide: boolean;
+    streaming: boolean;
     chevron: "leading" | "trailing";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -2,7 +2,7 @@ import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
@@ -34,7 +34,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     /**
-     * The icon displayed when checked.
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
@@ -73,7 +73,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: CheckboxSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];

package/dist/runtime/components/Checkbox.vue

@@ -41,19 +41,24 @@ const emits = defineEmits(["change", "update:modelValue"]);
 const props = useComponentProps("checkbox", _props);
 const appConfig = useAppConfig();
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue", "modelValue", "trueValue", "falseValue"), emits);
-const { id: _id, emitFormChange, emitFormInput, size, color, highlight, name, disabled, ariaAttrs } = useFormField(_props);
+const { id: _id, emitFormChange, emitFormInput, size: formFieldSize, color: formFieldColor, highlight: formFieldHighlight, name, disabled: formFieldDisabled, ariaAttrs } = useFormField(_props);
 const id = _id.value ?? useId();
+const color = computed(() => formFieldColor.value ?? props.color);
+const highlight = computed(() => formFieldHighlight.value ?? props.highlight);
+const size = computed(() => formFieldSize.value ?? props.size);
+const disabled = computed(() => formFieldDisabled.value ?? props.disabled);
+const labelIcon = computed(() => props.indicator === "hidden" ? props.icon : void 0);
 const attrs = useAttrs();
 const forwardedAttrs = computed(() => {
   const { "data-state": _, ...rest } = attrs;
   return rest;
 });
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.checkbox || {} })({
-  size: size.value ?? props.size,
-  color: color.value ?? props.color,
+const ui = computed(() => tv({ extend: theme, ...appConfig.ui?.checkbox || {} })({
+  size: size.value,
+  color: color.value,
   variant: props.variant,
   indicator: props.indicator,
-  highlight: highlight.value ?? props.highlight,
+  highlight: highlight.value,
   required: props.required,
   disabled: disabled.value
 }));
@@ -66,7 +71,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">
+  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" :data-slot="$attrs['data-slot'] ?? 'root'" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div data-slot="container" :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -78,7 +83,7 @@ function onUpdate(value) {
         @update:model-value="onUpdate"
       >
         <template #default="{ state }">
-          <CheckboxIndicator data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
+          <CheckboxIndicator v-if="props.indicator !== 'hidden'" data-slot="indicator" :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="state === 'indeterminate'" :name="props.indeterminateIcon || appConfig.ui.icons.minus" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="props.icon || appConfig.ui.icons.check" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -86,7 +91,8 @@ function onUpdate(value) {
       </CheckboxRoot>
     </div>
 
-    <div v-if="props.label || !!slots.label || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+    <div v-if="labelIcon || (props.label || !!slots.label) || (props.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: props.ui?.wrapper })">
+      <UIcon v-if="labelIcon" :name="labelIcon" data-slot="icon" :class="ui.icon({ class: props.ui?.icon })" />
       <component :is="!props.variant || props.variant === 'list' ? Label : 'p'" v-if="props.label || !!slots.label" :for="id" data-slot="label" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="props.label">
           {{ props.label }}

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

@@ -2,7 +2,7 @@ import type { CheckboxRootProps, CheckboxRootEmits } from 'reka-ui';
 import type { VNode } from 'vue';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/checkbox';
-import type { IconProps } from '../types';
+import type { IconProps } from './Icon.vue';
 import type { ButtonHTMLAttributes } from '../types/html';
 import type { ComponentConfig } from '../types/tv';
 type Checkbox = ComponentConfig<typeof theme, AppConfig, 'checkbox'>;
@@ -34,7 +34,7 @@ export interface CheckboxProps<T = boolean> extends Pick<CheckboxRootProps<T>, '
     /** Highlight the ring color like a focus state. */
     highlight?: boolean;
     /**
-     * The icon displayed when checked.
+     * The icon displayed when checked, or above the label when `indicator` is `hidden`.
      * @defaultValue appConfig.ui.icons.check
      * @IconifyIcon
      */
@@ -73,7 +73,7 @@ declare const __VLS_export: <T = boolean>(__VLS_props: NonNullable<Awaited<typeo
     slots: CheckboxSlots;
     emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: "indeterminate" | T) => void);
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];