@assistant-ui/react 0.0.16 → 0.0.17

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { FC, ReactNode, PropsWithChildren, ComponentType } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
 import { UseChatHelpers, UseAssistantHelpers } from 'ai/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Message } from 'ai';
 import { UseBoundStore, StoreApi } from 'zustand';
 
 declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -145,6 +146,7 @@ type UserMessage = BaseMessage & {
 type AssistantMessage = BaseMessage & {
     role: "assistant";
     content: AssistantContentPart[];
+    status: "in_progress" | "done" | "error";
 };
 type AppendMessage = {
     parentId: string | null;
@@ -199,14 +201,14 @@ type MessageContentProps = {
 };
 declare const MessageContent: FC<MessageContentProps>;
 
-declare const MessageLoading: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const MessageInProgress: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
 
 declare namespace index$3 {
-  export { MessageContent as Content, MessageIf as If, MessageLoading as Loading, MessageProvider as Provider, MessageRoot as Root };
+  export { MessageContent as Content, MessageIf as If, MessageInProgress as InProgress, MessageProvider as Provider, MessageRoot as Root };
 }
 
 declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -274,14 +276,14 @@ declare namespace index$1 {
 
 type ContentPartProviderProps = PropsWithChildren<{
     part: ThreadMessage["content"][number];
-    isLoading: boolean;
+    status: "in_progress" | "done" | "error";
 }>;
 declare const ContentPartProvider: FC<ContentPartProviderProps>;
 
-declare const ContentPartLoadingIndicator: FC;
+declare const ContentPartInProgressIndicator: FC;
 
 declare namespace index {
-  export { ContentPartLoadingIndicator as LoadingIndicator, ContentPartProvider as Provider };
+  export { ContentPartInProgressIndicator as InProgressIndicator, ContentPartProvider as Provider };
 }
 
 type VercelAIAssistantProviderProps = PropsWithChildren<{
@@ -310,13 +312,16 @@ type RSCMessageConverter<T> = {
 type VercelRSCAssistantProviderProps<T = VercelRSCMessage> = VercelRSCAssistantProviderBaseProps<T> & (T extends VercelRSCMessage ? object : RSCMessageConverter<T>);
 declare const VercelRSCAssistantProvider: <T extends WeakKey = VercelRSCMessage>({ children, convertMessage, messages: vercelMessages, append: appendCallback, edit, reload, }: VercelRSCAssistantProviderProps<T>) => react_jsx_runtime.JSX.Element;
 
+declare const getVercelMessage: (message: ThreadMessage) => Message | undefined;
+declare const getVercelRSCMessage: <T>(message: ThreadMessage) => T | undefined;
+
 type MessageState = {
     message: ThreadMessage;
     parentId: string | null;
     branches: string[];
     isLast: boolean;
-    loadingIndicator: ReactNode | null;
-    setLoadingIndicator: (value: ReactNode | null) => void;
+    inProgressIndicator: ReactNode | null;
+    setInProgressIndicator: (value: ReactNode | null) => void;
     isCopied: boolean;
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
@@ -341,4 +346,4 @@ declare const useGoToNextBranch: () => (() => void) | null;
 
 declare const useGoToPreviousBranch: () => (() => void) | null;
 
-export { index$1 as ActionBarPrimitive, type AppendContentPart, type AppendMessage, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as ContentPartPrimitive, type ImageContentPart, index$3 as MessagePrimitive, type VercelRSCMessage as RSCMessage, type TextContentPart, index$5 as ThreadPrimitive, VercelAIAssistantProvider, type VercelAIAssistantProviderProps, VercelRSCAssistantProvider, type VercelRSCAssistantProviderProps, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };
+export { index$1 as ActionBarPrimitive, type AppendContentPart, type AppendMessage, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as ContentPartPrimitive, type ImageContentPart, index$3 as MessagePrimitive, type VercelRSCMessage as RSCMessage, type TextContentPart, index$5 as ThreadPrimitive, VercelAIAssistantProvider, type VercelAIAssistantProviderProps, VercelRSCAssistantProvider, type VercelRSCAssistantProviderProps, getVercelMessage as unstable_getVercelMessage, getVercelRSCMessage as unstable_getVercelRSCMessage, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { FC, ReactNode, PropsWithChildren, ComponentType } from 'react';
 import { TextareaAutosizeProps } from 'react-textarea-autosize';
 import { UseChatHelpers, UseAssistantHelpers } from 'ai/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Message } from 'ai';
 import { UseBoundStore, StoreApi } from 'zustand';
 
 declare const ThreadRoot: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -145,6 +146,7 @@ type UserMessage = BaseMessage & {
 type AssistantMessage = BaseMessage & {
     role: "assistant";
     content: AssistantContentPart[];
+    status: "in_progress" | "done" | "error";
 };
 type AppendMessage = {
     parentId: string | null;
@@ -199,14 +201,14 @@ type MessageContentProps = {
 };
 declare const MessageContent: FC<MessageContentProps>;
 
-declare const MessageLoading: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const MessageInProgress: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean;
 }, "key" | keyof react.HTMLAttributes<HTMLDivElement> | "asChild"> & react.RefAttributes<HTMLDivElement>>;
 
 declare namespace index$3 {
-  export { MessageContent as Content, MessageIf as If, MessageLoading as Loading, MessageProvider as Provider, MessageRoot as Root };
+  export { MessageContent as Content, MessageIf as If, MessageInProgress as InProgress, MessageProvider as Provider, MessageRoot as Root };
 }
 
 declare const BranchPickerNext: react.ForwardRefExoticComponent<Pick<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -274,14 +276,14 @@ declare namespace index$1 {
 
 type ContentPartProviderProps = PropsWithChildren<{
     part: ThreadMessage["content"][number];
-    isLoading: boolean;
+    status: "in_progress" | "done" | "error";
 }>;
 declare const ContentPartProvider: FC<ContentPartProviderProps>;
 
-declare const ContentPartLoadingIndicator: FC;
+declare const ContentPartInProgressIndicator: FC;
 
 declare namespace index {
-  export { ContentPartLoadingIndicator as LoadingIndicator, ContentPartProvider as Provider };
+  export { ContentPartInProgressIndicator as InProgressIndicator, ContentPartProvider as Provider };
 }
 
 type VercelAIAssistantProviderProps = PropsWithChildren<{
@@ -310,13 +312,16 @@ type RSCMessageConverter<T> = {
 type VercelRSCAssistantProviderProps<T = VercelRSCMessage> = VercelRSCAssistantProviderBaseProps<T> & (T extends VercelRSCMessage ? object : RSCMessageConverter<T>);
 declare const VercelRSCAssistantProvider: <T extends WeakKey = VercelRSCMessage>({ children, convertMessage, messages: vercelMessages, append: appendCallback, edit, reload, }: VercelRSCAssistantProviderProps<T>) => react_jsx_runtime.JSX.Element;
 
+declare const getVercelMessage: (message: ThreadMessage) => Message | undefined;
+declare const getVercelRSCMessage: <T>(message: ThreadMessage) => T | undefined;
+
 type MessageState = {
     message: ThreadMessage;
     parentId: string | null;
     branches: string[];
     isLast: boolean;
-    loadingIndicator: ReactNode | null;
-    setLoadingIndicator: (value: ReactNode | null) => void;
+    inProgressIndicator: ReactNode | null;
+    setInProgressIndicator: (value: ReactNode | null) => void;
     isCopied: boolean;
     setIsCopied: (value: boolean) => void;
     isHovering: boolean;
@@ -341,4 +346,4 @@ declare const useGoToNextBranch: () => (() => void) | null;
 
 declare const useGoToPreviousBranch: () => (() => void) | null;
 
-export { index$1 as ActionBarPrimitive, type AppendContentPart, type AppendMessage, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as ContentPartPrimitive, type ImageContentPart, index$3 as MessagePrimitive, type VercelRSCMessage as RSCMessage, type TextContentPart, index$5 as ThreadPrimitive, VercelAIAssistantProvider, type VercelAIAssistantProviderProps, VercelRSCAssistantProvider, type VercelRSCAssistantProviderProps, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };
+export { index$1 as ActionBarPrimitive, type AppendContentPart, type AppendMessage, index$2 as BranchPickerPrimitive, index$4 as ComposerPrimitive, index as ContentPartPrimitive, type ImageContentPart, index$3 as MessagePrimitive, type VercelRSCMessage as RSCMessage, type TextContentPart, index$5 as ThreadPrimitive, VercelAIAssistantProvider, type VercelAIAssistantProviderProps, VercelRSCAssistantProvider, type VercelRSCAssistantProviderProps, getVercelMessage as unstable_getVercelMessage, getVercelRSCMessage as unstable_getVercelRSCMessage, useMessageContext as unstable_useMessageContext, useBeginMessageEdit, useCopyMessage, useGoToNextBranch, useGoToPreviousBranch, useReloadMessage };

package/dist/index.js

@@ -38,6 +38,8 @@ __export(src_exports, {
   ThreadPrimitive: () => thread_exports,
   VercelAIAssistantProvider: () => VercelAIAssistantProvider,
   VercelRSCAssistantProvider: () => VercelRSCAssistantProvider,
+  unstable_getVercelMessage: () => getVercelMessage,
+  unstable_getVercelRSCMessage: () => getVercelRSCMessage,
   unstable_useMessageContext: () => useMessageContext,
   useBeginMessageEdit: () => useBeginMessageEdit,
   useCopyMessage: () => useCopyMessage,
@@ -110,15 +112,15 @@ var import_react_primitive2 = require("@radix-ui/react-primitive");
 var import_react5 = require("react");
 
 // src/utils/hooks/useOnResizeContent.tsx
+var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
 var import_react3 = require("react");
 var useOnResizeContent = (ref, callback) => {
-  const callbackRef = (0, import_react3.useRef)(callback);
-  callbackRef.current = callback;
+  const callbackRef = (0, import_react_use_callback_ref.useCallbackRef)(callback);
   (0, import_react3.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
-      callbackRef.current();
+      callbackRef();
     });
     const mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -133,7 +135,7 @@ var useOnResizeContent = (ref, callback) => {
           }
         }
       }
-      callbackRef.current();
+      callbackRef();
     });
     resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
@@ -144,20 +146,20 @@ var useOnResizeContent = (ref, callback) => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [ref.current]);
+  }, [ref.current, callbackRef]);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
+var import_react_use_callback_ref2 = require("@radix-ui/react-use-callback-ref");
 var import_react4 = require("react");
 var useOnScrollToBottom = (callback) => {
-  const callbackRef = (0, import_react4.useRef)(callback);
-  callbackRef.current = callback;
+  const callbackRef = (0, import_react_use_callback_ref2.useCallbackRef)(callback);
   const { useViewport } = useAssistantContext();
   (0, import_react4.useEffect)(() => {
     return useViewport.getState().onScrollToBottom(() => {
-      callbackRef.current();
+      callbackRef();
     });
-  }, [useViewport]);
+  }, [useViewport, callbackRef]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
@@ -253,7 +255,7 @@ var message_exports = {};
 __export(message_exports, {
   Content: () => MessageContent,
   If: () => MessageIf,
-  Loading: () => MessageLoading,
+  InProgress: () => MessageInProgress,
   Provider: () => MessageProvider,
   Root: () => MessageRoot
 });
@@ -333,11 +335,11 @@ var useMessageContext2 = () => {
       parentId: null,
       branches: [],
       isLast: false,
-      loadingIndicator: null,
+      inProgressIndicator: null,
       isCopied: false,
       isHovering: false,
-      setLoadingIndicator: (value) => {
-        set({ loadingIndicator: value });
+      setInProgressIndicator: (value) => {
+        set({ inProgressIndicator: value });
       },
       setIsCopied: (value) => {
         set({ isCopied: value });
@@ -478,15 +480,15 @@ var useContentPartContext = () => {
   return context;
 };
 
-// src/primitives/contentPart/ContentPartLoadingIndicator.tsx
-var ContentPartLoadingIndicator = () => {
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
   const { useMessage } = useMessageContext();
   const { useContentPart } = useContentPartContext();
-  const loadingIndicator = useCombinedStore(
+  const indicator = useCombinedStore(
     [useMessage, useContentPart],
-    (m, c) => c.isLoading ? m.loadingIndicator : null
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
   );
-  return loadingIndicator;
+  return indicator;
 };
 
 // src/primitives/contentPart/ContentPartProvider.tsx
@@ -497,7 +499,7 @@ var useContentPartContext2 = () => {
   const [context] = (0, import_react13.useState)(() => {
     const useContentPart = (0, import_zustand3.create)(() => ({
       part: null,
-      isLoading: false
+      status: "done"
     }));
     return { useContentPart };
   });
@@ -505,7 +507,7 @@ var useContentPartContext2 = () => {
 };
 var ContentPartProvider = ({
   part,
-  isLoading,
+  status,
   children
 }) => {
   const context = useContentPartContext2();
@@ -513,11 +515,11 @@ var ContentPartProvider = ({
     context.useContentPart.setState(
       {
         part,
-        isLoading
+        status
       },
       true
     );
-  }, [context, part, isLoading]);
+  }, [context, part, status]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ContentPartContext.Provider, { value: context, children });
 };
 
@@ -526,7 +528,7 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var defaultComponents = {
   Text: ({ part }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     part.text,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContentPartLoadingIndicator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ContentPartInProgressIndicator, {})
   ] }),
   Image: () => null,
   UI: ({ part }) => part.display,
@@ -542,13 +544,10 @@ var MessageContent = ({
     tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
   } = {}
 }) => {
-  const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
-  const content = useMessage((s) => s.message.content);
-  const isLoading = useCombinedStore(
-    [useThread, useMessage],
-    (t, s) => s.isLast && t.isRunning
-  );
+  const message = useMessage((s) => s.message);
+  const content = message.content;
+  const status = message.role === "assistant" ? message.status : "done";
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: content.map((part, i) => {
     const key = i;
     const type = part.type;
@@ -575,7 +574,7 @@ var MessageContent = ({
       ContentPartProvider,
       {
         part,
-        isLoading: i === content.length - 1 && isLoading,
+        status: i === content.length - 1 ? status : "done",
         children: component
       },
       key
@@ -583,14 +582,14 @@ var MessageContent = ({
   }) });
 };
 
-// src/primitives/message/MessageLoading.tsx
+// src/primitives/message/MessageInProgress.tsx
 var import_react_primitive4 = require("@radix-ui/react-primitive");
 var import_react14 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var MessageLoading = (0, import_react14.forwardRef)((props, ref) => {
+var MessageInProgress = (0, import_react14.forwardRef)((props, ref) => {
   const { useMessage } = useMessageContext();
   (0, import_react14.useMemo)(() => {
-    useMessage.getState().setLoadingIndicator(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_primitive4.Primitive.div, { ...props, ref }));
+    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_primitive4.Primitive.div, { ...props, ref }));
   }, [useMessage, props, ref]);
   return null;
 });
@@ -892,7 +891,6 @@ var useGoToPreviousBranch = () => {
     const { message, branches } = useMessage.getState();
     useThread.getState().switchToBranch(
       branches[branches.indexOf(message.id) - 1]
-      // TODO probably there's a more elegant way to do this
     );
   };
 };
@@ -1025,7 +1023,7 @@ var ActionBarEdit = createActionButton(useBeginMessageEdit);
 // src/primitives/contentPart/index.ts
 var contentPart_exports = {};
 __export(contentPart_exports, {
-  LoadingIndicator: () => ContentPartLoadingIndicator,
+  InProgressIndicator: () => ContentPartInProgressIndicator,
   Provider: () => ContentPartProvider
 });
 
@@ -1089,6 +1087,7 @@ var useDummyAIAssistantContext = () => {
 };
 
 // src/adapters/vercel/useVercelAIThreadState.tsx
+var import_react_use_callback_ref3 = require("@radix-ui/react-use-callback-ref");
 var import_react25 = require("react");
 
 // src/adapters/MessageRepository.tsx
@@ -1099,7 +1098,6 @@ var generateId = (0, import_non_secure.customAlphabet)(
 );
 var optimisticPrefix = "__optimistic__";
 var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
-var isOptimisticId = (id) => id.startsWith(optimisticPrefix);
 var findHead = (message) => {
   if (message.next) return findHead(message.next);
   return message;
@@ -1183,7 +1181,8 @@ var MessageRepository = class {
     this.addOrUpdateMessage(parentId, {
       ...message,
       id: optimisticId,
-      createdAt: /* @__PURE__ */ new Date()
+      createdAt: /* @__PURE__ */ new Date(),
+      ...message.role === "assistant" ? { status: "in_progress" } : void 0
     });
     return optimisticId;
   }
@@ -1253,8 +1252,8 @@ var MessageRepository = class {
 
 // src/adapters/ThreadMessageConverter.tsx
 var ThreadMessageConverter = class {
-  constructor(converter2) {
-    this.converter = converter2;
+  constructor(converter) {
+    this.converter = converter;
   }
   cache = /* @__PURE__ */ new WeakMap();
   convertMessages(messages) {
@@ -1268,33 +1267,55 @@ var ThreadMessageConverter = class {
   }
 };
 
+// src/adapters/vercel/VercelThreadMessage.tsx
+var symbolInnerMessage = Symbol("innerMessage");
+var symbolInnerRSCMessage = Symbol("innerRSCMessage");
+var getVercelMessage = (message) => {
+  return message[symbolInnerMessage];
+};
+var getVercelRSCMessage = (message) => {
+  return message[symbolInnerRSCMessage];
+};
+
 // src/adapters/vercel/useVercelAIThreadState.tsx
-var vercelToThreadMessage = (message) => {
-  if (message.role !== "user" && message.role !== "assistant")
-    throw new Error(
-      `You have a message with an unsupported role. The role ${message.role} is not supported.`
-    );
-  return {
+var vercelToThreadMessage = (message, status) => {
+  const common = {
     id: message.id,
-    role: message.role,
-    content: [
-      ...message.content ? [{ type: "text", text: message.content }] : [],
-      ...message.toolInvocations?.map((t) => ({
-        type: "tool-call",
-        name: t.toolName,
-        args: t.args,
-        result: "result" in t ? t.result : void 0
-      })) ?? []
-    ],
-    // ignore type mismatch for now
     createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    innerMessage: message
+    [symbolInnerMessage]: message
   };
+  switch (message.role) {
+    case "user":
+      return {
+        ...common,
+        role: "user",
+        content: [{ type: "text", text: message.content }]
+      };
+    case "assistant":
+      return {
+        ...common,
+        role: "assistant",
+        content: [
+          ...message.content ? [{ type: "text", text: message.content }] : [],
+          ...message.toolInvocations?.map(
+            (t) => ({
+              type: "tool-call",
+              name: t.toolName,
+              args: t.args,
+              result: "result" in t ? t.result : void 0
+            })
+          ) ?? []
+        ],
+        status
+      };
+    default:
+      throw new Error(
+        `You have a message with an unsupported role. The role ${message.role} is not supported.`
+      );
+  }
 };
-var converter = new ThreadMessageConverter(vercelToThreadMessage);
 var sliceMessagesUntil = (messages, messageId) => {
   if (messageId == null) return [];
-  if (isOptimisticId(messageId)) return messages;
   const messageIdx = messages.findIndex((m) => m.id === messageId);
   if (messageIdx === -1)
     throw new Error(
@@ -1311,9 +1332,14 @@ var getIsRunning = (vercel) => {
 };
 var useVercelAIThreadState = (vercel) => {
   const [data] = (0, import_react25.useState)(() => new MessageRepository());
-  const vercelRef = (0, import_react25.useRef)(vercel);
-  vercelRef.current = vercel;
-  const isRunning = getIsRunning(vercelRef.current);
+  const isRunning = getIsRunning(vercel);
+  const convertCallback = (0, import_react_use_callback_ref3.useCallbackRef)((message) => {
+    return vercelToThreadMessage(
+      message,
+      vercel.messages.at(-1) === message && isRunning ? "in_progress" : "done"
+    );
+  });
+  const converter = new ThreadMessageConverter(convertCallback);
   const assistantOptimisticIdRef = (0, import_react25.useRef)(null);
   const messages = (0, import_react25.useMemo)(() => {
     const vm = converter.convertMessages(vercel.messages);
@@ -1337,55 +1363,46 @@ var useVercelAIThreadState = (vercel) => {
     }
     data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
     return data.getMessages();
-  }, [data, isRunning, vercel.messages]);
+  }, [converter, data, isRunning, vercel.messages]);
   const getBranches2 = (0, import_react25.useCallback)(
     (messageId) => {
       return data.getBranches(messageId);
     },
     [data]
   );
-  const switchToBranch2 = (0, import_react25.useCallback)(
-    (messageId) => {
-      data.switchToBranch(messageId);
-      vercelRef.current.setMessages(
-        data.getMessages().filter((m) => !isOptimisticId(m.id)).map((m) => m.innerMessage)
-      );
-    },
-    [data]
-  );
-  const startRun = (0, import_react25.useCallback)(async (parentId) => {
-    const reloadMaybe = "reload" in vercelRef.current ? vercelRef.current.reload : void 0;
+  const switchToBranch2 = (0, import_react_use_callback_ref3.useCallbackRef)((messageId) => {
+    data.switchToBranch(messageId);
+    vercel.setMessages(
+      data.getMessages().map(getVercelMessage).filter((m) => m != null)
+    );
+  });
+  const startRun = (0, import_react_use_callback_ref3.useCallbackRef)(async (parentId) => {
+    const reloadMaybe = "reload" in vercel ? vercel.reload : void 0;
     if (!reloadMaybe)
       throw new Error(
         "Reload is not supported by Vercel AI SDK's useAssistant."
       );
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      parentId
-    );
-    vercelRef.current.setMessages(newMessages);
+    const newMessages = sliceMessagesUntil(vercel.messages, parentId);
+    vercel.setMessages(newMessages);
     await reloadMaybe();
-  }, []);
-  const append = (0, import_react25.useCallback)(async (message) => {
+  });
+  const append = (0, import_react_use_callback_ref3.useCallbackRef)(async (message) => {
     if (message.content.length !== 1 || message.content[0]?.type !== "text")
       throw new Error("Only text content is supported by Vercel AI SDK.");
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      message.parentId
-    );
-    vercelRef.current.setMessages(newMessages);
-    await vercelRef.current.append({
+    const newMessages = sliceMessagesUntil(vercel.messages, message.parentId);
+    vercel.setMessages(newMessages);
+    await vercel.append({
       role: "user",
       content: message.content[0].text
     });
-  }, []);
-  const cancelRun2 = (0, import_react25.useCallback)(() => {
-    const lastMessage = vercelRef.current.messages.at(-1);
-    vercelRef.current.stop();
+  });
+  const cancelRun2 = (0, import_react_use_callback_ref3.useCallbackRef)(() => {
+    const lastMessage = vercel.messages.at(-1);
+    vercel.stop();
     if (lastMessage?.role === "user") {
-      vercelRef.current.setInput(lastMessage.content);
+      vercel.setInput(lastMessage.content);
     }
-  }, []);
+  });
   return (0, import_react25.useMemo)(
     () => ({
       isRunning,
@@ -1432,12 +1449,15 @@ var VercelAIAssistantProvider = ({
 // src/adapters/vercel/VercelRSCAssistantProvider.tsx
 var import_react27 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var vercelToThreadMessage2 = (message) => {
+var vercelToThreadMessage2 = (converter, rawMessage) => {
+  const message = converter(rawMessage);
   return {
     id: message.id,
     role: message.role,
     content: [{ type: "ui", display: message.display }],
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    ...{ status: "done" },
+    [symbolInnerRSCMessage]: rawMessage
   };
 };
 var EMPTY_BRANCHES = [];
@@ -1470,15 +1490,15 @@ var VercelRSCAssistantProvider = ({
     setIsRunning(true);
     return callback.finally(() => setIsRunning(false));
   }, []);
-  const converter2 = (0, import_react27.useMemo)(() => {
+  const converter = (0, import_react27.useMemo)(() => {
     const rscConverter = convertMessage ?? ((m) => m);
     return new ThreadMessageConverter((m) => {
-      return vercelToThreadMessage2(rscConverter(m));
+      return vercelToThreadMessage2(rscConverter, m);
     });
   }, [convertMessage]);
   const messages = (0, import_react27.useMemo)(() => {
-    return converter2.convertMessages(vercelMessages);
-  }, [converter2, vercelMessages]);
+    return converter.convertMessages(vercelMessages);
+  }, [converter, vercelMessages]);
   const append = (0, import_react27.useCallback)(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
@@ -1529,6 +1549,8 @@ var VercelRSCAssistantProvider = ({
   ThreadPrimitive,
   VercelAIAssistantProvider,
   VercelRSCAssistantProvider,
+  unstable_getVercelMessage,
+  unstable_getVercelRSCMessage,
   unstable_useMessageContext,
   useBeginMessageEdit,
   useCopyMessage,

package/dist/index.mjs

@@ -68,18 +68,18 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import {
   Primitive as Primitive2
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef2, useRef as useRef3 } from "react";
+import { forwardRef as forwardRef2, useRef } from "react";
 
 // src/utils/hooks/useOnResizeContent.tsx
-import { useEffect, useRef } from "react";
+import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
+import { useEffect } from "react";
 var useOnResizeContent = (ref, callback) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
+  const callbackRef = useCallbackRef(callback);
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const resizeObserver = new ResizeObserver(() => {
-      callbackRef.current();
+      callbackRef();
     });
     const mutationObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -94,7 +94,7 @@ var useOnResizeContent = (ref, callback) => {
           }
         }
       }
-      callbackRef.current();
+      callbackRef();
     });
     resizeObserver.observe(el);
     mutationObserver.observe(el, { childList: true });
@@ -105,31 +105,31 @@ var useOnResizeContent = (ref, callback) => {
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [ref.current]);
+  }, [ref.current, callbackRef]);
 };
 
 // src/utils/hooks/useOnScrollToBottom.tsx
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useCallbackRef as useCallbackRef2 } from "@radix-ui/react-use-callback-ref";
+import { useEffect as useEffect2 } from "react";
 var useOnScrollToBottom = (callback) => {
-  const callbackRef = useRef2(callback);
-  callbackRef.current = callback;
+  const callbackRef = useCallbackRef2(callback);
   const { useViewport } = useAssistantContext();
   useEffect2(() => {
     return useViewport.getState().onScrollToBottom(() => {
-      callbackRef.current();
+      callbackRef();
     });
-  }, [useViewport]);
+  }, [useViewport, callbackRef]);
 };
 
 // src/primitives/thread/ThreadViewport.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ThreadViewport = forwardRef2(({ autoScroll = true, onScroll, children, ...rest }, forwardedRef) => {
-  const messagesEndRef = useRef3(null);
-  const divRef = useRef3(null);
+  const messagesEndRef = useRef(null);
+  const divRef = useRef(null);
   const ref = useComposedRefs(forwardedRef, divRef);
   const { useViewport } = useAssistantContext();
-  const firstRenderRef = useRef3(true);
-  const lastScrollTop = useRef3(0);
+  const firstRenderRef = useRef(true);
+  const lastScrollTop = useRef(0);
   const scrollToBottom = () => {
     const div = messagesEndRef.current;
     if (!div || !autoScroll) return;
@@ -214,7 +214,7 @@ var message_exports = {};
 __export(message_exports, {
   Content: () => MessageContent,
   If: () => MessageIf,
-  Loading: () => MessageLoading,
+  InProgress: () => MessageInProgress,
   Provider: () => MessageProvider,
   Root: () => MessageRoot
 });
@@ -296,11 +296,11 @@ var useMessageContext2 = () => {
       parentId: null,
       branches: [],
       isLast: false,
-      loadingIndicator: null,
+      inProgressIndicator: null,
       isCopied: false,
       isHovering: false,
-      setLoadingIndicator: (value) => {
-        set({ loadingIndicator: value });
+      setInProgressIndicator: (value) => {
+        set({ inProgressIndicator: value });
       },
       setIsCopied: (value) => {
         set({ isCopied: value });
@@ -443,15 +443,15 @@ var useContentPartContext = () => {
   return context;
 };
 
-// src/primitives/contentPart/ContentPartLoadingIndicator.tsx
-var ContentPartLoadingIndicator = () => {
+// src/primitives/contentPart/ContentPartInProgressIndicator.tsx
+var ContentPartInProgressIndicator = () => {
   const { useMessage } = useMessageContext();
   const { useContentPart } = useContentPartContext();
-  const loadingIndicator = useCombinedStore(
+  const indicator = useCombinedStore(
     [useMessage, useContentPart],
-    (m, c) => c.isLoading ? m.loadingIndicator : null
+    (m, c) => c.status === "in_progress" ? m.inProgressIndicator : null
   );
-  return loadingIndicator;
+  return indicator;
 };
 
 // src/primitives/contentPart/ContentPartProvider.tsx
@@ -462,7 +462,7 @@ var useContentPartContext2 = () => {
   const [context] = useState2(() => {
     const useContentPart = create3(() => ({
       part: null,
-      isLoading: false
+      status: "done"
     }));
     return { useContentPart };
   });
@@ -470,7 +470,7 @@ var useContentPartContext2 = () => {
 };
 var ContentPartProvider = ({
   part,
-  isLoading,
+  status,
   children
 }) => {
   const context = useContentPartContext2();
@@ -478,11 +478,11 @@ var ContentPartProvider = ({
     context.useContentPart.setState(
       {
         part,
-        isLoading
+        status
       },
       true
     );
-  }, [context, part, isLoading]);
+  }, [context, part, status]);
   return /* @__PURE__ */ jsx6(ContentPartContext.Provider, { value: context, children });
 };
 
@@ -491,7 +491,7 @@ import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultComponents = {
   Text: ({ part }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
     part.text,
-    /* @__PURE__ */ jsx7(ContentPartLoadingIndicator, {})
+    /* @__PURE__ */ jsx7(ContentPartInProgressIndicator, {})
   ] }),
   Image: () => null,
   UI: ({ part }) => part.display,
@@ -507,13 +507,10 @@ var MessageContent = ({
     tools: { by_name = {}, Fallback = defaultComponents.tools.Fallback } = {}
   } = {}
 }) => {
-  const { useThread } = useAssistantContext();
   const { useMessage } = useMessageContext();
-  const content = useMessage((s) => s.message.content);
-  const isLoading = useCombinedStore(
-    [useThread, useMessage],
-    (t, s) => s.isLast && t.isRunning
-  );
+  const message = useMessage((s) => s.message);
+  const content = message.content;
+  const status = message.role === "assistant" ? message.status : "done";
   return /* @__PURE__ */ jsx7(Fragment, { children: content.map((part, i) => {
     const key = i;
     const type = part.type;
@@ -540,7 +537,7 @@ var MessageContent = ({
       ContentPartProvider,
       {
         part,
-        isLoading: i === content.length - 1 && isLoading,
+        status: i === content.length - 1 ? status : "done",
         children: component
       },
       key
@@ -548,16 +545,16 @@ var MessageContent = ({
   }) });
 };
 
-// src/primitives/message/MessageLoading.tsx
+// src/primitives/message/MessageInProgress.tsx
 import {
   Primitive as Primitive4
 } from "@radix-ui/react-primitive";
 import { forwardRef as forwardRef4, useMemo as useMemo4 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var MessageLoading = forwardRef4((props, ref) => {
+var MessageInProgress = forwardRef4((props, ref) => {
   const { useMessage } = useMessageContext();
   useMemo4(() => {
-    useMessage.getState().setLoadingIndicator(/* @__PURE__ */ jsx8(Primitive4.div, { ...props, ref }));
+    useMessage.getState().setInProgressIndicator(/* @__PURE__ */ jsx8(Primitive4.div, { ...props, ref }));
   }, [useMessage, props, ref]);
   return null;
 });
@@ -666,13 +663,13 @@ import { useComposedRefs as useComposedRefs2 } from "@radix-ui/react-compose-ref
 import {
   Primitive as Primitive7
 } from "@radix-ui/react-primitive";
-import { forwardRef as forwardRef7, useRef as useRef4 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef2 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var ComposerRoot = forwardRef7(
   ({ onSubmit, ...rest }, forwardedRef) => {
     const { useViewport } = useAssistantContext();
     const { useComposer } = useComposerContext();
-    const formRef = useRef4(null);
+    const formRef = useRef2(null);
     const ref = useComposedRefs2(forwardedRef, formRef);
     const handleSubmit = (e) => {
       const composerState = useComposer.getState();
@@ -700,7 +697,7 @@ import {
   forwardRef as forwardRef8,
   useCallback,
   useEffect as useEffect3,
-  useRef as useRef5
+  useRef as useRef3
 } from "react";
 import TextareaAutosize from "react-textarea-autosize";
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -729,7 +726,7 @@ var ComposerInput = forwardRef8(
         }
       }
     };
-    const textareaRef = useRef5(null);
+    const textareaRef = useRef3(null);
     const ref = useComposedRefs3(forwardedRef, textareaRef);
     const autoFocusEnabled = autoFocus && !disabled;
     const focus = useCallback(() => {
@@ -876,7 +873,6 @@ var useGoToPreviousBranch = () => {
     const { message, branches } = useMessage.getState();
     useThread.getState().switchToBranch(
       branches[branches.indexOf(message.id) - 1]
-      // TODO probably there's a more elegant way to do this
     );
   };
 };
@@ -1013,7 +1009,7 @@ var ActionBarEdit = createActionButton(useBeginMessageEdit);
 // src/primitives/contentPart/index.ts
 var contentPart_exports = {};
 __export(contentPart_exports, {
-  LoadingIndicator: () => ContentPartLoadingIndicator,
+  InProgressIndicator: () => ContentPartInProgressIndicator,
   Provider: () => ContentPartProvider
 });
 
@@ -1077,7 +1073,8 @@ var useDummyAIAssistantContext = () => {
 };
 
 // src/adapters/vercel/useVercelAIThreadState.tsx
-import { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef6, useState as useState4 } from "react";
+import { useCallbackRef as useCallbackRef3 } from "@radix-ui/react-use-callback-ref";
+import { useCallback as useCallback2, useMemo as useMemo5, useRef as useRef4, useState as useState4 } from "react";
 
 // src/adapters/MessageRepository.tsx
 import { customAlphabet } from "nanoid/non-secure";
@@ -1087,7 +1084,6 @@ var generateId = customAlphabet(
 );
 var optimisticPrefix = "__optimistic__";
 var generateOptimisticId = () => `${optimisticPrefix}${generateId()}`;
-var isOptimisticId = (id) => id.startsWith(optimisticPrefix);
 var findHead = (message) => {
   if (message.next) return findHead(message.next);
   return message;
@@ -1171,7 +1167,8 @@ var MessageRepository = class {
     this.addOrUpdateMessage(parentId, {
       ...message,
       id: optimisticId,
-      createdAt: /* @__PURE__ */ new Date()
+      createdAt: /* @__PURE__ */ new Date(),
+      ...message.role === "assistant" ? { status: "in_progress" } : void 0
     });
     return optimisticId;
   }
@@ -1241,8 +1238,8 @@ var MessageRepository = class {
 
 // src/adapters/ThreadMessageConverter.tsx
 var ThreadMessageConverter = class {
-  constructor(converter2) {
-    this.converter = converter2;
+  constructor(converter) {
+    this.converter = converter;
   }
   cache = /* @__PURE__ */ new WeakMap();
   convertMessages(messages) {
@@ -1256,33 +1253,55 @@ var ThreadMessageConverter = class {
   }
 };
 
+// src/adapters/vercel/VercelThreadMessage.tsx
+var symbolInnerMessage = Symbol("innerMessage");
+var symbolInnerRSCMessage = Symbol("innerRSCMessage");
+var getVercelMessage = (message) => {
+  return message[symbolInnerMessage];
+};
+var getVercelRSCMessage = (message) => {
+  return message[symbolInnerRSCMessage];
+};
+
 // src/adapters/vercel/useVercelAIThreadState.tsx
-var vercelToThreadMessage = (message) => {
-  if (message.role !== "user" && message.role !== "assistant")
-    throw new Error(
-      `You have a message with an unsupported role. The role ${message.role} is not supported.`
-    );
-  return {
+var vercelToThreadMessage = (message, status) => {
+  const common = {
     id: message.id,
-    role: message.role,
-    content: [
-      ...message.content ? [{ type: "text", text: message.content }] : [],
-      ...message.toolInvocations?.map((t) => ({
-        type: "tool-call",
-        name: t.toolName,
-        args: t.args,
-        result: "result" in t ? t.result : void 0
-      })) ?? []
-    ],
-    // ignore type mismatch for now
     createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
-    innerMessage: message
+    [symbolInnerMessage]: message
   };
+  switch (message.role) {
+    case "user":
+      return {
+        ...common,
+        role: "user",
+        content: [{ type: "text", text: message.content }]
+      };
+    case "assistant":
+      return {
+        ...common,
+        role: "assistant",
+        content: [
+          ...message.content ? [{ type: "text", text: message.content }] : [],
+          ...message.toolInvocations?.map(
+            (t) => ({
+              type: "tool-call",
+              name: t.toolName,
+              args: t.args,
+              result: "result" in t ? t.result : void 0
+            })
+          ) ?? []
+        ],
+        status
+      };
+    default:
+      throw new Error(
+        `You have a message with an unsupported role. The role ${message.role} is not supported.`
+      );
+  }
 };
-var converter = new ThreadMessageConverter(vercelToThreadMessage);
 var sliceMessagesUntil = (messages, messageId) => {
   if (messageId == null) return [];
-  if (isOptimisticId(messageId)) return messages;
   const messageIdx = messages.findIndex((m) => m.id === messageId);
   if (messageIdx === -1)
     throw new Error(
@@ -1299,10 +1318,15 @@ var getIsRunning = (vercel) => {
 };
 var useVercelAIThreadState = (vercel) => {
   const [data] = useState4(() => new MessageRepository());
-  const vercelRef = useRef6(vercel);
-  vercelRef.current = vercel;
-  const isRunning = getIsRunning(vercelRef.current);
-  const assistantOptimisticIdRef = useRef6(null);
+  const isRunning = getIsRunning(vercel);
+  const convertCallback = useCallbackRef3((message) => {
+    return vercelToThreadMessage(
+      message,
+      vercel.messages.at(-1) === message && isRunning ? "in_progress" : "done"
+    );
+  });
+  const converter = new ThreadMessageConverter(convertCallback);
+  const assistantOptimisticIdRef = useRef4(null);
   const messages = useMemo5(() => {
     const vm = converter.convertMessages(vercel.messages);
     for (let i = 0; i < vm.length; i++) {
@@ -1325,55 +1349,46 @@ var useVercelAIThreadState = (vercel) => {
     }
     data.resetHead(assistantOptimisticIdRef.current ?? vm.at(-1)?.id ?? null);
     return data.getMessages();
-  }, [data, isRunning, vercel.messages]);
+  }, [converter, data, isRunning, vercel.messages]);
   const getBranches2 = useCallback2(
     (messageId) => {
       return data.getBranches(messageId);
     },
     [data]
   );
-  const switchToBranch2 = useCallback2(
-    (messageId) => {
-      data.switchToBranch(messageId);
-      vercelRef.current.setMessages(
-        data.getMessages().filter((m) => !isOptimisticId(m.id)).map((m) => m.innerMessage)
-      );
-    },
-    [data]
-  );
-  const startRun = useCallback2(async (parentId) => {
-    const reloadMaybe = "reload" in vercelRef.current ? vercelRef.current.reload : void 0;
+  const switchToBranch2 = useCallbackRef3((messageId) => {
+    data.switchToBranch(messageId);
+    vercel.setMessages(
+      data.getMessages().map(getVercelMessage).filter((m) => m != null)
+    );
+  });
+  const startRun = useCallbackRef3(async (parentId) => {
+    const reloadMaybe = "reload" in vercel ? vercel.reload : void 0;
     if (!reloadMaybe)
       throw new Error(
         "Reload is not supported by Vercel AI SDK's useAssistant."
       );
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      parentId
-    );
-    vercelRef.current.setMessages(newMessages);
+    const newMessages = sliceMessagesUntil(vercel.messages, parentId);
+    vercel.setMessages(newMessages);
     await reloadMaybe();
-  }, []);
-  const append = useCallback2(async (message) => {
+  });
+  const append = useCallbackRef3(async (message) => {
     if (message.content.length !== 1 || message.content[0]?.type !== "text")
       throw new Error("Only text content is supported by Vercel AI SDK.");
-    const newMessages = sliceMessagesUntil(
-      vercelRef.current.messages,
-      message.parentId
-    );
-    vercelRef.current.setMessages(newMessages);
-    await vercelRef.current.append({
+    const newMessages = sliceMessagesUntil(vercel.messages, message.parentId);
+    vercel.setMessages(newMessages);
+    await vercel.append({
       role: "user",
       content: message.content[0].text
     });
-  }, []);
-  const cancelRun2 = useCallback2(() => {
-    const lastMessage = vercelRef.current.messages.at(-1);
-    vercelRef.current.stop();
+  });
+  const cancelRun2 = useCallbackRef3(() => {
+    const lastMessage = vercel.messages.at(-1);
+    vercel.stop();
     if (lastMessage?.role === "user") {
-      vercelRef.current.setInput(lastMessage.content);
+      vercel.setInput(lastMessage.content);
     }
-  }, []);
+  });
   return useMemo5(
     () => ({
       isRunning,
@@ -1424,12 +1439,15 @@ import {
   useState as useState5
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var vercelToThreadMessage2 = (message) => {
+var vercelToThreadMessage2 = (converter, rawMessage) => {
+  const message = converter(rawMessage);
   return {
     id: message.id,
     role: message.role,
     content: [{ type: "ui", display: message.display }],
-    createdAt: message.createdAt ?? /* @__PURE__ */ new Date()
+    createdAt: message.createdAt ?? /* @__PURE__ */ new Date(),
+    ...{ status: "done" },
+    [symbolInnerRSCMessage]: rawMessage
   };
 };
 var EMPTY_BRANCHES = [];
@@ -1462,15 +1480,15 @@ var VercelRSCAssistantProvider = ({
     setIsRunning(true);
     return callback.finally(() => setIsRunning(false));
   }, []);
-  const converter2 = useMemo7(() => {
+  const converter = useMemo7(() => {
     const rscConverter = convertMessage ?? ((m) => m);
     return new ThreadMessageConverter((m) => {
-      return vercelToThreadMessage2(rscConverter(m));
+      return vercelToThreadMessage2(rscConverter, m);
     });
   }, [convertMessage]);
   const messages = useMemo7(() => {
-    return converter2.convertMessages(vercelMessages);
-  }, [converter2, vercelMessages]);
+    return converter.convertMessages(vercelMessages);
+  }, [converter, vercelMessages]);
   const append = useCallback3(
     async (message) => {
       if (message.parentId !== (context.useThread.getState().messages.at(-1)?.id ?? null)) {
@@ -1520,6 +1538,8 @@ export {
   thread_exports as ThreadPrimitive,
   VercelAIAssistantProvider,
   VercelRSCAssistantProvider,
+  getVercelMessage as unstable_getVercelMessage,
+  getVercelRSCMessage as unstable_getVercelRSCMessage,
   useMessageContext as unstable_useMessageContext,
   useBeginMessageEdit,
   useCopyMessage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assistant-ui/react",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "license": "MIT",
   "exports": {
     ".": {
@@ -31,6 +31,7 @@
     "@radix-ui/react-compose-refs": "^1.0.1",
     "@radix-ui/react-primitive": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-use-callback-ref": "^1.0.1",
     "ai": "^3.1.23",
     "nanoid": "^5.0.7",
     "react-textarea-autosize": "^8.5.3",