refactor: migrate AI SDK integration to external-store runtime (#684)

* refactor: migrate AI SDK integration to external-store runtime

* addToolResult support

* cleanup

* useInsertionEffect -> useEffect

* changeset

* do not overwrite composer if it has content

.changeset/quiet-impalas-accept.md

@@ -0,0 +1,6 @@
+---
+"@assistant-ui/react-ai-sdk": minor
+"@assistant-ui/react": patch
+---
+
+refactor: rewrite ai-sdk integration to use external runtime

packages/react-ai-sdk/src/ui/getVercelAIMessage.tsx

@@ -1,12 +1,9 @@
-import type { ThreadMessage } from "@assistant-ui/react";
+import {
+  getExternalStoreMessage,
+  type ThreadMessage,
+} from "@assistant-ui/react";
 import type { Message } from "ai";
 
-export const symbolInnerAIMessage = Symbol("innerVercelAIUIMessage");
-
-export type VercelAIThreadMessage = ThreadMessage & {
-  [symbolInnerAIMessage]?: Message[];
-};
-
 export const getVercelAIMessage = (message: ThreadMessage) => {
-  return (message as VercelAIThreadMessage)[symbolInnerAIMessage];
+  return getExternalStoreMessage(message) as Message[];
 };

packages/react-ai-sdk/src/ui/use-assistant/useVercelUseAssistantRuntime.tsx

@@ -1,20 +1,38 @@
 import type { useAssistant } from "ai/react";
-import { useEffect, useInsertionEffect, useState } from "react";
-import { VercelUseAssistantRuntime } from "./VercelUseAssistantRuntime";
+import { useExternalStoreRuntime } from "@assistant-ui/react";
+import { useCachedChunkedMessages } from "../utils/useCachedChunkedMessages";
+import { convertMessage } from "../utils/convertMessage";
+import { useInputSync } from "../utils/useInputSync";
 
 export const useVercelUseAssistantRuntime = (
   assistantHelpers: ReturnType<typeof useAssistant>,
 ) => {
-  const [runtime] = useState(
-    () => new VercelUseAssistantRuntime(assistantHelpers),
-  );
+  const messages = useCachedChunkedMessages(assistantHelpers.messages);
+  const runtime = useExternalStoreRuntime({
+    isRunning: assistantHelpers.status === "in_progress",
+    messages,
+    onCancel: async () => assistantHelpers.stop(),
+    onNew: async (message) => {
+      if (message.content.length !== 1 || message.content[0]?.type !== "text")
+        throw new Error(
+          "VercelUseAssistantRuntime only supports text content.",
+        );
 
-  useInsertionEffect(() => {
-    runtime.vercel = assistantHelpers;
-  });
-  useEffect(() => {
-    runtime.onVercelUpdated();
+      await assistantHelpers.append({
+        role: message.role,
+        content: message.content[0].text,
+      });
+    },
+    onNewThread: () => {
+      assistantHelpers.messages = [];
+      assistantHelpers.input = "";
+      assistantHelpers.setMessages([]);
+      assistantHelpers.setInput("");
+    },
+    convertMessage,
   });
 
+  useInputSync(assistantHelpers, runtime);
+
   return runtime;
 };