@ai-sdk/react 2.0.0-canary.8 → 2.0.0

package/dist/index.mjs

@@ -1,17 +1,27 @@
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+
 // src/use-chat.ts
-import {
-  callChatApi,
-  extractMaxToolInvocationStep,
-  fillMessageParts,
-  generateId as generateIdFunc,
-  getMessageParts,
-  isAssistantMessageWithCompletedToolCalls,
-  prepareAttachmentsForRequest,
-  shouldResubmitMessages,
-  updateToolCallResult
-} from "ai";
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
-import useSWR from "swr";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+
+// src/chat.react.ts
+import { AbstractChat } from "ai";
 
 // src/throttle.ts
 import throttleFunction from "throttleit";
@@ -19,363 +29,170 @@ function throttle(fn, waitMs) {
   return waitMs != null ? throttleFunction(fn, waitMs) : fn;
 }
 
-// src/util/use-stable-value.ts
-import { isDeepEqualData } from "ai";
-import { useEffect, useState } from "react";
-function useStableValue(latestValue) {
-  const [value, setValue] = useState(latestValue);
-  useEffect(() => {
-    if (!isDeepEqualData(latestValue, value)) {
-      setValue(latestValue);
-    }
-  }, [latestValue, value]);
-  return value;
-}
+// src/chat.react.ts
+var _messages, _status, _error, _messagesCallbacks, _statusCallbacks, _errorCallbacks, _callMessagesCallbacks, _callStatusCallbacks, _callErrorCallbacks;
+var ReactChatState = class {
+  constructor(initialMessages = []) {
+    __privateAdd(this, _messages, void 0);
+    __privateAdd(this, _status, "ready");
+    __privateAdd(this, _error, void 0);
+    __privateAdd(this, _messagesCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _statusCallbacks, /* @__PURE__ */ new Set());
+    __privateAdd(this, _errorCallbacks, /* @__PURE__ */ new Set());
+    this.pushMessage = (message) => {
+      __privateSet(this, _messages, __privateGet(this, _messages).concat(message));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.popMessage = () => {
+      __privateSet(this, _messages, __privateGet(this, _messages).slice(0, -1));
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.replaceMessage = (index, message) => {
+      __privateSet(this, _messages, [
+        ...__privateGet(this, _messages).slice(0, index),
+        // We deep clone the message here to ensure the new React Compiler (currently in RC) detects deeply nested parts/metadata changes:
+        this.snapshot(message),
+        ...__privateGet(this, _messages).slice(index + 1)
+      ]);
+      __privateGet(this, _callMessagesCallbacks).call(this);
+    };
+    this.snapshot = (value) => structuredClone(value);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => {
+      const callback = throttleWaitMs ? throttle(onChange, throttleWaitMs) : onChange;
+      __privateGet(this, _messagesCallbacks).add(callback);
+      return () => {
+        __privateGet(this, _messagesCallbacks).delete(callback);
+      };
+    };
+    this["~registerStatusCallback"] = (onChange) => {
+      __privateGet(this, _statusCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _statusCallbacks).delete(onChange);
+      };
+    };
+    this["~registerErrorCallback"] = (onChange) => {
+      __privateGet(this, _errorCallbacks).add(onChange);
+      return () => {
+        __privateGet(this, _errorCallbacks).delete(onChange);
+      };
+    };
+    __privateAdd(this, _callMessagesCallbacks, () => {
+      __privateGet(this, _messagesCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callStatusCallbacks, () => {
+      __privateGet(this, _statusCallbacks).forEach((callback) => callback());
+    });
+    __privateAdd(this, _callErrorCallbacks, () => {
+      __privateGet(this, _errorCallbacks).forEach((callback) => callback());
+    });
+    __privateSet(this, _messages, initialMessages);
+  }
+  get status() {
+    return __privateGet(this, _status);
+  }
+  set status(newStatus) {
+    __privateSet(this, _status, newStatus);
+    __privateGet(this, _callStatusCallbacks).call(this);
+  }
+  get error() {
+    return __privateGet(this, _error);
+  }
+  set error(newError) {
+    __privateSet(this, _error, newError);
+    __privateGet(this, _callErrorCallbacks).call(this);
+  }
+  get messages() {
+    return __privateGet(this, _messages);
+  }
+  set messages(newMessages) {
+    __privateSet(this, _messages, [...newMessages]);
+    __privateGet(this, _callMessagesCallbacks).call(this);
+  }
+};
+_messages = new WeakMap();
+_status = new WeakMap();
+_error = new WeakMap();
+_messagesCallbacks = new WeakMap();
+_statusCallbacks = new WeakMap();
+_errorCallbacks = new WeakMap();
+_callMessagesCallbacks = new WeakMap();
+_callStatusCallbacks = new WeakMap();
+_callErrorCallbacks = new WeakMap();
+var _state;
+var Chat = class extends AbstractChat {
+  constructor({ messages, ...init }) {
+    const state = new ReactChatState(messages);
+    super({ ...init, state });
+    __privateAdd(this, _state, void 0);
+    this["~registerMessagesCallback"] = (onChange, throttleWaitMs) => __privateGet(this, _state)["~registerMessagesCallback"](onChange, throttleWaitMs);
+    this["~registerStatusCallback"] = (onChange) => __privateGet(this, _state)["~registerStatusCallback"](onChange);
+    this["~registerErrorCallback"] = (onChange) => __privateGet(this, _state)["~registerErrorCallback"](onChange);
+    __privateSet(this, _state, state);
+  }
+};
+_state = new WeakMap();
 
 // src/use-chat.ts
 function useChat({
-  api = "/api/chat",
-  id,
-  initialMessages,
-  initialInput = "",
-  sendExtraMessageFields,
-  onToolCall,
-  experimental_prepareRequestBody,
-  maxSteps = 1,
-  streamProtocol = "data",
-  onResponse,
-  onFinish,
-  onError,
-  credentials,
-  headers,
-  body,
-  generateId = generateIdFunc,
-  fetch: fetch2,
-  keepLastMessageOnError = true,
-  experimental_throttle: throttleWaitMs
+  experimental_throttle: throttleWaitMs,
+  resume = false,
+  ...options
 } = {}) {
-  const [hookId] = useState2(generateId);
-  const chatId = id != null ? id : hookId;
-  const chatKey = typeof api === "string" ? [api, chatId] : chatId;
-  const stableInitialMessages = useStableValue(initialMessages != null ? initialMessages : []);
-  const processedInitialMessages = useMemo(
-    () => fillMessageParts(stableInitialMessages),
-    [stableInitialMessages]
+  const chatRef = useRef(
+    "chat" in options ? options.chat : new Chat(options)
   );
-  const { data: messages, mutate } = useSWR(
-    [chatKey, "messages"],
-    null,
-    { fallbackData: processedInitialMessages }
+  const shouldRecreateChat = "chat" in options && options.chat !== chatRef.current || "id" in options && chatRef.current.id !== options.id;
+  if (shouldRecreateChat) {
+    chatRef.current = "chat" in options ? options.chat : new Chat(options);
+  }
+  const optionsId = "id" in options ? options.id : null;
+  const subscribeToMessages = useCallback(
+    (update) => chatRef.current["~registerMessagesCallback"](update, throttleWaitMs),
+    // optionsId is required to trigger re-subscription when the chat ID changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [throttleWaitMs, optionsId]
   );
-  const messagesRef = useRef(messages || []);
-  useEffect2(() => {
-    messagesRef.current = messages || [];
-  }, [messages]);
-  const { data: streamData, mutate: mutateStreamData } = useSWR([chatKey, "streamData"], null);
-  const streamDataRef = useRef(streamData);
-  useEffect2(() => {
-    streamDataRef.current = streamData;
-  }, [streamData]);
-  const { data: status = "ready", mutate: mutateStatus } = useSWR([chatKey, "status"], null);
-  const { data: error = void 0, mutate: setError } = useSWR([chatKey, "error"], null);
-  const abortControllerRef = useRef(null);
-  const extraMetadataRef = useRef({
-    credentials,
-    headers,
-    body
-  });
-  useEffect2(() => {
-    extraMetadataRef.current = {
-      credentials,
-      headers,
-      body
-    };
-  }, [credentials, headers, body]);
-  const triggerRequest = useCallback(
-    async (chatRequest) => {
-      var _a, _b;
-      mutateStatus("submitted");
-      setError(void 0);
-      const chatMessages = fillMessageParts(chatRequest.messages);
-      const messageCount = chatMessages.length;
-      const maxStep = extractMaxToolInvocationStep(
-        (_a = chatMessages[chatMessages.length - 1]) == null ? void 0 : _a.toolInvocations
-      );
-      try {
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-        const throttledMutate = throttle(mutate, throttleWaitMs);
-        const throttledMutateStreamData = throttle(
-          mutateStreamData,
-          throttleWaitMs
-        );
-        const previousMessages = messagesRef.current;
-        throttledMutate(chatMessages, false);
-        const constructedMessagesPayload = sendExtraMessageFields ? chatMessages : chatMessages.map(
-          ({
-            role,
-            content,
-            experimental_attachments,
-            data,
-            annotations,
-            toolInvocations,
-            parts
-          }) => ({
-            role,
-            content,
-            ...experimental_attachments !== void 0 && {
-              experimental_attachments
-            },
-            ...data !== void 0 && { data },
-            ...annotations !== void 0 && { annotations },
-            ...toolInvocations !== void 0 && { toolInvocations },
-            ...parts !== void 0 && { parts }
-          })
-        );
-        const existingData = streamDataRef.current;
-        await callChatApi({
-          api,
-          body: (_b = experimental_prepareRequestBody == null ? void 0 : experimental_prepareRequestBody({
-            id: chatId,
-            messages: chatMessages,
-            requestData: chatRequest.data,
-            requestBody: chatRequest.body
-          })) != null ? _b : {
-            id: chatId,
-            messages: constructedMessagesPayload,
-            data: chatRequest.data,
-            ...extraMetadataRef.current.body,
-            ...chatRequest.body
-          },
-          streamProtocol,
-          credentials: extraMetadataRef.current.credentials,
-          headers: {
-            ...extraMetadataRef.current.headers,
-            ...chatRequest.headers
-          },
-          abortController: () => abortControllerRef.current,
-          restoreMessagesOnFailure() {
-            if (!keepLastMessageOnError) {
-              throttledMutate(previousMessages, false);
-            }
-          },
-          onResponse,
-          onUpdate({ message, data, replaceLastMessage }) {
-            mutateStatus("streaming");
-            throttledMutate(
-              [
-                ...replaceLastMessage ? chatMessages.slice(0, chatMessages.length - 1) : chatMessages,
-                message
-              ],
-              false
-            );
-            if (data == null ? void 0 : data.length) {
-              throttledMutateStreamData(
-                [...existingData != null ? existingData : [], ...data],
-                false
-              );
-            }
-          },
-          onToolCall,
-          onFinish,
-          generateId,
-          fetch: fetch2,
-          lastMessage: chatMessages[chatMessages.length - 1]
-        });
-        abortControllerRef.current = null;
-        mutateStatus("ready");
-      } catch (err) {
-        if (err.name === "AbortError") {
-          abortControllerRef.current = null;
-          mutateStatus("ready");
-          return null;
-        }
-        if (onError && err instanceof Error) {
-          onError(err);
-        }
-        setError(err);
-        mutateStatus("error");
-      }
-      const messages2 = messagesRef.current;
-      if (shouldResubmitMessages({
-        originalMaxToolInvocationStep: maxStep,
-        originalMessageCount: messageCount,
-        maxSteps,
-        messages: messages2
-      })) {
-        await triggerRequest({ messages: messages2 });
-      }
-    },
-    [
-      mutate,
-      mutateStatus,
-      api,
-      extraMetadataRef,
-      onResponse,
-      onFinish,
-      onError,
-      setError,
-      mutateStreamData,
-      streamDataRef,
-      streamProtocol,
-      sendExtraMessageFields,
-      experimental_prepareRequestBody,
-      onToolCall,
-      maxSteps,
-      messagesRef,
-      abortControllerRef,
-      generateId,
-      fetch2,
-      keepLastMessageOnError,
-      throttleWaitMs,
-      chatId
-    ]
+  const messages = useSyncExternalStore(
+    subscribeToMessages,
+    () => chatRef.current.messages,
+    () => chatRef.current.messages
   );
-  const append = useCallback(
-    async (message, {
-      data,
-      headers: headers2,
-      body: body2,
-      experimental_attachments
-    } = {}) => {
-      var _a, _b;
-      const attachmentsForRequest = await prepareAttachmentsForRequest(
-        experimental_attachments
-      );
-      const messages2 = messagesRef.current.concat({
-        ...message,
-        id: (_a = message.id) != null ? _a : generateId(),
-        createdAt: (_b = message.createdAt) != null ? _b : /* @__PURE__ */ new Date(),
-        experimental_attachments: attachmentsForRequest.length > 0 ? attachmentsForRequest : void 0,
-        parts: getMessageParts(message)
-      });
-      return triggerRequest({ messages: messages2, headers: headers2, body: body2, data });
-    },
-    [triggerRequest, generateId]
+  const status = useSyncExternalStore(
+    chatRef.current["~registerStatusCallback"],
+    () => chatRef.current.status,
+    () => chatRef.current.status
   );
-  const reload = useCallback(
-    async ({ data, headers: headers2, body: body2 } = {}) => {
-      const messages2 = messagesRef.current;
-      if (messages2.length === 0) {
-        return null;
-      }
-      const lastMessage = messages2[messages2.length - 1];
-      return triggerRequest({
-        messages: lastMessage.role === "assistant" ? messages2.slice(0, -1) : messages2,
-        headers: headers2,
-        body: body2,
-        data
-      });
-    },
-    [triggerRequest]
+  const error = useSyncExternalStore(
+    chatRef.current["~registerErrorCallback"],
+    () => chatRef.current.error,
+    () => chatRef.current.error
   );
-  const stop = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, []);
   const setMessages = useCallback(
-    (messages2) => {
-      if (typeof messages2 === "function") {
-        messages2 = messages2(messagesRef.current);
-      }
-      const messagesWithParts = fillMessageParts(messages2);
-      mutate(messagesWithParts, false);
-      messagesRef.current = messagesWithParts;
-    },
-    [mutate]
-  );
-  const setData = useCallback(
-    (data) => {
-      if (typeof data === "function") {
-        data = data(streamDataRef.current);
-      }
-      mutateStreamData(data, false);
-      streamDataRef.current = data;
-    },
-    [mutateStreamData]
-  );
-  const [input, setInput] = useState2(initialInput);
-  const handleSubmit = useCallback(
-    async (event, options = {}, metadata) => {
-      var _a;
-      (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
-      if (!input && !options.allowEmptySubmit)
-        return;
-      if (metadata) {
-        extraMetadataRef.current = {
-          ...extraMetadataRef.current,
-          ...metadata
-        };
+    (messagesParam) => {
+      if (typeof messagesParam === "function") {
+        messagesParam = messagesParam(chatRef.current.messages);
       }
-      const attachmentsForRequest = await prepareAttachmentsForRequest(
-        options.experimental_attachments
-      );
-      const messages2 = messagesRef.current.concat({
-        id: generateId(),
-        createdAt: /* @__PURE__ */ new Date(),
-        role: "user",
-        content: input,
-        experimental_attachments: attachmentsForRequest.length > 0 ? attachmentsForRequest : void 0,
-        parts: [{ type: "text", text: input }]
-      });
-      const chatRequest = {
-        messages: messages2,
-        headers: options.headers,
-        body: options.body,
-        data: options.data
-      };
-      triggerRequest(chatRequest);
-      setInput("");
+      chatRef.current.messages = messagesParam;
     },
-    [input, generateId, triggerRequest]
-  );
-  const handleInputChange = (e) => {
-    setInput(e.target.value);
-  };
-  const addToolResult = useCallback(
-    ({ toolCallId, result }) => {
-      const currentMessages = messagesRef.current;
-      updateToolCallResult({
-        messages: currentMessages,
-        toolCallId,
-        toolResult: result
-      });
-      mutate(
-        [
-          ...currentMessages.slice(0, currentMessages.length - 1),
-          { ...currentMessages[currentMessages.length - 1] }
-        ],
-        false
-      );
-      if (status === "submitted" || status === "streaming") {
-        return;
-      }
-      const lastMessage = currentMessages[currentMessages.length - 1];
-      if (isAssistantMessageWithCompletedToolCalls(lastMessage)) {
-        triggerRequest({ messages: currentMessages });
-      }
-    },
-    [mutate, status, triggerRequest]
+    [chatRef]
   );
+  useEffect(() => {
+    if (resume) {
+      chatRef.current.resumeStream();
+    }
+  }, [resume, chatRef]);
   return {
-    messages: messages != null ? messages : [],
-    id: chatId,
+    id: chatRef.current.id,
+    messages,
     setMessages,
-    data: streamData,
-    setData,
+    sendMessage: chatRef.current.sendMessage,
+    regenerate: chatRef.current.regenerate,
+    clearError: chatRef.current.clearError,
+    stop: chatRef.current.stop,
     error,
-    append,
-    reload,
-    stop,
-    input,
-    setInput,
-    handleInputChange,
-    handleSubmit,
-    isLoading: status === "submitted" || status === "streaming",
+    resumeStream: chatRef.current.resumeStream,
     status,
-    addToolResult
+    addToolResult: chatRef.current.addToolResult
   };
 }
 
@@ -383,8 +200,8 @@ function useChat({
 import {
   callCompletionApi
 } from "ai";
-import { useCallback as useCallback2, useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
-import useSWR2 from "swr";
+import { useCallback as useCallback2, useEffect as useEffect2, useId, useRef as useRef2, useState } from "react";
+import useSWR from "swr";
 function useCompletion({
   api = "/api/completion",
   id,
@@ -395,30 +212,28 @@ function useCompletion({
   body,
   streamProtocol = "data",
   fetch: fetch2,
-  onResponse,
   onFinish,
   onError,
   experimental_throttle: throttleWaitMs
 } = {}) {
   const hookId = useId();
   const completionId = id || hookId;
-  const { data, mutate } = useSWR2([api, completionId], null, {
+  const { data, mutate } = useSWR([api, completionId], null, {
     fallbackData: initialCompletion
   });
-  const { data: isLoading = false, mutate: mutateLoading } = useSWR2(
+  const { data: isLoading = false, mutate: mutateLoading } = useSWR(
     [completionId, "loading"],
     null
   );
-  const { data: streamData, mutate: mutateStreamData } = useSWR2([completionId, "streamData"], null);
-  const [error, setError] = useState3(void 0);
+  const [error, setError] = useState(void 0);
   const completion = data;
-  const [abortController, setAbortController] = useState3(null);
+  const [abortController, setAbortController] = useState(null);
   const extraMetadataRef = useRef2({
     credentials,
     headers,
     body
   });
-  useEffect3(() => {
+  useEffect2(() => {
     extraMetadataRef.current = {
       credentials,
       headers,
@@ -442,14 +257,9 @@ function useCompletion({
         (completion2) => mutate(completion2, false),
         throttleWaitMs
       ),
-      onData: throttle(
-        (data2) => mutateStreamData([...streamData != null ? streamData : [], ...data2 != null ? data2 : []], false),
-        throttleWaitMs
-      ),
       setLoading: mutateLoading,
       setError,
       setAbortController,
-      onResponse,
       onFinish,
       onError
     }),
@@ -459,14 +269,11 @@ function useCompletion({
       api,
       extraMetadataRef,
       setAbortController,
-      onResponse,
       onFinish,
       onError,
       setError,
-      streamData,
       streamProtocol,
       fetch2,
-      mutateStreamData,
       throttleWaitMs
     ]
   );
@@ -488,7 +295,7 @@ function useCompletion({
     },
     [triggerRequest]
   );
-  const [input, setInput] = useState3(initialInput);
+  const [input, setInput] = useState(initialInput);
   const handleSubmit = useCallback2(
     (event) => {
       var _a;
@@ -513,8 +320,7 @@ function useCompletion({
     setInput,
     handleInputChange,
     handleSubmit,
-    isLoading,
-    data: streamData
+    isLoading
   };
 }
 
@@ -525,11 +331,11 @@ import {
 } from "@ai-sdk/provider-utils";
 import {
   asSchema,
-  isDeepEqualData as isDeepEqualData2,
+  isDeepEqualData,
   parsePartialJson
 } from "ai";
-import { useCallback as useCallback3, useId as useId2, useRef as useRef3, useState as useState4 } from "react";
-import useSWR3 from "swr";
+import { useCallback as useCallback3, useId as useId2, useRef as useRef3, useState as useState2 } from "react";
+import useSWR2 from "swr";
 var getOriginalFetch = () => fetch;
 function useObject({
   api,
@@ -545,13 +351,13 @@ function useObject({
 }) {
   const hookId = useId2();
   const completionId = id != null ? id : hookId;
-  const { data, mutate } = useSWR3(
+  const { data, mutate } = useSWR2(
     [api, completionId],
     null,
     { fallbackData: initialValue }
   );
-  const [error, setError] = useState4(void 0);
-  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState2(void 0);
+  const [isLoading, setIsLoading] = useState2(false);
   const abortControllerRef = useRef3(null);
   const stop = useCallback3(() => {
     var _a;
@@ -566,9 +372,8 @@ function useObject({
   const submit = async (input) => {
     var _a;
     try {
-      mutate(void 0);
+      clearObject();
       setIsLoading(true);
-      setError(void 0);
       const abortController = new AbortController();
       abortControllerRef.current = abortController;
       const actualFetch = fetch2 != null ? fetch2 : getOriginalFetch();
@@ -594,20 +399,20 @@ function useObject({
       let latestObject = void 0;
       await response.body.pipeThrough(new TextDecoderStream()).pipeTo(
         new WritableStream({
-          write(chunk) {
+          async write(chunk) {
             accumulatedText += chunk;
-            const { value } = parsePartialJson(accumulatedText);
+            const { value } = await parsePartialJson(accumulatedText);
             const currentObject = value;
-            if (!isDeepEqualData2(latestObject, currentObject)) {
+            if (!isDeepEqualData(latestObject, currentObject)) {
               latestObject = currentObject;
               mutate(currentObject);
             }
           },
-          close() {
+          async close() {
             setIsLoading(false);
             abortControllerRef.current = null;
             if (onFinish != null) {
-              const validationResult = safeValidateTypes({
+              const validationResult = await safeValidateTypes({
                 value: latestObject,
                 schema: asSchema(schema)
               });
@@ -629,16 +434,27 @@ function useObject({
       setError(error2 instanceof Error ? error2 : new Error(String(error2)));
     }
   };
+  const clear = () => {
+    stop();
+    clearObject();
+  };
+  const clearObject = () => {
+    setError(void 0);
+    setIsLoading(false);
+    mutate(void 0);
+  };
   return {
     submit,
     object: data,
     error,
     isLoading,
-    stop
+    stop,
+    clear
   };
 }
 var experimental_useObject = useObject;
 export {
+  Chat,
   experimental_useObject,
   useChat,
   useCompletion