fix (ui): single assistant message with multiple tool steps (#4591)

.changeset/lucky-carpets-boil.md

@@ -0,0 +1,8 @@
+---
+'@ai-sdk/svelte': patch
+'@ai-sdk/react': patch
+'@ai-sdk/solid': patch
+'@ai-sdk/vue': patch
+---
+
+fix (ui): empty submits (with allowEmptySubmit) create user messages

.changeset/tasty-insects-applaud.md

@@ -0,0 +1,10 @@
+---
+'@ai-sdk/ui-utils': patch
+'@ai-sdk/svelte': patch
+'@ai-sdk/react': patch
+'@ai-sdk/solid': patch
+'@ai-sdk/vue': patch
+'ai': patch
+---
+
+fix (ui): single assistant message with multiple tool steps

examples/next-openai/app/api/use-chat-persistence-single-message-tools/route.ts

@@ -3,6 +3,7 @@ import { loadChat, saveChat } from '@util/chat-store';
 import {
   appendClientMessage,
   appendResponseMessages,
+  createDataStreamResponse,
   createIdGenerator,
   streamText,
   tool,
@@ -12,6 +13,8 @@ import { z } from 'zod';
 // Allow streaming responses up to 30 seconds
 export const maxDuration = 30;
 
+let count = 0;
+
 export async function POST(req: Request) {
   // get the last message from the client:
   const { message, id } = await req.json();
@@ -25,55 +28,87 @@ export async function POST(req: Request) {
     message,
   });
 
-  const result = streamText({
-    model: openai('gpt-4o-mini'),
-    messages,
-    toolCallStreaming: true,
-    maxSteps: 5, // multi-steps for server-side tools
-    tools: {
-      // server-side tool with execute function:
-      getWeatherInformation: tool({
-        description: 'show the weather in a given city to the user',
-        parameters: z.object({ city: z.string() }),
-        execute: async ({}: { city: string }) => {
-          // Add artificial delay of 2 seconds
-          await new Promise(resolve => setTimeout(resolve, 2000));
+  // immediately start streaming (solves RAG issues with status, etc.)
+  return createDataStreamResponse({
+    execute: dataStream => {
+      dataStream.writeMessageAnnotation({
+        start: 'start',
+        count: count++,
+      });
+
+      const result = streamText({
+        model: openai('gpt-4o'),
+        messages,
+        toolCallStreaming: true,
+        maxSteps: 5, // multi-steps for server-side tools
+        tools: {
+          // server-side tool with execute function:
+          getWeatherInformation: tool({
+            description: 'show the weather in a given city to the user',
+            parameters: z.object({ city: z.string() }),
+            execute: async ({ city }: { city: string }) => {
+              // Add artificial delay of 2 seconds
+              await new Promise(resolve => setTimeout(resolve, 2000));
+
+              const weatherOptions = [
+                'sunny',
+                'cloudy',
+                'rainy',
+                'snowy',
+                'windy',
+              ];
+
+              const weather =
+                weatherOptions[
+                  Math.floor(Math.random() * weatherOptions.length)
+                ];
+
+              dataStream.writeMessageAnnotation({
+                city,
+                weather,
+              });
 
-          const weatherOptions = ['sunny', 'cloudy', 'rainy', 'snowy', 'windy'];
-          return weatherOptions[
-            Math.floor(Math.random() * weatherOptions.length)
-          ];
+              return weather;
+            },
+          }),
+          // client-side tool that starts user interaction:
+          askForConfirmation: tool({
+            description: 'Ask the user for confirmation.',
+            parameters: z.object({
+              message: z
+                .string()
+                .describe('The message to ask for confirmation.'),
+            }),
+          }),
+          // client-side tool that is automatically executed on the client:
+          getLocation: tool({
+            description:
+              'Get the user location. Always ask for confirmation before using this tool.',
+            parameters: z.object({}),
+          }),
         },
-      }),
-      // client-side tool that starts user interaction:
-      askForConfirmation: tool({
-        description: 'Ask the user for confirmation.',
-        parameters: z.object({
-          message: z.string().describe('The message to ask for confirmation.'),
-        }),
-      }),
-      // client-side tool that is automatically executed on the client:
-      getLocation: tool({
-        description:
-          'Get the user location. Always ask for confirmation before using this tool.',
-        parameters: z.object({}),
-      }),
-    },
-    // id format for server-side messages:
-    experimental_generateMessageId: createIdGenerator({
-      prefix: 'msgs',
-      size: 16,
-    }),
-    async onFinish({ response }) {
-      await saveChat({
-        id,
-        messages: appendResponseMessages({
-          messages,
-          responseMessages: response.messages,
+        // id format for server-side messages:
+        experimental_generateMessageId: createIdGenerator({
+          prefix: 'msgs',
+          size: 16,
         }),
+        async onFinish({ response }) {
+          await saveChat({
+            id,
+            messages: appendResponseMessages({
+              messages,
+              responseMessages: response.messages,
+            }),
+          });
+        },
       });
+
+      result.mergeIntoDataStream(dataStream);
+    },
+    onError: error => {
+      // Error messages are masked by default for security reasons.
+      // If you want to expose the error message to the client, you can do so here:
+      return error instanceof Error ? error.message : String(error);
     },
   });
-
-  return result.toDataStreamResponse();
 }

examples/next-openai/app/use-chat-persistence-single-message-tools/[id]/chat.tsx

@@ -40,7 +40,6 @@ export default function Chat({
       {messages?.map((m: Message) => (
         <div key={m.id} className="whitespace-pre-wrap">
           <strong>{`${m.role}: `}</strong>
-          {m.content}
           {m.toolInvocations?.map((toolInvocation: ToolInvocation) => {
             const toolCallId = toolInvocation.toolCallId;
 
@@ -103,7 +102,13 @@ export default function Chat({
                 Calling {toolInvocation.toolName}...
               </div>
             );
-          })}
+          })}{' '}
+          {m.annotations && (
+            <pre className="p-4 text-sm bg-gray-100">
+              {JSON.stringify(m.annotations, null, 2)}
+            </pre>
+          )}
+          {m.content}
           <br />
           <br />
         </div>

examples/next-openai/app/use-chat-tools/page.tsx

@@ -28,7 +28,6 @@ export default function Chat() {
       {messages?.map((m: Message) => (
         <div key={m.id} className="whitespace-pre-wrap">
           <strong>{`${m.role}: `}</strong>
-          {m.content}
           {m.toolInvocations?.map((toolInvocation: ToolInvocation) => {
             const toolCallId = toolInvocation.toolCallId;
 
@@ -92,6 +91,7 @@ export default function Chat() {
               </div>
             );
           })}
+          {m.content}
           <br />
           <br />
         </div>