feat (ui): make event in handleSubmit optional (#2073)

.changeset/brave-nails-guess.md

@@ -0,0 +1,9 @@
+---
+'@ai-sdk/svelte': patch
+'@ai-sdk/react': patch
+'@ai-sdk/solid': patch
+'ai': patch
+'@ai-sdk/vue': patch
+---
+
+feat (ui): make event in handleSubmit optional

content/docs/07-reference/ai-sdk-ui/01-use-chat.mdx

@@ -185,7 +185,7 @@ Allows you to easily create a conversational user interface for your chatbot app
     },
     {
       name: 'handleSubmit',
-      type: '(event: React.FormEvent<HTMLFormElement>, chatRequestOptions?: ChatRequestOptions) => void',
+      type: '(event?: { preventDefault?: () => void }, chatRequestOptions?: ChatRequestOptions) => void',
       description:
         'Form submission handler that automatically resets the input field and appends a user message. You can use the `options` parameter to send additional data, headers and more to the server.',
       properties: [

content/docs/07-reference/ai-sdk-ui/02-use-completion.mdx

@@ -167,7 +167,7 @@ Allows you to create text completion based capabilities for your application. It
     },
     {
       name: 'handleSubmit',
-      type: '(event: React.FormEvent<HTMLFormElement>) => void',
+      type: '(event?: { preventDefault?: () => void }) => void',
       description:
         'Form submission handler that automatically resets the input field and appends a user message.',
     },

packages/core/svelte/use-chat.ts

@@ -51,8 +51,13 @@ export type UseChatHelpers = {
   setMessages: (messages: Message[]) => void;
   /** The current value of the input */
   input: Writable<string>;
+
   /** Form submission handler to automatically reset input and append a user message  */
-  handleSubmit: (e: any, chatRequestOptions?: ChatRequestOptions) => void;
+  handleSubmit: (
+    event?: { preventDefault?: () => void },
+    chatRequestOptions?: ChatRequestOptions,
+  ) => void;
+
   metadata?: Object;
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
@@ -341,8 +346,12 @@ export function useChat({
 
   const input = writable(initialInput);
 
-  const handleSubmit = (e: any, options: ChatRequestOptions = {}) => {
-    e.preventDefault();
+  const handleSubmit = (
+    event?: { preventDefault?: () => void },
+    options: ChatRequestOptions = {},
+  ) => {
+    event?.preventDefault?.();
+
     const inputValue = get(input);
     if (!inputValue) return;
 

packages/core/svelte/use-completion.ts

@@ -31,6 +31,7 @@ export type UseCompletionHelpers = {
   setCompletion: (completion: string) => void;
   /** The current value of the input */
   input: Writable<string>;
+
   /**
    * Form submission handler to automatically reset input and append a user message
    * @example
@@ -40,7 +41,8 @@ export type UseCompletionHelpers = {
    * </form>
    * ```
    */
-  handleSubmit: (e: any) => void;
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
+
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
 
@@ -146,11 +148,11 @@ export function useCompletion({
 
   const input = writable(initialInput);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
+  const handleSubmit = (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+
     const inputValue = get(input);
-    if (!inputValue) return;
-    return complete(inputValue);
+    return inputValue ? complete(inputValue) : undefined;
   };
 
   const isLoading = derived(

packages/react/src/use-chat.ts

@@ -62,7 +62,7 @@ export type UseChatHelpers = {
   ) => void;
   /** Form submission handler to automatically reset input and append a user message */
   handleSubmit: (
-    e: React.FormEvent<HTMLFormElement>,
+    event?: { preventDefault?: () => void },
     chatRequestOptions?: ChatRequestOptions,
   ) => void;
   metadata?: Object;
@@ -465,7 +465,7 @@ By default, it's set to 0, which will disable the feature.
 
   const handleSubmit = useCallback(
     (
-      e: React.FormEvent<HTMLFormElement>,
+      event?: { preventDefault?: () => void },
       options: ChatRequestOptions = {},
       metadata?: Object,
     ) => {
@@ -476,7 +476,8 @@ By default, it's set to 0, which will disable the feature.
         };
       }
 
-      e.preventDefault();
+      event?.preventDefault?.();
+
       if (!input) return;
 
       append(

packages/react/src/use-completion.ts

@@ -41,10 +41,11 @@ export type UseCompletionHelpers = {
    * ```
    */
   handleInputChange: (
-    e:
+    event:
       | React.ChangeEvent<HTMLInputElement>
       | React.ChangeEvent<HTMLTextAreaElement>,
   ) => void;
+
   /**
    * Form submission handler to automatically reset input and append a user message
    * @example
@@ -54,7 +55,8 @@ export type UseCompletionHelpers = {
    * </form>
    * ```
    */
-  handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
+
   /** Whether the API request is in progress */
   isLoading: boolean;
   /** Additional data added on the server via StreamData */
@@ -175,10 +177,9 @@ export function useCompletion({
   const [input, setInput] = useState(initialInput);
 
   const handleSubmit = useCallback(
-    (e: React.FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      if (!input) return;
-      return complete(input);
+    (event?: { preventDefault?: () => void }) => {
+      event?.preventDefault?.();
+      return input ? complete(input) : undefined;
     },
     [input, complete],
   );

packages/solid/src/use-chat.ts

@@ -55,7 +55,10 @@ export type UseChatHelpers = {
   /** Signal setter to update the input value */
   setInput: Setter<string>;
   /** Form submission handler to automatically reset input and append a user message */
-  handleSubmit: (e: any, chatRequestOptions?: ChatRequestOptions) => void;
+  handleSubmit: (
+    event?: { preventDefault?: () => void },
+    chatRequestOptions?: ChatRequestOptions,
+  ) => void;
   /** Whether the API request is in progress */
   isLoading: Accessor<boolean>;
   /** Additional data added on the server via StreamData */
@@ -250,8 +253,11 @@ export function useChat({
 
   const [input, setInput] = createSignal(initialInput);
 
-  const handleSubmit = (e: any, options: ChatRequestOptions = {}) => {
-    e.preventDefault();
+  const handleSubmit = (
+    event?: { preventDefault?: () => void },
+    options: ChatRequestOptions = {},
+  ) => {
+    event?.preventDefault?.();
     const inputValue = input();
     if (!inputValue) return;
 

packages/solid/src/use-completion.ts

@@ -43,7 +43,7 @@ export type UseCompletionHelpers = {
    * </form>
    * ```
    */
-  handleSubmit: (e: any) => void;
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
   /** Whether the API request is in progress */
   isLoading: Accessor<boolean>;
   /** Additional data added on the server via StreamData */
@@ -145,11 +145,11 @@ export function useCompletion({
 
   const [input, setInput] = createSignal(initialInput);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
+  const handleSubmit = (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+
     const inputValue = input();
-    if (!inputValue) return;
-    return complete(inputValue);
+    return inputValue ? complete(inputValue) : undefined;
   };
 
   return {

packages/svelte/src/use-chat.ts

@@ -52,7 +52,10 @@ export type UseChatHelpers = {
   /** The current value of the input */
   input: Writable<string>;
   /** Form submission handler to automatically reset input and append a user message  */
-  handleSubmit: (e: any, chatRequestOptions?: ChatRequestOptions) => void;
+  handleSubmit: (
+    event?: { preventDefault?: () => void },
+    chatRequestOptions?: ChatRequestOptions,
+  ) => void;
   metadata?: Object;
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
@@ -338,8 +341,11 @@ export function useChat({
 
   const input = writable(initialInput);
 
-  const handleSubmit = (e: any, options: ChatRequestOptions = {}) => {
-    e.preventDefault();
+  const handleSubmit = (
+    event?: { preventDefault?: () => void },
+    options: ChatRequestOptions = {},
+  ) => {
+    event?.preventDefault?.();
     const inputValue = get(input);
     if (!inputValue) return;
 

packages/svelte/src/use-completion.ts

@@ -40,7 +40,7 @@ export type UseCompletionHelpers = {
    * </form>
    * ```
    */
-  handleSubmit: (e: any) => void;
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
   /** Whether the API request is in progress */
   isLoading: Readable<boolean | undefined>;
 
@@ -143,11 +143,11 @@ export function useCompletion({
 
   const input = writable(initialInput);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
+  const handleSubmit = (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
+
     const inputValue = get(input);
-    if (!inputValue) return;
-    return complete(inputValue);
+    return inputValue ? complete(inputValue) : undefined;
   };
 
   const isLoading = derived(

packages/vue/src/use-chat.ts

@@ -246,8 +246,12 @@ export function useChat({
 
   const input = ref(initialInput);
 
-  const handleSubmit = (e: any, options: ChatRequestOptions = {}) => {
-    e.preventDefault();
+  const handleSubmit = (
+    event?: { preventDefault?: () => void },
+    options: ChatRequestOptions = {},
+  ) => {
+    event?.preventDefault?.();
+
     const inputValue = input.value;
     if (!inputValue) return;
     append(

packages/vue/src/use-completion.ts

@@ -41,7 +41,7 @@ export type UseCompletionHelpers = {
    * </form>
    * ```
    */
-  handleSubmit: (e: any) => void;
+  handleSubmit: (event?: { preventDefault?: () => void }) => void;
   /** Whether the API request is in progress */
   isLoading: Ref<boolean | undefined>;
 
@@ -155,11 +155,10 @@ export function useCompletion({
 
   const input = ref(initialInput);
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault();
+  const handleSubmit = (event?: { preventDefault?: () => void }) => {
+    event?.preventDefault?.();
     const inputValue = input.value;
-    if (!inputValue) return;
-    return complete(inputValue);
+    return inputValue ? complete(inputValue) : undefined;
   };
 
   return {