@nuxt/ui 4.5.1 → 4.6.0

package/dist/runtime/components/ChatReasoning.vue

@@ -0,0 +1,162 @@
+<script>
+import theme from "#build/ui/chat-reasoning";
+</script>
+
+<script setup>
+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 { 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({
+  text: { type: String, required: false },
+  streaming: { type: Boolean, required: false, default: false },
+  duration: { type: Number, required: false },
+  icon: { type: null, required: false },
+  chevron: { type: String, required: false, default: "trailing" },
+  chevronIcon: { type: null, required: false },
+  autoCloseDelay: { type: Number, required: false, default: 500 },
+  shimmer: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: false }
+});
+const emits = defineEmits(["update:open"]);
+defineSlots();
+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
+}));
+const isControlled = computed(() => props.open !== void 0);
+const internalOpen = ref(props.defaultOpen ?? props.streaming);
+const startTime = ref(props.streaming ? Date.now() : null);
+const internalDuration = ref(void 0);
+const autoCloseTimeout = ref(null);
+watch(() => props.streaming, (streaming, wasStreaming) => {
+  if (streaming) {
+    if (autoCloseTimeout.value) {
+      clearTimeout(autoCloseTimeout.value);
+      autoCloseTimeout.value = null;
+    }
+    if (!wasStreaming) {
+      setOpen(true);
+      startTime.value = Date.now();
+    }
+  } else if (wasStreaming) {
+    if (startTime.value !== null) {
+      internalDuration.value = Math.ceil((Date.now() - startTime.value) / 1e3);
+      startTime.value = null;
+    }
+    if (props.autoCloseDelay > 0) {
+      autoCloseTimeout.value = setTimeout(() => {
+        setOpen(false);
+      }, props.autoCloseDelay);
+    }
+  }
+}, { immediate: true });
+const actualDuration = computed(() => props.duration ?? internalDuration.value);
+const thinkingText = computed(() => {
+  if (props.streaming || actualDuration.value === 0) {
+    return t("chatReasoning.thinking");
+  }
+  if (actualDuration.value === void 0) {
+    return t("chatReasoning.thought");
+  }
+  const d = actualDuration.value;
+  const unit = d < 60 ? "second" : "minute";
+  const value = d < 60 ? d : Math.floor(d / 60);
+  const duration = new Intl.NumberFormat(code.value, { style: "unit", unit, unitDisplay: "long" }).format(value);
+  return t("chatReasoning.thoughtFor", { duration });
+});
+const resolvedOpen = computed(() => isControlled.value ? props.open : internalOpen.value);
+function setOpen(value) {
+  if (autoCloseTimeout.value) {
+    clearTimeout(autoCloseTimeout.value);
+    autoCloseTimeout.value = null;
+  }
+  internalOpen.value = value;
+  emits("update:open", value);
+}
+onUnmounted(() => {
+  if (autoCloseTimeout.value) {
+    clearTimeout(autoCloseTimeout.value);
+  }
+});
+const hasContent = computed(() => !!props.text || props.streaming);
+const chevronIconName = computed(() => props.chevronIcon || appConfig.ui.icons?.chevronDown);
+const bodyRef = useTemplateRef("bodyRef");
+const { style: scrollShadowStyle } = useScrollShadow(bodyRef);
+watch(() => props.text, () => {
+  if (!props.streaming || !bodyRef.value) return;
+  const el = bodyRef.value;
+  const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+  if (distanceFromBottom < 50) {
+    nextTick(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  }
+});
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-if="hasContent"
+    v-slot="{ open: isOpen }"
+    :open="resolvedOpen"
+    :disabled="disabled"
+    :unmount-on-hide="unmountOnHide"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @update:open="setOpen"
+  >
+    <CollapsibleTrigger as-child :disabled="!hasContent">
+      <button
+        type="button"
+        data-slot="trigger"
+        :class="ui.trigger({ class: uiProp?.trigger })"
+      >
+        <span v-if="icon || hasContent && chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+          <UIcon
+            v-if="icon"
+            :name="icon"
+            data-slot="leadingIcon"
+            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+          />
+          <UIcon
+            v-if="hasContent && chevron === 'leading'"
+            :name="chevronIconName"
+            data-slot="chevronIcon"
+            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !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>
+
+        <UIcon
+          v-if="hasContent && chevron === 'trailing'"
+          :name="chevronIconName"
+          data-slot="trailingIcon"
+          :class="ui.trailingIcon({ class: uiProp?.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">
+        <slot :open="isOpen">
+          {{ text }}
+        </slot>
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

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

@@ -0,0 +1,78 @@
+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 { ChatShimmerProps } from './ChatShimmer.vue';
+import type { ComponentConfig } from '../types/tv';
+type ChatReasoning = ComponentConfig<typeof theme, AppConfig, 'chatReasoning'>;
+export interface ChatReasoningProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The reasoning text content to display.
+     */
+    text?: string;
+    /**
+     * Whether the reasoning content is currently streaming.
+     * @defaultValue false
+     */
+    streaming?: boolean;
+    /**
+     * The duration in seconds that the AI spent reasoning.
+     * If not provided, it will be calculated automatically based on streaming time.
+     */
+    duration?: number;
+    /**
+     * The icon displayed next to the trigger.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The position of the chevron icon.
+     * @defaultValue 'trailing'
+     */
+    chevron?: 'leading' | 'trailing';
+    /**
+     * The icon displayed as the chevron.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    chevronIcon?: IconProps['name'];
+    /**
+     * The delay in milliseconds before auto-closing when streaming ends.
+     * Set to `0` to disable auto-close.
+     * @defaultValue 500
+     */
+    autoCloseDelay?: number;
+    /**
+     * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
+     */
+    shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    class?: any;
+    ui?: ChatReasoning['slots'];
+}
+export interface ChatReasoningEmits {
+    'update:open': [value: boolean];
+}
+export interface ChatReasoningSlots {
+    default?(props: {
+        open: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatReasoningProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChatReasoningProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: boolean;
+    streaming: boolean;
+    unmountOnHide: boolean;
+    chevron: "leading" | "trailing";
+    autoCloseDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatReasoningSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-shimmer';
+import type { ComponentConfig } from '../types/tv';
+type ChatShimmer = ComponentConfig<typeof theme, AppConfig, 'chatShimmer'>;
+export interface ChatShimmerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'span'
+     */
+    as?: any;
+    /**
+     * The text to display with the shimmer effect.
+     */
+    text: string;
+    /**
+     * The duration of the shimmer animation in seconds.
+     * @defaultValue 2
+     */
+    duration?: number;
+    /**
+     * The spread multiplier for the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.
+     * @defaultValue 2
+     */
+    spread?: number;
+    class?: any;
+    ui?: ChatShimmer['slots'];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ChatShimmerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatShimmerProps> & Readonly<{}>, {
+    as: any;
+    duration: number;
+    spread: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/ChatShimmer.vue

@@ -0,0 +1,37 @@
+<script>
+import theme from "#build/ui/chat-shimmer";
+</script>
+
+<script setup>
+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, default: "span" },
+  text: { type: String, required: true },
+  duration: { type: Number, required: false, default: 2 },
+  spread: { type: Number, required: false, default: 2 },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
+});
+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"
+    :style="{
+  '--spread': `${spread}px`,
+  '--duration': `${duration}s`
+}"
+    data-slot="base"
+    :class="ui({ class: [uiProp?.base, props.class] })"
+  >
+    {{ text }}
+  </Primitive>
+</template>

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

@@ -0,0 +1,34 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-shimmer';
+import type { ComponentConfig } from '../types/tv';
+type ChatShimmer = ComponentConfig<typeof theme, AppConfig, 'chatShimmer'>;
+export interface ChatShimmerProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'span'
+     */
+    as?: any;
+    /**
+     * The text to display with the shimmer effect.
+     */
+    text: string;
+    /**
+     * The duration of the shimmer animation in seconds.
+     * @defaultValue 2
+     */
+    duration?: number;
+    /**
+     * The spread multiplier for the shimmer highlight. The actual spread is computed as `text.length * spread` in pixels.
+     * @defaultValue 2
+     */
+    spread?: number;
+    class?: any;
+    ui?: ChatShimmer['slots'];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ChatShimmerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatShimmerProps> & Readonly<{}>, {
+    as: any;
+    duration: number;
+    spread: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,88 @@
+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 { ChatShimmerProps } from './ChatShimmer.vue';
+import type { ComponentConfig } from '../types/tv';
+type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
+export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The text content to display.
+     */
+    text?: string;
+    /**
+     * The suffix text displayed after the main text.
+     */
+    suffix?: string;
+    /**
+     * The icon displayed next to the trigger.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * Whether the tool is in a loading state.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * The icon displayed when loading.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Whether the tool content is currently streaming.
+     * @defaultValue false
+     */
+    streaming?: boolean;
+    /**
+     * The visual variant of the tool display.
+     * @defaultValue 'inline'
+     */
+    variant?: ChatTool['variants']['variant'];
+    /**
+     * The position of the chevron icon.
+     * @defaultValue 'trailing'
+     */
+    chevron?: 'leading' | 'trailing';
+    /**
+     * The icon displayed as the chevron.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    chevronIcon?: IconProps['name'];
+    /**
+     * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
+     */
+    shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    class?: any;
+    ui?: ChatTool['slots'];
+}
+export interface ChatToolEmits {
+    'update:open': [value: boolean];
+}
+export interface ChatToolSlots {
+    default?(props: {
+        open: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatToolProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChatToolProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    loading: boolean;
+    variant: ChatTool["variants"]["variant"];
+    open: boolean;
+    streaming: boolean;
+    unmountOnHide: boolean;
+    chevron: "leading" | "trailing";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatTool.vue

@@ -0,0 +1,105 @@
+<script>
+import theme from "#build/ui/chat-tool";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UChatShimmer from "./ChatShimmer.vue";
+const props = defineProps({
+  text: { type: String, required: false },
+  suffix: { type: String, required: false },
+  icon: { type: null, required: false },
+  loading: { type: Boolean, required: false, default: false },
+  loadingIcon: { type: null, required: false },
+  streaming: { type: Boolean, required: false, default: false },
+  variant: { type: null, required: false, default: "inline" },
+  chevron: { type: String, required: false, default: "trailing" },
+  chevronIcon: { type: null, required: false },
+  shimmer: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: false }
+});
+const emits = defineEmits(["update:open"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatTool", props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatTool || {} })({
+  variant: props.variant,
+  chevron: props.chevron,
+  loading: props.loading
+}));
+const isControlled = computed(() => props.open !== void 0);
+const internalOpen = ref(props.defaultOpen ?? false);
+const resolvedOpen = computed(() => isControlled.value ? props.open : internalOpen.value);
+function setOpen(value) {
+  internalOpen.value = value;
+  emits("update:open", value);
+}
+const hasContent = computed(() => !!slots.default);
+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);
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open: isOpen }"
+    :open="resolvedOpen"
+    :disabled="disabled"
+    :unmount-on-hide="unmountOnHide"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @update:open="setOpen"
+  >
+    <CollapsibleTrigger as-child :disabled="!hasContent">
+      <button
+        type="button"
+        data-slot="trigger"
+        :class="ui.trigger({ class: uiProp?.trigger })"
+      >
+        <span v-if="resolvedIcon || hasContent && chevron === 'leading'" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">
+          <UIcon
+            v-if="resolvedIcon"
+            :name="resolvedIcon"
+            data-slot="leadingIcon"
+            :class="ui.leadingIcon({ class: uiProp?.leadingIcon, alone: !(hasContent && chevron === 'leading') })"
+          />
+          <UIcon
+            v-if="hasContent && chevron === 'leading'"
+            :name="chevronIconName"
+            data-slot="chevronIcon"
+            :class="ui.chevronIcon({ class: uiProp?.chevronIcon, alone: !resolvedIcon })"
+          />
+        </span>
+
+        <span data-slot="label" :class="ui.label({ class: uiProp?.label })">
+          <UChatShimmer v-if="streaming && text" :text="text" v-bind="props.shimmer" />
+          <template v-else>{{ text }}</template>
+          <span v-if="suffix" data-slot="suffix" :class="ui.suffix({ class: uiProp?.suffix })">{{ suffix }}</span>
+        </span>
+
+        <UIcon
+          v-if="hasContent && chevron === 'trailing'"
+          :name="chevronIconName"
+          data-slot="trailingIcon"
+          :class="ui.trailingIcon({ class: uiProp?.trailingIcon })"
+        />
+      </button>
+    </CollapsibleTrigger>
+
+    <CollapsibleContent data-slot="content" :class="ui.content({ class: uiProp?.content })">
+      <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
+        <slot :open="isOpen" />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

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

@@ -0,0 +1,88 @@
+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 { ChatShimmerProps } from './ChatShimmer.vue';
+import type { ComponentConfig } from '../types/tv';
+type ChatTool = ComponentConfig<typeof theme, AppConfig, 'chatTool'>;
+export interface ChatToolProps extends Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The text content to display.
+     */
+    text?: string;
+    /**
+     * The suffix text displayed after the main text.
+     */
+    suffix?: string;
+    /**
+     * The icon displayed next to the trigger.
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * Whether the tool is in a loading state.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * The icon displayed when loading.
+     * @defaultValue appConfig.ui.icons.loading
+     * @IconifyIcon
+     */
+    loadingIcon?: IconProps['name'];
+    /**
+     * Whether the tool content is currently streaming.
+     * @defaultValue false
+     */
+    streaming?: boolean;
+    /**
+     * The visual variant of the tool display.
+     * @defaultValue 'inline'
+     */
+    variant?: ChatTool['variants']['variant'];
+    /**
+     * The position of the chevron icon.
+     * @defaultValue 'trailing'
+     */
+    chevron?: 'leading' | 'trailing';
+    /**
+     * The icon displayed as the chevron.
+     * @defaultValue appConfig.ui.icons.chevronDown
+     * @IconifyIcon
+     */
+    chevronIcon?: IconProps['name'];
+    /**
+     * Customize the [`ChatShimmer`](https://ui.nuxt.com/docs/components/chat-shimmer) component when streaming.
+     */
+    shimmer?: Partial<Omit<ChatShimmerProps, 'text'>>;
+    class?: any;
+    ui?: ChatTool['slots'];
+}
+export interface ChatToolEmits {
+    'update:open': [value: boolean];
+}
+export interface ChatToolSlots {
+    default?(props: {
+        open: boolean;
+    }): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatToolProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChatToolProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    loading: boolean;
+    variant: ChatTool["variants"]["variant"];
+    open: boolean;
+    streaming: boolean;
+    unmountOnHide: boolean;
+    chevron: "leading" | "trailing";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatToolSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};