@assistant-ui/react-ai-sdk 0.10.1 → 0.10.3

package/dist/ui/utils/vercelAttachmentAdapter.d.ts

@@ -0,0 +1,3 @@
+import { AttachmentAdapter } from "@assistant-ui/react";
+export declare const vercelAttachmentAdapter: AttachmentAdapter;
+//# sourceMappingURL=vercelAttachmentAdapter.d.ts.map

package/dist/ui/utils/vercelAttachmentAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vercelAttachmentAdapter.d.ts","sourceRoot":"","sources":["../../../src/ui/utils/vercelAttachmentAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,eAAO,MAAM,uBAAuB,EAAE,iBAyBrC,CAAC"}

package/dist/ui/utils/vercelAttachmentAdapter.js

@@ -1,5 +1,6 @@
+// src/ui/utils/vercelAttachmentAdapter.ts
 import { generateId } from "@ai-sdk/ui-utils";
-const vercelAttachmentAdapter = {
+var vercelAttachmentAdapter = {
   accept: "image/*, text/plain, text/html, text/markdown, text/csv, text/xml, text/json, text/css",
   async add({ file }) {
     return {

package/dist/ui/utils/vercelAttachmentAdapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/utils/vercelAttachmentAdapter.ts"],"sourcesContent":["import { AttachmentAdapter } from \"@assistant-ui/react\";\nimport { generateId } from \"@ai-sdk/ui-utils\";\n\nexport const vercelAttachmentAdapter: AttachmentAdapter = {\n  accept:\n    \"image/*, text/plain, text/html, text/markdown, text/csv, text/xml, text/json, text/css\",\n  async add({ file }) {\n    return {\n      id: generateId(),\n      type: \"file\",\n      name: file.name,\n      file,\n      contentType: file.type,\n      content: [],\n      status: { type: \"requires-action\", reason: \"composer-send\" },\n    };\n  },\n  async send(attachment) {\n    // noop\n    return {\n      ...attachment,\n      status: { type: \"complete\" },\n      content: [],\n    };\n  },\n  async remove() {\n    // noop\n  },\n};\n"],"mappings":"AACA,SAAS,kBAAkB;AAEpB,MAAM,0BAA6C;AAAA,EACxD,QACE;AAAA,EACF,MAAM,IAAI,EAAE,KAAK,GAAG;AAClB,WAAO;AAAA,MACL,IAAI,WAAW;AAAA,MACf,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,MACX;AAAA,MACA,aAAa,KAAK;AAAA,MAClB,SAAS,CAAC;AAAA,MACV,QAAQ,EAAE,MAAM,mBAAmB,QAAQ,gBAAgB;AAAA,IAC7D;AAAA,EACF;AAAA,EACA,MAAM,KAAK,YAAY;AAErB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,SAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAAA,EACA,MAAM,SAAS;AAAA,EAEf;AACF;","names":[]}
+{"version":3,"sources":["../../../src/ui/utils/vercelAttachmentAdapter.ts"],"sourcesContent":["import { AttachmentAdapter } from \"@assistant-ui/react\";\nimport { generateId } from \"@ai-sdk/ui-utils\";\n\nexport const vercelAttachmentAdapter: AttachmentAdapter = {\n  accept:\n    \"image/*, text/plain, text/html, text/markdown, text/csv, text/xml, text/json, text/css\",\n  async add({ file }) {\n    return {\n      id: generateId(),\n      type: \"file\",\n      name: file.name,\n      file,\n      contentType: file.type,\n      content: [],\n      status: { type: \"requires-action\", reason: \"composer-send\" },\n    };\n  },\n  async send(attachment) {\n    // noop\n    return {\n      ...attachment,\n      status: { type: \"complete\" },\n      content: [],\n    };\n  },\n  async remove() {\n    // noop\n  },\n};\n"],"mappings":";AACA,SAAS,kBAAkB;AAEpB,IAAM,0BAA6C;AAAA,EACxD,QACE;AAAA,EACF,MAAM,IAAI,EAAE,KAAK,GAAG;AAClB,WAAO;AAAA,MACL,IAAI,WAAW;AAAA,MACf,MAAM;AAAA,MACN,MAAM,KAAK;AAAA,MACX;AAAA,MACA,aAAa,KAAK;AAAA,MAClB,SAAS,CAAC;AAAA,MACV,QAAQ,EAAE,MAAM,mBAAmB,QAAQ,gBAAgB;AAAA,IAC7D;AAAA,EACF;AAAA,EACA,MAAM,KAAK,YAAY;AAErB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,EAAE,MAAM,WAAW;AAAA,MAC3B,SAAS,CAAC;AAAA,IACZ;AAAA,EACF;AAAA,EACA,MAAM,SAAS;AAAA,EAEf;AACF;","names":[]}

package/dist/useChatRuntime.d.ts

@@ -0,0 +1,5 @@
+import { EdgeRuntimeOptions } from "@assistant-ui/react-edge";
+type UseChatRuntimeOptions = Omit<EdgeRuntimeOptions, "unstable_AISDKInterop">;
+export declare const useChatRuntime: (options: UseChatRuntimeOptions) => import("@assistant-ui/react").AssistantRuntime;
+export {};
+//# sourceMappingURL=useChatRuntime.d.ts.map

package/dist/useChatRuntime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChatRuntime.d.ts","sourceRoot":"","sources":["../src/useChatRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAkB,MAAM,0BAA0B,CAAC;AAE9E,KAAK,qBAAqB,GAAG,IAAI,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAC;AAE/E,eAAO,MAAM,cAAc,GAAI,SAAS,qBAAqB,mDAK5D,CAAC"}

package/dist/useChatRuntime.js

@@ -1,5 +1,6 @@
+// src/useChatRuntime.ts
 import { useEdgeRuntime } from "@assistant-ui/react-edge";
-const useChatRuntime = (options) => {
+var useChatRuntime = (options) => {
   return useEdgeRuntime({
     ...options,
     unstable_AISDKInterop: "v2"

package/dist/useChatRuntime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useChatRuntime.ts"],"sourcesContent":["import { EdgeRuntimeOptions, useEdgeRuntime } from \"@assistant-ui/react-edge\";\n\ntype UseChatRuntimeOptions = Omit<EdgeRuntimeOptions, \"unstable_AISDKInterop\">;\n\nexport const useChatRuntime = (options: UseChatRuntimeOptions) => {\n  return useEdgeRuntime({\n    ...options,\n    unstable_AISDKInterop: \"v2\",\n  });\n};\n"],"mappings":"AAAA,SAA6B,sBAAsB;AAI5C,MAAM,iBAAiB,CAAC,YAAmC;AAChE,SAAO,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,uBAAuB;AAAA,EACzB,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../src/useChatRuntime.ts"],"sourcesContent":["import { EdgeRuntimeOptions, useEdgeRuntime } from \"@assistant-ui/react-edge\";\n\ntype UseChatRuntimeOptions = Omit<EdgeRuntimeOptions, \"unstable_AISDKInterop\">;\n\nexport const useChatRuntime = (options: UseChatRuntimeOptions) => {\n  return useEdgeRuntime({\n    ...options,\n    unstable_AISDKInterop: \"v2\",\n  });\n};\n"],"mappings":";AAAA,SAA6B,sBAAsB;AAI5C,IAAM,iBAAiB,CAAC,YAAmC;AAChE,SAAO,eAAe;AAAA,IACpB,GAAG;AAAA,IACH,uBAAuB;AAAA,EACzB,CAAC;AACH;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react-ai-sdk",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -13,6 +13,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "sideEffects": false,
@@ -22,10 +23,10 @@
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "zod": "^3.24.3",
     "zustand": "^5.0.3",
-    "@assistant-ui/react-edge": "0.2.0"
+    "@assistant-ui/react-edge": "0.2.2"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.10.0",
+    "@assistant-ui/react": "^0.10.2",
     "@types/react": "*",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },
@@ -36,7 +37,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.14.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.2",
     "eslint": "^9",
     "eslint-config-next": "15.3.1",
     "react": "^19.1.0",

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./rsc";
+export * from "./ui";
+export * from "./useChatRuntime";
+
+export {
+  toLanguageModelMessages,
+  toLanguageModelTools,
+  fromLanguageModelMessages,
+  fromLanguageModelTools,
+  useDangerousInBrowserRuntime,
+} from "@assistant-ui/react-edge";

package/src/rsc/RSCDisplay.tsx

@@ -0,0 +1,23 @@
+"use client";
+import {
+  useThread,
+  useMessage,
+  getExternalStoreMessage,
+} from "@assistant-ui/react";
+import {
+  RSCThreadExtras,
+  symbolInternalRSCExtras,
+} from "./utils/RSCThreadExtras";
+import { FC } from "react";
+
+export const RSCDisplay: FC = () => {
+  const convertFn = useThread((t) => {
+    const extras = (t.extras as RSCThreadExtras)?.[symbolInternalRSCExtras];
+    if (!extras)
+      throw new Error(
+        "This function can only be used inside a Vercel RSC runtime.",
+      );
+    return extras.convertFn;
+  });
+  return useMessage((m) => convertFn(getExternalStoreMessage(m)).display);
+};

package/src/rsc/VercelRSCAdapter.tsx

@@ -0,0 +1,23 @@
+"use client";
+import type { AppendMessage } from "@assistant-ui/react";
+import type { VercelRSCMessage } from "./VercelRSCMessage";
+import { ExternalStoreAdapter } from "@assistant-ui/react";
+
+type RSCMessageConverter<T> = {
+  convertMessage: (message: T) => VercelRSCMessage;
+};
+
+type VercelRSCAdapterBase<T> = {
+  isRunning?: boolean | undefined;
+  messages: T[];
+
+  onNew?: (message: AppendMessage) => Promise<void>;
+  onEdit?: ((message: AppendMessage) => Promise<void>) | undefined;
+  onReload?: ((parentId: string | null) => Promise<void>) | undefined;
+  convertMessage?: ((message: T) => VercelRSCMessage) | undefined;
+
+  adapters?: ExternalStoreAdapter["adapters"] | undefined;
+};
+
+export type VercelRSCAdapter<T = VercelRSCMessage> = VercelRSCAdapterBase<T> &
+  (T extends VercelRSCMessage ? object : RSCMessageConverter<T>);

package/src/rsc/VercelRSCMessage.tsx

@@ -0,0 +1,9 @@
+"use client";
+import type { ReactNode } from "react";
+
+export type VercelRSCMessage = {
+  id?: string | undefined;
+  role: "user" | "assistant";
+  display: ReactNode;
+  createdAt?: Date | undefined;
+};

package/src/rsc/getVercelRSCMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  getExternalStoreMessage,
+  type ThreadMessage,
+} from "@assistant-ui/react";
+
+/**
+ * @deprecated Use `getExternalStoreMessage` instead. This method was specific to Vercel RSC
+ * implementation and has been replaced by a more generic external store message handler.
+ */
+export const getVercelRSCMessage = (message: ThreadMessage) => {
+  return getExternalStoreMessage(message);
+};

package/src/rsc/index.ts

@@ -0,0 +1,5 @@
+export { useVercelRSCRuntime } from "./useVercelRSCRuntime";
+export { getVercelRSCMessage } from "./getVercelRSCMessage";
+export type { VercelRSCAdapter } from "./VercelRSCAdapter";
+export type { VercelRSCMessage } from "./VercelRSCMessage";
+export { RSCDisplay } from "./RSCDisplay";

package/src/rsc/useVercelRSCRuntime.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { VercelRSCAdapter } from "./VercelRSCAdapter";
+import {
+  ExternalStoreAdapter,
+  ThreadMessageLike,
+  useExternalMessageConverter,
+  useExternalStoreRuntime,
+} from "@assistant-ui/react";
+import { VercelRSCMessage } from "./VercelRSCMessage";
+import { useCallback, useMemo } from "react";
+import { symbolInternalRSCExtras } from "./utils/RSCThreadExtras";
+
+const vercelToThreadMessage = <T,>(
+  converter: (message: T) => VercelRSCMessage,
+  rawMessage: T,
+): ThreadMessageLike => {
+  const message = converter(rawMessage);
+
+  return {
+    id: message.id,
+    role: message.role,
+    content: [{ type: "text", text: "[Developer: Please set up RSCDisplay]" }],
+    createdAt: message.createdAt,
+  };
+};
+
+export const useVercelRSCRuntime = <T extends WeakKey>(
+  adapter: VercelRSCAdapter<T>,
+) => {
+  const onNew = adapter.onNew;
+  if (!onNew)
+    throw new Error("You must pass a onNew function to useVercelRSCRuntime");
+
+  const convertFn = useMemo(() => {
+    return (
+      adapter.convertMessage?.bind(adapter) ?? ((m: T) => m as VercelRSCMessage)
+    );
+  }, [adapter.convertMessage, adapter]);
+  const callback = useCallback(
+    (m: T) => {
+      return vercelToThreadMessage(convertFn, m);
+    },
+    [convertFn],
+  );
+
+  const messages = useExternalMessageConverter({
+    callback,
+    isRunning: adapter.isRunning ?? false,
+    messages: adapter.messages,
+  });
+
+  const eAdapter: ExternalStoreAdapter = {
+    isRunning: adapter.isRunning,
+    messages,
+    onNew,
+    onEdit: adapter.onEdit,
+    onReload: adapter.onReload,
+    adapters: adapter.adapters,
+    unstable_capabilities: {
+      copy: false,
+    },
+    extras: {
+      [symbolInternalRSCExtras]: { convertFn },
+    },
+  };
+
+  const runtime = useExternalStoreRuntime(eAdapter);
+  return runtime;
+};

package/src/rsc/utils/RSCThreadExtras.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { VercelRSCMessage } from "../VercelRSCMessage";
+
+export const symbolInternalRSCExtras = Symbol("internal-rsc-extras");
+export type RSCThreadExtras =
+  | {
+      [symbolInternalRSCExtras]?: {
+        convertFn: (message: any) => VercelRSCMessage;
+      };
+    }
+  | undefined;

package/src/ui/getVercelAIMessages.tsx

@@ -0,0 +1,9 @@
+import {
+  getExternalStoreMessage,
+  type ThreadMessage,
+} from "@assistant-ui/react";
+import type { Message } from "@ai-sdk/ui-utils";
+
+export const getVercelAIMessages = (message: ThreadMessage) => {
+  return getExternalStoreMessage(message) as Message[];
+};

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+export { useVercelUseChatRuntime } from "./use-chat/useVercelUseChatRuntime";
+export { useVercelUseAssistantRuntime } from "./use-assistant/useVercelUseAssistantRuntime";
+export { getVercelAIMessages } from "./getVercelAIMessages";
+export { AISDKMessageConverter } from "./utils/convertMessage";

package/src/ui/use-assistant/useVercelUseAssistantRuntime.tsx

@@ -0,0 +1,58 @@
+import type { useAssistant } from "@ai-sdk/react";
+import { useExternalStoreRuntime } from "@assistant-ui/react";
+import { useInputSync } from "../utils/useInputSync";
+import { toCreateMessage } from "../utils/toCreateMessage";
+import { vercelAttachmentAdapter } from "../utils/vercelAttachmentAdapter";
+import { ExternalStoreAdapter } from "@assistant-ui/react";
+import { AISDKMessageConverter } from "../utils/convertMessage";
+
+export type VercelUseChatAdapter = {
+  adapters?:
+    | Omit<NonNullable<ExternalStoreAdapter["adapters"]>, "attachments">
+    | undefined;
+};
+
+export const useVercelUseAssistantRuntime = (
+  assistantHelpers: ReturnType<typeof useAssistant>,
+  adapter: VercelUseChatAdapter = {},
+) => {
+  const messages = AISDKMessageConverter.useThreadMessages({
+    messages: assistantHelpers.messages,
+    isRunning: assistantHelpers.status === "in_progress",
+  });
+
+  const runtime = useExternalStoreRuntime({
+    isRunning: assistantHelpers.status === "in_progress",
+    messages,
+    onCancel: async () => assistantHelpers.stop(),
+    onNew: async (message) => {
+      await assistantHelpers.append(await toCreateMessage(message));
+    },
+    adapters: {
+      attachments: vercelAttachmentAdapter,
+      ...adapter.adapters,
+      threadList: new Proxy(adapter.adapters?.threadList ?? {}, {
+        get(target, prop, receiver) {
+          if (prop === "onSwitchToNewThread") {
+            return () => {
+              assistantHelpers.messages = [];
+              assistantHelpers.input = "";
+              assistantHelpers.setMessages([]);
+              assistantHelpers.setInput("");
+
+              if (typeof target.onSwitchToNewThread === "function") {
+                return target.onSwitchToNewThread.call(target);
+              }
+            };
+          }
+
+          return Reflect.get(target, prop, receiver);
+        },
+      }),
+    },
+  });
+
+  useInputSync(assistantHelpers, runtime);
+
+  return runtime;
+};

package/src/ui/use-chat/useVercelUseChatRuntime.tsx

@@ -0,0 +1,91 @@
+import type { useChat } from "@ai-sdk/react";
+import { useExternalStoreRuntime } from "@assistant-ui/react";
+import { useInputSync } from "../utils/useInputSync";
+import { sliceMessagesUntil } from "../utils/sliceMessagesUntil";
+import { toCreateMessage } from "../utils/toCreateMessage";
+import { vercelAttachmentAdapter } from "../utils/vercelAttachmentAdapter";
+import { getVercelAIMessages } from "../getVercelAIMessages";
+import { ExternalStoreAdapter } from "@assistant-ui/react";
+import { useState } from "react";
+import { generateId } from "@ai-sdk/ui-utils";
+import { AISDKMessageConverter } from "../utils/convertMessage";
+
+export type VercelUseChatAdapter = {
+  adapters?:
+    | Omit<NonNullable<ExternalStoreAdapter["adapters"]>, "attachments">
+    | undefined;
+  unstable_joinStrategy?: "concat-content" | "none";
+};
+
+export const useVercelUseChatRuntime = (
+  chatHelpers: ReturnType<typeof useChat>,
+  adapter: VercelUseChatAdapter = {},
+) => {
+  const messages = AISDKMessageConverter.useThreadMessages({
+    isRunning:
+      chatHelpers.status === "submitted" || chatHelpers.status == "streaming",
+    messages: chatHelpers.messages,
+    joinStrategy: adapter.unstable_joinStrategy,
+  });
+
+  const [threadId, setThreadId] = useState<string>(generateId());
+
+  const runtime = useExternalStoreRuntime({
+    isRunning: chatHelpers.isLoading,
+    messages,
+    setMessages: (messages) =>
+      chatHelpers.setMessages(messages.map(getVercelAIMessages).flat()),
+    onCancel: async () => chatHelpers.stop(),
+    onNew: async (message) => {
+      await chatHelpers.append(await toCreateMessage(message));
+    },
+    onEdit: async (message) => {
+      const newMessages = sliceMessagesUntil(
+        chatHelpers.messages,
+        message.parentId,
+      );
+      chatHelpers.setMessages(newMessages);
+
+      await chatHelpers.append(await toCreateMessage(message));
+    },
+    onReload: async (parentId: string | null) => {
+      const newMessages = sliceMessagesUntil(chatHelpers.messages, parentId);
+      chatHelpers.setMessages(newMessages);
+
+      await chatHelpers.reload();
+    },
+    onAddToolResult: ({ toolCallId, result }) => {
+      chatHelpers.addToolResult({ toolCallId, result });
+    },
+    adapters: {
+      attachments: vercelAttachmentAdapter,
+      ...adapter.adapters,
+      threadList: new Proxy(adapter.adapters?.threadList ?? {}, {
+        get(target, prop, receiver) {
+          if (prop === "threadId") {
+            return target.threadId ?? threadId;
+          }
+          if (prop === "onSwitchToNewThread") {
+            return () => {
+              chatHelpers.messages = [];
+              chatHelpers.input = "";
+              chatHelpers.setMessages([]);
+              chatHelpers.setInput("");
+              setThreadId(generateId());
+
+              if (typeof target.onSwitchToNewThread === "function") {
+                return target.onSwitchToNewThread.call(target);
+              }
+            };
+          }
+
+          return Reflect.get(target, prop, receiver);
+        },
+      }),
+    },
+  });
+
+  useInputSync(chatHelpers, runtime);
+
+  return runtime;
+};

package/src/ui/utils/convertMessage.ts

@@ -0,0 +1,158 @@
+import { Message } from "@ai-sdk/ui-utils";
+import { unstable_createMessageConverter } from "@assistant-ui/react";
+import { SourceContentPart } from "@assistant-ui/react";
+import { FileContentPart } from "@assistant-ui/react";
+import { ReasoningContentPart } from "@assistant-ui/react";
+import { ToolCallContentPart } from "@assistant-ui/react";
+import { TextContentPart } from "@assistant-ui/react";
+import { CompleteAttachment } from "@assistant-ui/react";
+
+export const AISDKMessageConverter = unstable_createMessageConverter(
+  (message: Message) => {
+    switch (message.role) {
+      case "user":
+        return {
+          role: "user",
+          id: message.id,
+          createdAt: message.createdAt,
+          content: message.content,
+
+          attachments: message.experimental_attachments?.map(
+            (attachment, idx) =>
+              ({
+                id: idx.toString(),
+                type: "file",
+                name: attachment.name ?? attachment.url,
+                content: [],
+                contentType: attachment.contentType ?? "unknown/unknown",
+                status: { type: "complete" },
+              }) satisfies CompleteAttachment,
+          ),
+        };
+
+      case "system":
+        return {
+          role: "system",
+          id: message.id,
+          createdAt: message.createdAt,
+          content: message.content,
+        };
+
+      case "assistant":
+        return {
+          role: "assistant",
+          id: message.id,
+          createdAt: message.createdAt,
+          content:
+            message.parts
+              ?.filter((p) => p.type !== "step-start")
+              .map((part) => {
+                const type = part.type;
+                switch (type) {
+                  case "text":
+                    return {
+                      type: "text",
+                      text: part.text,
+                    } satisfies TextContentPart;
+                  case "tool-invocation":
+                    return {
+                      type: "tool-call",
+                      toolName: part.toolInvocation.toolName,
+                      toolCallId: part.toolInvocation.toolCallId,
+                      argsText: JSON.stringify(part.toolInvocation.args),
+                      args: part.toolInvocation.args,
+                      result:
+                        part.toolInvocation.state === "result" &&
+                        part.toolInvocation.result,
+                    } satisfies ToolCallContentPart;
+                  case "reasoning":
+                    return {
+                      type: "reasoning",
+                      text: part.reasoning,
+                    } satisfies ReasoningContentPart;
+
+                  case "source":
+                    return {
+                      type: "source",
+                      ...part.source,
+                    } satisfies SourceContentPart;
+
+                  case "file":
+                    return {
+                      type: "file",
+                      data: part.data,
+                      mimeType: part.mimeType,
+                    } satisfies FileContentPart;
+
+                  default: {
+                    const _unsupported: never = type;
+                    throw new Error(
+                      `You have a message with an unsupported part type. The type ${_unsupported} is not supported.`,
+                    );
+                  }
+                }
+              }) ??
+            (message.content
+              ? [
+                  {
+                    type: "text",
+                    text: message.content,
+                  } satisfies TextContentPart,
+                ]
+              : []),
+          metadata: {
+            unstable_annotations: message.annotations,
+            unstable_data: Array.isArray(message.data)
+              ? message.data
+              : message.data
+                ? [message.data]
+                : undefined,
+          },
+        };
+
+      case "data": {
+        type MaybeSupportedDataMessage =
+          | { type?: "unsafe_other" }
+          | ToolCallContentPart
+          | {
+              type: "tool-result";
+              toolCallId: string;
+              result: any;
+            };
+
+        if (
+          !message.data ||
+          !(typeof message.data === "object") ||
+          Array.isArray(message.data)
+        )
+          return [];
+
+        const data = message.data as MaybeSupportedDataMessage;
+
+        if (data.type === "tool-call") {
+          return {
+            role: "assistant",
+            id: message.id,
+            createdAt: message.createdAt,
+            content: [data],
+          };
+        } else if (data.type === "tool-result") {
+          return {
+            role: "tool",
+            id: message.id,
+            toolCallId: data.toolCallId,
+            result: data.result,
+          };
+        }
+        return [];
+      }
+
+      default:
+        // TODO handle tool and function messages
+        const _unsupported: "function" | "tool" = message.role;
+        throw new Error(
+          `You have a message with an unsupported role. The role ${_unsupported} is not supported.`,
+        );
+    }
+  },
+);

package/src/ui/utils/sliceMessagesUntil.tsx

@@ -0,0 +1,20 @@
+import type { Message } from "@ai-sdk/ui-utils";
+
+export const sliceMessagesUntil = (
+  messages: Message[],
+  messageId: string | null,
+) => {
+  if (messageId == null) return [];
+
+  let messageIdx = messages.findIndex((m) => m.id === messageId);
+  if (messageIdx === -1)
+    throw new Error(
+      "useVercelAIThreadState: Message not found. This is liekly an internal bug in assistant-ui.",
+    );
+
+  while (messages[messageIdx + 1]?.role === "assistant") {
+    messageIdx++;
+  }
+
+  return messages.slice(0, messageIdx + 1);
+};

package/src/ui/utils/toCreateMessage.ts

@@ -0,0 +1,44 @@
+import { AppendMessage } from "@assistant-ui/react";
+import { CreateMessage } from "@ai-sdk/ui-utils";
+
+export const toCreateMessage = async (
+  message: AppendMessage,
+): Promise<CreateMessage> => {
+  const content = message.content
+    .filter((part) => part.type === "text")
+    .map((t) => t.text)
+    .join("\n\n");
+
+  const images = message.content
+    .filter((part) => part.type === "image")
+    .map((part) => ({ url: part.image }));
+
+  return {
+    role: message.role,
+    content,
+    experimental_attachments: [
+      ...images,
+      ...(await Promise.all(
+        (message.attachments ?? []).map(async (m) => {
+          if (m.file == null)
+            throw new Error("Attachment did not contain a file");
+          return {
+            contentType: m.file.type,
+            name: m.file.name,
+            url: await getFileDataURL(m.file),
+          };
+        }),
+      )),
+    ],
+  };
+};
+
+const getFileDataURL = (file: File) =>
+  new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+
+    reader.readAsDataURL(file);
+  });