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

[PBK-B]

[ChatPromptSubmit] emits provides event externally so that external events can be consumed

🔗 Linked issue

The problem is explained in the description.

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Reproduction: https://codesandbox.io/p/devbox/sweet-dirac-7hpdy2?file=%2Fapp%2Fapp.tsx

Due to the event bubble, when UChatPrompt nests UChatPromptSubmit, the onStop and onReload of UChatPromptSubmit do not consume the event, which will bubble to the onSubmit event of UChatPrompt, causing some side effects (onSubmit event is called multiple times as shown in the figure below).

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5400

commit: b82ad4e

[benjamincanac]

I'm having a hard-time understand your issue here, do you have the issue in a real environment when using @ai-sdk/vue?

Also, I tried your changes locally but adding this event still logs handleSubmit when pressing the stop button 🤔

[PBK-B]

I'm having a hard-time understand your issue here, do you have the issue in a real environment when using @ai-sdk/vue?

Also, I tried your changes locally but adding this event still logs handleSubmit when pressing the stop button 🤔

@benjamincanac This has nothing to do with @ai-sdk/vue. In my submission, I did not directly consume the click event (to avoid destructive updates). Instead, I chose to send the obtained event: MouseEvent through stop and reload emits in ChatPromptSubmit, so that developers can decide whether they need to call event.preventDefault to prevent the browser from triggering the submit event of the form.

To put it simply, onClick implemented in ChatPromptSubmit will call stop and reload based on the message status but will not send the event instance. Developers cannot implement operations such as preventing bubbling and consuming default events in onStop and onReload implemented by themselves.

The final effect is that users will be able to call event.preventDefault in handleStop and handleReload. This will prevent handleSubmit from being triggered. You can try the following sample code.

import { defineComponent, ref } from "vue";
import { type ChatPromptSubmitProps } from "@nuxt/ui/components/ChatPromptSubmit.vue";
import { UChatPrompt, UChatPromptSubmit } from "#components";

let timer: any;
export default defineComponent({
  setup() {
    const input = ref("value");
    const status = ref<ChatPromptSubmitProps["status"]>("ready");
    const handleSubmit = (e: Event) => {
      e.preventDefault();
      console.log("handleSubmit");
      if (timer) clearTimeout(timer);
      status.value = "streaming";
      timer = setTimeout(() => {
        status.value = "error";
      }, 3600);
    };
    const handleStop = (event) => {
      console.log("handleStop");
      status.value = "ready";
      event.preventDefault(); // this is the key place
    };
    const handleReload = (event) => {
      console.log("handleReload");
      status.value = "ready";
      event.preventDefault(); // this is the key place
    };

    return () => {
      return (
        <div>
          <UChatPrompt
            modelValue={input.value}
            onSubmit={handleSubmit}
            style={{ height: "5rem", paddingLeft: "0" }}
          >
            {{
              footer: () => (
                <div class="chat_prompt_buttons">
                  <div style={{ flex: 1 }}></div>
                  <UChatPromptSubmit
                    status={status.value} // simulation state
                    onStop={handleStop}
                    onReload={handleReload}
                  />
                </div>
              ),
            }}
          </UChatPrompt>
        </div>
      );
    };
  },
});

[PBK-B]

@benjamincanac is there anything I can do?