fix(ChatPromptSubmit): proxy event to stop and reload emits (#5400)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

Author: PBK-B

docs/content/docs/2.components/chat-messages.md

@@ -435,7 +435,7 @@ function onSubmit() {
     <template #footer>
       <UContainer class="pb-4 sm:pb-6">
         <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
-          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
         </UChatPrompt>
       </UContainer>
     </template>

docs/content/docs/2.components/chat-prompt-submit.md

@@ -284,7 +284,7 @@ function onSubmit() {
     <template #footer>
       <UContainer class="pb-4 sm:pb-6">
         <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
-          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
         </UChatPrompt>
       </UContainer>
     </template>

docs/content/docs/2.components/chat-prompt.md

@@ -129,7 +129,7 @@ function onSubmit() {
     <template #footer>
       <UContainer class="pb-4 sm:pb-6">
         <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
-          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
+          <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
         </UChatPrompt>
       </UContainer>
     </template>

playgrounds/nuxt/app/pages/chat.vue

@@ -74,7 +74,7 @@ function onSubmit() {
       class="sticky bottom-0"
       @submit="onSubmit"
     >
-      <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
+      <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
     </UChatPrompt>
   </div>
 </template>

src/runtime/components/ChatPromptSubmit.vue

@@ -78,8 +78,8 @@ export interface ChatPromptSubmitProps extends Omit<ButtonProps, 'icon' | 'color
 }
 
 export interface ChatPromptSubmitEmits {
-  stop: []
-  reload: []
+  stop: [event: MouseEvent]
+  reload: [event: MouseEvent]
 }
 </script>
 
@@ -123,27 +123,27 @@ const statusButtonProps = computed(() => ({
     icon: props.submittedIcon || appConfig.ui.icons.stop,
     color: props.submittedColor,
     variant: props.submittedVariant,
-    onClick() {
-      emits('stop')
+    onClick(e) {
+      emits('stop', e)
     }
   },
   streaming: {
     icon: props.streamingIcon || appConfig.ui.icons.stop,
     color: props.streamingColor,
     variant: props.streamingVariant,
-    onClick() {
-      emits('stop')
+    onClick(e) {
+      emits('stop', e)
     }
   },
   error: {
     icon: props.errorIcon || appConfig.ui.icons.reload,
     color: props.errorColor,
     variant: props.errorVariant,
-    onClick() {
-      emits('reload')
+    onClick(e) {
+      emits('reload', e)
     }
   }
-})[props.status])
+} satisfies { [key: string]: ButtonProps })[props.status])
 
 // eslint-disable-next-line vue/no-dupe-keys
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.chatPromptSubmit || {}) })())