@eslamdevui/ui 3.3.3 → 4.0.0-beta

package/dist/runtime/components/ChatMessages.vue

@@ -3,20 +3,22 @@ import theme from "#build/ui/chat-messages";
 </script>
 
 <script setup>
-import { ref, computed, watch, nextTick, onMounted } from "vue";
+import { ref, computed, watch, nextTick, toRef, onMounted } from "vue";
 import { Presence } from "reka-ui";
+import { defu } from "defu";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
-import { omit } from "../utils";
 import { useAppConfig } from "#imports";
+import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import UChatMessage from "./ChatMessage.vue";
+import UButton from "./Button.vue";
 const props = defineProps({
   messages: { type: Array, required: false },
-  status: { type: null, required: false },
+  status: { type: String, required: false },
   shouldAutoScroll: { type: Boolean, required: false, default: false },
   shouldScrollToBottom: { type: Boolean, required: false, default: true },
   autoScroll: { type: [Boolean, Object], required: false, default: true },
-  autoScrollIcon: { type: String, required: false },
+  autoScrollIcon: { type: [String, Object], required: false },
   user: { type: Object, required: false },
   assistant: { type: Object, required: false },
   compact: { type: Boolean, required: false },
@@ -25,32 +27,15 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const slots = defineSlots();
-const proxySlots = omit(slots, ["default", "indicator", "viewport"]);
+const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
-function getValidVariant(variant) {
-  const allowed = ["solid", "outline", "soft", "subtle", "naked"];
-  if (allowed.includes(variant)) {
-    return variant;
-  }
-  return "soft";
-}
-const userProps = computed(() => ({
-  ...props.user,
-  variant: getValidVariant(props.user?.variant ?? void 0),
-  side: props.user?.side ?? "right"
-}));
-const assistantProps = computed(() => ({
-  ...props.assistant,
-  variant: getValidVariant(props.assistant?.variant ?? void 0) === "soft" ? "naked" : getValidVariant(props.assistant?.variant ?? void 0),
-  side: props.assistant?.side ?? "left"
+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 || {} })({
+  compact: props.compact
 }));
-const ui = computed(
-  () => tv({ extend: tv(theme), ...appConfig.ui?.chatMessages || {} })({
-    compact: props.compact
-  })
-);
-const el = ref();
-const parent = ref();
+const el = ref(null);
+const parent = ref(null);
 const messagesRefs = ref(/* @__PURE__ */ new Map());
 const showAutoScroll = ref(false);
 const lastMessageHeight = ref(0);
@@ -152,7 +137,7 @@ function updateLastMessageHeight() {
   lastMessageHeight.value = Math.max(parentHeight.value - lastMessageEl.offsetHeight - spacingOffset, 0);
 }
 onMounted(() => {
-  parent.value = getScrollParent(el.value || null);
+  parent.value = getScrollParent(el.value);
   if (!parent.value) {
     return;
   }
@@ -181,7 +166,7 @@ onMounted(() => {
         :ref="(el) => registerMessageRef(message.id, el)"
         :compact="compact"
       >
-        <template v-for="(_, name) in proxySlots" #[name]>
+        <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" v-bind="{ message }" />
         </template>
       </UChatMessage>
@@ -190,19 +175,18 @@ onMounted(() => {
     <UChatMessage
       v-if="status === 'submitted'"
       id="indicator"
-      content=""
       role="assistant"
-      v-bind="{ ...assistantProps, actions: void 0 }"
+      v-bind="{ ...assistantProps, actions: void 0, parts: [] }"
       :compact="compact"
     >
       <template #content>
-        <div :class="ui.indicator({ class: props.ui?.indicator })">
-          <slot name="indicator">
+        <slot name="indicator">
+          <div :class="ui.indicator({ class: props.ui?.indicator })">
             <span />
             <span />
             <span />
-          </slot>
-        </div>
+          </div>
+        </slot>
       </template>
     </UChatMessage>
 

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

@@ -1,11 +1,12 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { ButtonProps, ComponentConfig, ChatMessageProps } from '../types';
-import type { Message, UseChatHelpers } from '@ai-sdk/vue';
+import type { UIMessage, ChatStatus } from 'ai';
 import theme from '#build/ui/chat-messages';
+import type { ButtonProps, ChatMessageProps, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
 type ChatMessages = ComponentConfig<typeof theme, AppConfig, 'chatMessages'>;
 export interface ChatMessagesProps {
-    messages?: Message[];
-    status?: UseChatHelpers['status']['value'];
+    messages?: UIMessage[];
+    status?: ChatStatus;
     /**
      * Whether to automatically scroll to the bottom when a message is streaming.
      * @defaultValue false
@@ -27,7 +28,7 @@ export interface ChatMessagesProps {
      * @defaultValue appConfig.ui.icons.arrowDown
      * @IconifyIcon
      */
-    autoScrollIcon?: string;
+    autoScrollIcon?: IconProps['name'];
     /**
      * The `user` messages props.
      * `{ side: 'right', variant: 'soft' }`{lang="ts-type"}
@@ -59,16 +60,16 @@ export interface ChatMessagesSlots {
         onClick: () => void;
     }): any;
     content(props: {
-        message: Message;
+        message: UIMessage;
     }): any;
     leading(props: {
-        message: Message;
+        message: UIMessage;
     }): any;
     actions(props: {
-        message: Message;
+        message: UIMessage;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatMessagesProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatMessagesProps> & Readonly<{}>, {
     autoScroll: boolean | Partial<ButtonProps>;
     shouldAutoScroll: boolean;
     shouldScrollToBottom: boolean;

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

@@ -0,0 +1,24 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-palette';
+import type { ComponentConfig } from '../types/tv';
+type ChatPalette = ComponentConfig<typeof theme, AppConfig, 'chatPalette'>;
+export interface ChatPaletteProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    ui?: ChatPalette['slots'];
+}
+export interface ChatPaletteSlots {
+    default(props?: {}): any;
+    prompt(props?: {}): any;
+}
+declare const _default: __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>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,6 +1,6 @@
-import theme from '#build/ui/chat-palette';
 import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig } from '../types';
+import theme from '#build/ui/chat-palette';
+import type { ComponentConfig } from '../types/tv';
 type ChatPalette = ComponentConfig<typeof theme, AppConfig, 'chatPalette'>;
 export interface ChatPaletteProps {
     /**
@@ -15,7 +15,7 @@ export interface ChatPaletteSlots {
     default(props?: {}): any;
     prompt(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPaletteProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChatPaletteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPaletteSlots>;
+declare const _default: __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>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,61 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt';
+import type { TextareaProps, TextareaSlots } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
+export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'form'
+     */
+    as?: any;
+    /**
+     * The placeholder text for the textarea.
+     * @defaultValue t('chatPrompt.placeholder')
+     */
+    placeholder?: string;
+    autofocus?: TextareaProps['autofocus'];
+    autoresize?: TextareaProps['autoresize'];
+    rows?: TextareaProps['rows'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: ChatPrompt['variants']['variant'];
+    error?: Error;
+    class?: any;
+    ui?: ChatPrompt['slots'] & TextareaProps['ui'];
+}
+export interface ChatPromptEmits {
+    submit: [event: Event];
+    close: [event: Event];
+}
+export interface ChatPromptSlots extends TextareaSlots {
+    header(props?: {}): any;
+    footer(props?: {}): any;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
+    modelValue?: string;
+}, {
+    textareaRef: HTMLTextAreaElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (event: Event) => any;
+    submit: (event: Event) => any;
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptProps & {
+    modelValue?: string;
+}> & Readonly<{
+    onClose?: ((event: Event) => any) | undefined;
+    onSubmit?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    as: any;
+    autofocus: boolean;
+    rows: number;
+    autoresize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPrompt.vue

@@ -7,9 +7,10 @@ import { computed, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
-import { useLocalePro } from "../composables/useLocalePro";
-import { transformUI, omit } from "../utils";
+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({
   as: { type: null, required: false, default: "form" },
@@ -25,30 +26,32 @@ const props = defineProps({
 const emits = defineEmits(["submit", "close"]);
 const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
-const { t } = useLocalePro();
+const { t } = useLocale();
 const appConfig = useAppConfig();
 const textareaProps = useForwardProps(reactivePick(props, "autofocus", "autoresize", "rows"));
-const proxySlots = omit(slots, ["header", "footer"]);
-const uiPro = computed(
-  () => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
-    variant: props.variant
-  })
-);
-const textarea = useTemplateRef("textarea");
-const submit = (e) => {
-  if (!model.value?.trim()) return;
+const getProxySlots = () => omit(slots, ["header", "footer"]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPrompt || {} })({
+  variant: props.variant
+}));
+function submit(e) {
+  if (model.value.trim() === "") {
+    return;
+  }
   emits("submit", e);
-};
-const blur = (e) => {
+}
+function blur(e) {
   textarea.value?.textareaRef?.blur();
   emits("close", e);
-};
-defineExpose({ textareaRef: textarea.value?.textareaRef });
+}
+const textarea = useTemplateRef("textarea");
+defineExpose({
+  textareaRef: textarea.value?.textareaRef
+});
 </script>
 
 <template>
-  <Primitive :as="as" :class="uiPro.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" :class="uiPro.header({ class: props.ui?.header })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>
 
@@ -59,17 +62,17 @@ defineExpose({ textareaRef: textarea.value?.textareaRef });
       :disabled="Boolean(error)"
       variant="none"
       v-bind="{ ...textareaProps, ...$attrs }"
-      :ui="transformUI(omit(uiPro, ['root', 'body', 'header', 'footer']), props.ui)"
-      :class="uiPro.body({ class: props.ui?.body })"
+      :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), props.ui)"
+      :class="ui.body({ class: props.ui?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
     >
-      <template v-for="(_, name) in proxySlots" #[name]="slotData">
+      <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
         <slot :name="name" v-bind="slotData" />
       </template>
     </UTextarea>
 
-    <div v-if="!!slots.footer" :class="uiPro.footer({ class: props.ui?.footer })">
+    <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

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

@@ -1,7 +1,8 @@
 import type { AppConfig } from '@nuxt/schema';
-import type { TextareaProps, TextareaSlots, ComponentConfig } from '../types';
 import theme from '#build/ui/chat-prompt';
-type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt', 'ui'>;
+import type { TextareaProps, TextareaSlots } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPrompt = ComponentConfig<typeof theme, AppConfig, 'chatPrompt'>;
 export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps, 'autofocusDelay' | 'autoresizeDelay' | 'maxrows' | 'icon' | 'avatar' | 'loading' | 'loadingIcon'> {
     /**
      * The element or component this component should render as.
@@ -25,7 +26,8 @@ export interface ChatPromptProps extends /** @vue-ignore */ Pick<TextareaProps,
     ui?: ChatPrompt['slots'] & TextareaProps['ui'];
 }
 export interface ChatPromptEmits {
-    (e: 'submit' | 'close', event: Event): void;
+    submit: [event: Event];
+    close: [event: Event];
 }
 export interface ChatPromptSlots extends TextareaSlots {
     header(props?: {}): any;
@@ -34,12 +36,11 @@ export interface ChatPromptSlots extends TextareaSlots {
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptProps & {
     modelValue?: string;
 }, {
-    textareaRef: any;
+    textareaRef: HTMLTextAreaElement | null | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-} & {
     close: (event: Event) => any;
     submit: (event: Event) => any;
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ChatPromptProps & {
     modelValue?: string;
 }> & Readonly<{
@@ -49,8 +50,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPrompt
 }>, {
     as: any;
     autofocus: boolean;
-    autoresize: boolean;
     rows: number;
+    autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChatPromptSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -0,0 +1,100 @@
+import type { ChatStatus } from 'ai';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/chat-prompt-submit';
+import type { ButtonProps, ButtonSlots, IconProps } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type ChatPromptSubmit = ComponentConfig<typeof theme, AppConfig, 'chatPromptSubmit'>;
+export interface ChatPromptSubmitProps extends /** @vue-ignore */ Pick<ButtonProps, 'size' | 'label'> {
+    status?: ChatStatus;
+    /**
+     * The icon displayed in the button when the status is `ready`.
+     * @defaultValue appConfig.ui.icons.arrowUp
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `ready`.
+     * @defaultValue 'primary'
+     */
+    color?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `ready`.
+     * @defaultValue 'solid'
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `streaming`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    streamingIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `streaming`.
+     * @defaultValue 'neutral'
+     */
+    streamingColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `streaming`.
+     * @defaultValue 'subtle'
+     */
+    streamingVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `submitted`.
+     * @defaultValue appConfig.ui.icons.stop
+     * @IconifyIcon
+     */
+    submittedIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `submitted`.
+     * @defaultValue 'neutral'
+     */
+    submittedColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `submitted`.
+     * @defaultValue 'subtle'
+     */
+    submittedVariant?: ButtonProps['variant'];
+    /**
+     * The icon displayed in the button when the status is `error`.
+     * @defaultValue appConfig.ui.icons.reload
+     * @IconifyIcon
+     */
+    errorIcon?: IconProps['name'];
+    /**
+     * The color of the button when the status is `error`.
+     * @defaultValue 'error'
+     */
+    errorColor?: ButtonProps['color'];
+    /**
+     * The variant of the button when the status is `error`.
+     * @defaultValue 'soft'
+     */
+    errorVariant?: ButtonProps['variant'];
+    ui?: ChatPromptSubmit['slots'] & ButtonProps['ui'];
+    class?: any;
+}
+export interface ChatPromptSubmitEmits {
+    stop: [];
+    reload: [];
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ChatPromptSubmitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    stop: () => any;
+    reload: () => any;
+}, string, import("vue").PublicProps, Readonly<ChatPromptSubmitProps> & Readonly<{
+    onStop?: (() => any) | undefined;
+    onReload?: (() => any) | undefined;
+}>, {
+    status: ChatStatus;
+    streamingColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    streamingVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    submittedColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    submittedVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    errorColor: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral";
+    errorVariant: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -5,67 +5,72 @@ import theme from "#build/ui/chat-prompt-submit";
 <script setup>
 import { computed } from "vue";
 import { useAppConfig } from "#imports";
-import { useLocalePro } from "../composables/useLocalePro";
+import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
+import UButton from "./Button.vue";
 const props = defineProps({
-  status: { type: null, required: false, default: "ready" },
-  icon: { type: String, required: false },
+  status: { type: String, required: false, default: "ready" },
+  icon: { type: [String, Object], required: false },
   color: { type: null, required: false },
   variant: { type: null, required: false },
-  streamingIcon: { type: String, required: false },
+  streamingIcon: { type: [String, Object], required: false },
   streamingColor: { type: null, required: false, default: "neutral" },
   streamingVariant: { type: null, required: false, default: "subtle" },
-  submittedIcon: { type: String, required: false },
+  submittedIcon: { type: [String, Object], required: false },
   submittedColor: { type: null, required: false, default: "neutral" },
   submittedVariant: { type: null, required: false, default: "subtle" },
-  errorIcon: { type: String, required: false },
+  errorIcon: { type: [String, Object], required: false },
   errorColor: { type: null, required: false, default: "error" },
   errorVariant: { type: null, required: false, default: "soft" },
   ui: { type: void 0, required: false },
   class: { type: null, required: false }
 });
-const emit = defineEmits(["stop", "reload"]);
+const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
-const { t } = useLocalePro();
+const { t } = useLocale();
 const appConfig = useAppConfig();
-const buttonProps = computed(() => {
-  return {
-    ready: {
-      icon: props.icon || appConfig.ui.icons.arrowUp,
-      color: props.color ?? "primary",
-      variant: props.variant ?? "solid",
-      type: "submit"
-    },
-    submitted: {
-      icon: props.submittedIcon || appConfig.ui.icons.stop,
-      color: props.submittedColor,
-      variant: props.submittedVariant,
-      onClick: () => emit("stop")
-    },
-    streaming: {
-      icon: props.streamingIcon || appConfig.ui.icons.stop,
-      color: props.streamingColor,
-      variant: props.streamingVariant,
-      onClick: () => emit("stop")
-    },
-    error: {
-      icon: props.errorIcon || appConfig.ui.icons.reload,
-      color: props.errorColor,
-      variant: props.errorVariant,
-      onClick: () => emit("reload")
+const buttonProps = computed(() => ({
+  ready: {
+    icon: props.icon || appConfig.ui.icons.arrowUp,
+    color: props.color,
+    variant: props.variant,
+    type: "submit"
+  },
+  submitted: {
+    icon: props.submittedIcon || appConfig.ui.icons.stop,
+    color: props.submittedColor,
+    variant: props.submittedVariant,
+    onClick() {
+      emits("stop");
     }
-  }[props.status || "ready"];
-});
-const uiPro = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
+  },
+  streaming: {
+    icon: props.streamingIcon || appConfig.ui.icons.stop,
+    color: props.streamingColor,
+    variant: props.streamingVariant,
+    onClick() {
+      emits("stop");
+    }
+  },
+  error: {
+    icon: props.errorIcon || appConfig.ui.icons.reload,
+    color: props.errorColor,
+    variant: props.errorVariant,
+    onClick() {
+      emits("reload");
+    }
+  }
+})[props.status]);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatPromptSubmit || {} })());
 </script>
 
 <template>
   <UButton
     :aria-label="t('chatPromptSubmit.label')"
     v-bind="buttonProps"
-    :class="uiPro.base({ class: [props.ui?.base, props.class] })"
-    :ui="transformUI(uiPro, props.ui)"
+    :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" />