feat (ui): support message replacement in chat via messageId param on sendMessage (vercel#6775)

## Background

Editing and submitting user messages is a common task in advanced chat
UIs that should be easy to do with the AI SDK.

## Summary

Add `messageId` option to `sendMessage`. If set, it replaces an existing
message.

## Verification

Integrated message replace into `next` example and tested it manually.

Author: lgrammel

.changeset/tall-garlics-sit.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+feat (ui): support message replacement in chat via messageId param on sendMessage

examples/next/app/api/chat/route.ts

@@ -21,7 +21,18 @@ export async function POST(req: Request) {
   let messages: MyUIMessage[] = chat.messages;
 
   if (trigger === 'submit-user-message') {
-    messages = [...messages, message!];
+    if (messageId != null) {
+      const messageIndex = messages.findIndex(m => m.id === messageId);
+
+      if (messageIndex === -1) {
+        throw new Error(`message ${messageId} not found`);
+      }
+
+      messages = messages.slice(0, messageIndex);
+      messages.push(message!);
+    } else {
+      messages = [...messages, message!];
+    }
   } else if (trigger === 'regenerate-assistant-message') {
     const messageIndex =
       messageId == null

examples/next/app/chat/[chatId]/chat.tsx

@@ -43,6 +43,7 @@ export default function ChatComponent({
                 trigger: 'submit-user-message',
                 id,
                 message: messages[messages.length - 1],
+                messageId,
               },
             };
 
@@ -73,7 +74,13 @@ export default function ChatComponent({
   return (
     <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
       {messages.map(message => (
-        <Message key={message.id} message={message} regenerate={regenerate} />
+        <Message
+          key={message.id}
+          message={message}
+          regenerate={regenerate}
+          sendMessage={sendMessage}
+          status={status}
+        />
       ))}
       <ChatInput
         status={status}

examples/next/app/chat/[chatId]/message.tsx

@@ -1,11 +1,22 @@
 import { MyUIMessage } from '@/util/chat-schema';
+import { ChatStatus } from 'ai';
 
 export default function Message({
   message,
+  status,
   regenerate,
+  sendMessage,
 }: {
+  status: ChatStatus;
   message: MyUIMessage;
   regenerate: ({ messageId }: { messageId: string }) => void;
+  sendMessage: ({
+    text,
+    messageId,
+  }: {
+    text: string;
+    messageId?: string;
+  }) => void;
 }) {
   const date = message.metadata?.createdAt
     ? new Date(message.metadata.createdAt).toLocaleString()
@@ -25,12 +36,24 @@ export default function Message({
           .join('')}
       </div>
       {message.role === 'user' && (
-        <button
-          onClick={() => regenerate({ messageId: message.id })}
-          className="px-3 py-1 mt-2 text-sm transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
-        >
-          Regenerate
-        </button>
+        <>
+          <button
+            onClick={() => regenerate({ messageId: message.id })}
+            className="px-3 py-1 mt-2 text-sm transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
+            disabled={status !== 'ready'}
+          >
+            Regenerate
+          </button>
+          <button
+            onClick={() =>
+              sendMessage({ text: 'Hello', messageId: message.id })
+            }
+            className="px-3 py-1 mt-2 text-sm transition-colors bg-gray-200 rounded-md hover:bg-gray-300"
+            disabled={status !== 'ready'}
+          >
+            Replace with Hello
+          </button>
+        </>
       )}
     </div>
   );