Backport: feat(ui): add finishReason in useChat onFinish callback (#10126)

This is an automated backport of #9857 to the release-v5.0 branch. FYI
@KirschX

---------

Co-authored-by: KirschX <[email protected]>
Co-authored-by: Gregor Martynus <[email protected]>

Author: 3 people

.changeset/six-roses-peel.md

@@ -0,0 +1,6 @@
+---
+'@ai-sdk/react': patch
+'ai': patch
+---
+
+Added finishReason on useChat onFinish callbck

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

@@ -275,6 +275,13 @@ Allows you to easily create a conversational user interface for your chatbot app
               type: 'boolean',
               description: `True if errors during streaming caused the response to stop early.`,
             },
+            {
+              name: 'finishReason',
+              type: "'stop' | 'length' | 'content-filter' | 'tool-calls' | 'error' | 'other' | 'unknown'",
+              isOptional: true,
+              description:
+                'The reason why the model finished generating the response. Undefined if the finish reason was not provided by the model.',
+            },
           ],
         },
       ],

examples/next-openai/app/use-chat-data-ui-parts/page.tsx

@@ -2,7 +2,8 @@
 
 import ChatInput from '@/components/chat-input';
 import { useChat } from '@ai-sdk/react';
-import { DefaultChatTransport, UIMessage } from 'ai';
+import { DefaultChatTransport, UIMessage, type FinishReason } from 'ai';
+import { useState } from 'react';
 
 type MyMessage = UIMessage<
   never,
@@ -16,6 +17,9 @@ type MyMessage = UIMessage<
 >;
 
 export default function Chat() {
+  const [lastFinishReason, setLastFinishReason] = useState<
+    FinishReason | undefined
+  >(undefined);
   const { error, status, sendMessage, messages, regenerate, stop } =
     useChat<MyMessage>({
       transport: new DefaultChatTransport({
@@ -24,6 +28,9 @@ export default function Chat() {
       onData: dataPart => {
         console.log('dataPart', JSON.stringify(dataPart, null, 2));
       },
+      onFinish: ({ finishReason }) => {
+        setLastFinishReason(finishReason);
+      },
     });
 
   return (
@@ -94,6 +101,12 @@ export default function Chat() {
         </div>
       )}
 
+      {messages.length > 0 && (
+        <div className="mt-4 text-gray-500">
+          Finish reason: {String(lastFinishReason)}
+        </div>
+      )}
+
       <ChatInput status={status} onSubmit={text => sendMessage({ text })} />
     </div>
   );

packages/ai/src/generate-text/__snapshots__/stream-text.test.ts.snap

@@ -433,7 +433,7 @@ exports[`streamText > result.pipeUIMessageStreamToResponse > should mask error m
   "data: {"type":"finish-step"}
 
 ",
-  "data: {"type":"finish"}
+  "data: {"type":"finish","finishReason":"error"}
 
 ",
   "data: [DONE]
@@ -456,7 +456,7 @@ exports[`streamText > result.pipeUIMessageStreamToResponse > should support cust
   "data: {"type":"finish-step"}
 
 ",
-  "data: {"type":"finish"}
+  "data: {"type":"finish","finishReason":"error"}
 
 ",
   "data: [DONE]
@@ -579,6 +579,7 @@ exports[`streamText > result.toUIMessageStream > should mask error messages by d
     "type": "finish-step",
   },
   {
+    "finishReason": "error",
     "type": "finish",
   },
 ]
@@ -624,6 +625,7 @@ exports[`streamText > result.toUIMessageStream > should send tool call, tool cal
     "type": "finish-step",
   },
   {
+    "finishReason": "stop",
     "type": "finish",
   },
 ]
@@ -645,6 +647,7 @@ exports[`streamText > result.toUIMessageStream > should support custom error mes
     "type": "finish-step",
   },
   {
+    "finishReason": "error",
     "type": "finish",
   },
 ]
@@ -664,7 +667,7 @@ exports[`streamText > result.toUIMessageStreamResponse > should mask error messa
   "data: {"type":"finish-step"}
 
 ",
-  "data: {"type":"finish"}
+  "data: {"type":"finish","finishReason":"error"}
 
 ",
   "data: [DONE]
@@ -687,7 +690,7 @@ exports[`streamText > result.toUIMessageStreamResponse > should support custom e
   "data: {"type":"finish-step"}
 
 ",
-  "data: {"type":"finish"}
+  "data: {"type":"finish","finishReason":"error"}
 
 ",
   "data: [DONE]