@ai-sdk/react 2.0.0-canary.21 → 2.0.0-canary.22

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ai-sdk/react
 
+## 2.0.0-canary.22
+
+### Major Changes
+
+- 40acf9b: feat (ui): introduce ChatStore and ChatTransport
+
+### Patch Changes
+
+- Updated dependencies [40acf9b]
+  - @ai-sdk/provider-utils@3.0.0-canary.18
+  - ai@5.0.0-canary.23
+
 ## 2.0.0-canary.21
 
 ### Patch Changes

package/dist/index.d.mts

@@ -66,21 +66,7 @@ type UseChatHelpers<MESSAGE_METADATA = unknown> = {
         result: any;
     }) => void;
 };
-declare function useChat<MESSAGE_METADATA>({ api, id, initialMessages, initialInput, onToolCall, experimental_prepareRequestBody, maxSteps, streamProtocol, onFinish, onError, credentials, headers, body, generateId, fetch, experimental_throttle: throttleWaitMs, messageMetadataSchema, }?: UseChatOptions<MESSAGE_METADATA> & {
-    /**
-     * Experimental (React only). When a function is provided, it will be used
-     * to prepare the request body for the chat API. This can be useful for
-     * customizing the request body based on the messages and data in the chat.
-     *
-     * @param id The id of the chat.
-     * @param messages The current messages in the chat.
-     * @param requestBody The request body object passed in the chat request.
-     */
-    experimental_prepareRequestBody?: (options: {
-        id: string;
-        messages: UIMessage<MESSAGE_METADATA>[];
-        requestBody?: object;
-    }) => unknown;
+declare function useChat<MESSAGE_METADATA>({ id, initialInput, onToolCall, onFinish, onError, generateId, experimental_throttle: throttleWaitMs, chatStore: chatStoreArg, }?: UseChatOptions<MESSAGE_METADATA> & {
     /**
   Custom throttle wait in ms for the chat messages and data updates.
   Default is undefined, which disables throttling.

package/dist/index.d.ts

@@ -66,21 +66,7 @@ type UseChatHelpers<MESSAGE_METADATA = unknown> = {
         result: any;
     }) => void;
 };
-declare function useChat<MESSAGE_METADATA>({ api, id, initialMessages, initialInput, onToolCall, experimental_prepareRequestBody, maxSteps, streamProtocol, onFinish, onError, credentials, headers, body, generateId, fetch, experimental_throttle: throttleWaitMs, messageMetadataSchema, }?: UseChatOptions<MESSAGE_METADATA> & {
-    /**
-     * Experimental (React only). When a function is provided, it will be used
-     * to prepare the request body for the chat API. This can be useful for
-     * customizing the request body based on the messages and data in the chat.
-     *
-     * @param id The id of the chat.
-     * @param messages The current messages in the chat.
-     * @param requestBody The request body object passed in the chat request.
-     */
-    experimental_prepareRequestBody?: (options: {
-        id: string;
-        messages: UIMessage<MESSAGE_METADATA>[];
-        requestBody?: object;
-    }) => unknown;
+declare function useChat<MESSAGE_METADATA>({ id, initialInput, onToolCall, onFinish, onError, generateId, experimental_throttle: throttleWaitMs, chatStore: chatStoreArg, }?: UseChatOptions<MESSAGE_METADATA> & {
     /**
   Custom throttle wait in ms for the chat messages and data updates.
   Default is undefined, which disables throttling.

package/dist/index.js

@@ -37,291 +37,152 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/use-chat.ts
-var import_ai2 = require("ai");
-var import_react2 = require("react");
-var import_swr = __toESM(require("swr"));
-
-// src/throttle.ts
-var import_throttleit = __toESM(require("throttleit"));
-function throttle(fn, waitMs) {
-  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
-}
-
-// src/util/use-stable-value.ts
 var import_ai = require("ai");
 var import_react = require("react");
-function useStableValue(latestValue) {
-  const [value, setValue] = (0, import_react.useState)(latestValue);
-  (0, import_react.useEffect)(() => {
-    if (!(0, import_ai.isDeepEqualData)(latestValue, value)) {
-      setValue(latestValue);
-    }
-  }, [latestValue, value]);
-  return value;
-}
-
-// src/use-chat.ts
 function useChat({
-  api = "/api/chat",
   id,
-  initialMessages,
   initialInput = "",
   onToolCall,
-  experimental_prepareRequestBody,
-  maxSteps = 1,
-  streamProtocol = "ui-message",
   onFinish,
   onError,
-  credentials,
-  headers,
-  body,
-  generateId = import_ai2.generateId,
-  fetch: fetch2,
+  generateId = import_ai.generateId,
   experimental_throttle: throttleWaitMs,
-  messageMetadataSchema
+  chatStore: chatStoreArg
 } = {}) {
-  const [hookId] = (0, import_react2.useState)(generateId);
+  const [hookId] = (0, import_react.useState)(generateId);
   const chatId = id != null ? id : hookId;
-  const chatKey = typeof api === "string" ? [api, chatId] : chatId;
-  const stableInitialMessages = useStableValue(initialMessages != null ? initialMessages : []);
-  const processedInitialMessages = (0, import_react2.useMemo)(
-    () => stableInitialMessages,
-    [stableInitialMessages]
-  );
-  const { data: messages, mutate } = (0, import_swr.default)(
-    [chatKey, "messages"],
-    null,
-    { fallbackData: processedInitialMessages }
+  const chatStore = (0, import_react.useRef)(
+    chatStoreArg != null ? chatStoreArg : (0, import_ai.defaultChatStore)({
+      api: "/api/chat",
+      generateId
+    })
   );
-  const messagesRef = (0, import_react2.useRef)(messages || []);
-  (0, import_react2.useEffect)(() => {
-    messagesRef.current = messages || [];
-  }, [messages]);
-  const { data: status = "ready", mutate: mutateStatus } = (0, import_swr.default)([chatKey, "status"], null);
-  const { data: error = void 0, mutate: setError } = (0, import_swr.default)([chatKey, "error"], null);
-  const abortControllerRef = (0, import_react2.useRef)(null);
-  const extraMetadataRef = (0, import_react2.useRef)({
-    credentials,
-    headers,
-    body
-  });
-  (0, import_react2.useEffect)(() => {
-    extraMetadataRef.current = {
-      credentials,
-      headers,
-      body
-    };
-  }, [credentials, headers, body]);
-  const triggerRequest = (0, import_react2.useCallback)(
-    async (chatRequest, requestType = "generate") => {
-      var _a;
-      mutateStatus("submitted");
-      setError(void 0);
-      const chatMessages = chatRequest.messages;
-      const messageCount = chatMessages.length;
-      const maxStep = (0, import_ai2.extractMaxToolInvocationStep)(
-        (0, import_ai2.getToolInvocations)(chatMessages[chatMessages.length - 1])
-      );
-      try {
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-        const throttledMutate = throttle(mutate, throttleWaitMs);
-        throttledMutate(chatMessages, false);
-        await (0, import_ai2.callChatApi)({
-          api,
-          body: (_a = experimental_prepareRequestBody == null ? void 0 : experimental_prepareRequestBody({
-            id: chatId,
-            messages: chatMessages,
-            requestBody: chatRequest.body
-          })) != null ? _a : {
-            id: chatId,
-            messages: chatMessages,
-            ...extraMetadataRef.current.body,
-            ...chatRequest.body
-          },
-          streamProtocol,
-          credentials: extraMetadataRef.current.credentials,
-          headers: {
-            ...extraMetadataRef.current.headers,
-            ...chatRequest.headers
-          },
-          abortController: () => abortControllerRef.current,
-          onUpdate({ message }) {
-            mutateStatus("streaming");
-            const replaceLastMessage = message.id === chatMessages[chatMessages.length - 1].id;
-            throttledMutate(
-              [
-                ...replaceLastMessage ? chatMessages.slice(0, chatMessages.length - 1) : chatMessages,
-                message
-              ],
-              false
-            );
-          },
-          onToolCall,
-          onFinish,
-          generateId,
-          fetch: fetch2,
-          lastMessage: chatMessages[chatMessages.length - 1],
-          requestType,
-          messageMetadataSchema
-        });
-        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);
+  if (!chatStore.current.hasChat(chatId)) {
+    chatStore.current.addChat(chatId, []);
+  }
+  const subscribe = (0, import_react.useCallback)(
+    ({
+      onStoreChange,
+      eventType
+    }) => {
+      return chatStore.current.subscribe({
+        onChatChanged: (event) => {
+          if (event.chatId !== chatId || event.type !== eventType) {
+            return;
+          }
+          onStoreChange();
         }
-        setError(err);
-        mutateStatus("error");
-      }
-      const messages2 = messagesRef.current;
-      if ((0, import_ai2.shouldResubmitMessages)({
-        originalMaxToolInvocationStep: maxStep,
-        originalMessageCount: messageCount,
-        maxSteps,
-        messages: messages2
-      })) {
-        await triggerRequest({ messages: messages2 });
-      }
+      });
     },
-    [
-      mutate,
-      mutateStatus,
-      api,
-      extraMetadataRef,
-      onFinish,
+    [chatStore, chatId]
+  );
+  const addToolResult = (0, import_react.useCallback)(
+    (options) => chatStore.current.addToolResult({ chatId, ...options }),
+    [chatStore, chatId]
+  );
+  const stopStream = (0, import_react.useCallback)(() => {
+    chatStore.current.stopStream({ chatId });
+  }, [chatStore, chatId]);
+  const error = (0, import_react.useSyncExternalStore)(
+    (callback) => subscribe({
+      onStoreChange: callback,
+      eventType: "chat-status-changed"
+    }),
+    () => chatStore.current.getError(chatId),
+    () => chatStore.current.getError(chatId)
+  );
+  const status = (0, import_react.useSyncExternalStore)(
+    (callback) => subscribe({
+      onStoreChange: callback,
+      eventType: "chat-status-changed"
+    }),
+    () => chatStore.current.getStatus(chatId),
+    () => chatStore.current.getStatus(chatId)
+  );
+  const messages = (0, import_react.useSyncExternalStore)(
+    (callback) => {
+      return subscribe({
+        onStoreChange: callback,
+        eventType: "chat-messages-changed"
+      });
+    },
+    () => chatStore.current.getMessages(chatId),
+    () => chatStore.current.getMessages(chatId)
+  );
+  const append = (0, import_react.useCallback)(
+    (message, { headers, body } = {}) => chatStore.current.submitMessage({
+      chatId,
+      message,
+      headers,
+      body,
       onError,
-      setError,
-      streamProtocol,
-      experimental_prepareRequestBody,
       onToolCall,
-      maxSteps,
-      messagesRef,
-      abortControllerRef,
-      generateId,
-      fetch2,
-      throttleWaitMs,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
+  );
+  const reload = (0, import_react.useCallback)(
+    async ({ headers, body } = {}) => chatStore.current.resubmitLastUserMessage({
       chatId,
-      messageMetadataSchema
-    ]
+      headers,
+      body,
+      onError,
+      onToolCall,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
   );
-  const append = (0, import_react2.useCallback)(
-    async (message, { headers: headers2, body: body2 } = {}) => {
-      var _a;
-      await triggerRequest({
-        messages: messagesRef.current.concat({
-          ...message,
-          id: (_a = message.id) != null ? _a : generateId()
-        }),
-        headers: headers2,
-        body: body2
-      });
-    },
-    [triggerRequest, generateId]
+  const stop = (0, import_react.useCallback)(() => stopStream(), [stopStream]);
+  const experimental_resume = (0, import_react.useCallback)(
+    async () => chatStore.current.resumeStream({
+      chatId,
+      onError,
+      onToolCall,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
   );
-  const reload = (0, import_react2.useCallback)(
-    async ({ headers: headers2, body: body2 } = {}) => {
-      const messages2 = messagesRef.current;
-      if (messages2.length === 0) {
-        return null;
+  const setMessages = (0, import_react.useCallback)(
+    (messagesParam) => {
+      if (typeof messagesParam === "function") {
+        messagesParam = messagesParam(messages);
       }
-      const lastMessage = messages2[messages2.length - 1];
-      return triggerRequest({
-        messages: lastMessage.role === "assistant" ? messages2.slice(0, -1) : messages2,
-        headers: headers2,
-        body: body2
+      chatStore.current.setMessages({
+        id: chatId,
+        messages: messagesParam
       });
     },
-    [triggerRequest]
+    [chatId, messages]
   );
-  const stop = (0, import_react2.useCallback)(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, []);
-  const experimental_resume = (0, import_react2.useCallback)(async () => {
-    const messages2 = messagesRef.current;
-    triggerRequest({ messages: messages2 }, "resume");
-  }, [triggerRequest]);
-  const setMessages = (0, import_react2.useCallback)(
-    (messages2) => {
-      if (typeof messages2 === "function") {
-        messages2 = messages2(messagesRef.current);
-      }
-      mutate(messages2, false);
-      messagesRef.current = messages2;
-    },
-    [mutate]
-  );
-  const [input, setInput] = (0, import_react2.useState)(initialInput);
-  const handleSubmit = (0, import_react2.useCallback)(
-    async (event, options = {}, metadata) => {
+  const [input, setInput] = (0, import_react.useState)(initialInput);
+  const handleSubmit = (0, import_react.useCallback)(
+    async (event, options = {}) => {
       var _a;
       (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
-      const fileParts = Array.isArray(options == null ? void 0 : options.files) ? options.files : await (0, import_ai2.convertFileListToFileUIParts)(options == null ? void 0 : options.files);
+      const fileParts = Array.isArray(options == null ? void 0 : options.files) ? options.files : await (0, import_ai.convertFileListToFileUIParts)(options == null ? void 0 : options.files);
       if (!input && fileParts.length === 0)
         return;
-      if (metadata) {
-        extraMetadataRef.current = {
-          ...extraMetadataRef.current,
-          ...metadata
-        };
-      }
-      triggerRequest({
-        messages: messagesRef.current.concat({
+      append(
+        {
           id: generateId(),
           role: "user",
           metadata: void 0,
           parts: [...fileParts, { type: "text", text: input }]
-        }),
-        headers: options.headers,
-        body: options.body
-      });
+        },
+        {
+          headers: options.headers,
+          body: options.body
+        }
+      );
       setInput("");
     },
-    [input, generateId, triggerRequest]
+    [input, generateId, append, messages]
   );
   const handleInputChange = (e) => {
     setInput(e.target.value);
   };
-  const addToolResult = (0, import_react2.useCallback)(
-    ({ toolCallId, result }) => {
-      const currentMessages = messagesRef.current;
-      (0, import_ai2.updateToolCallResult)({
-        messages: currentMessages,
-        toolCallId,
-        toolResult: result
-      });
-      mutate(
-        [
-          ...currentMessages.slice(0, currentMessages.length - 1),
-          {
-            ...currentMessages[currentMessages.length - 1],
-            // @ts-ignore
-            // update the revisionId to trigger a re-render
-            revisionId: generateId()
-          }
-        ],
-        false
-      );
-      if (status === "submitted" || status === "streaming") {
-        return;
-      }
-      const lastMessage = currentMessages[currentMessages.length - 1];
-      if ((0, import_ai2.isAssistantMessageWithCompletedToolCalls)(lastMessage)) {
-        triggerRequest({ messages: currentMessages });
-      }
-    },
-    [mutate, status, triggerRequest, generateId]
-  );
   return {
-    messages: messages != null ? messages : [],
+    messages,
     id: chatId,
     setMessages,
     error,
@@ -339,9 +200,17 @@ function useChat({
 }
 
 // src/use-completion.ts
-var import_ai3 = require("ai");
-var import_react3 = require("react");
-var import_swr2 = __toESM(require("swr"));
+var import_ai2 = require("ai");
+var import_react2 = require("react");
+var import_swr = __toESM(require("swr"));
+
+// src/throttle.ts
+var import_throttleit = __toESM(require("throttleit"));
+function throttle(fn, waitMs) {
+  return waitMs != null ? (0, import_throttleit.default)(fn, waitMs) : fn;
+}
+
+// src/use-completion.ts
 function useCompletion({
   api = "/api/completion",
   id,
@@ -356,32 +225,32 @@ function useCompletion({
   onError,
   experimental_throttle: throttleWaitMs
 } = {}) {
-  const hookId = (0, import_react3.useId)();
+  const hookId = (0, import_react2.useId)();
   const completionId = id || hookId;
-  const { data, mutate } = (0, import_swr2.default)([api, completionId], null, {
+  const { data, mutate } = (0, import_swr.default)([api, completionId], null, {
     fallbackData: initialCompletion
   });
-  const { data: isLoading = false, mutate: mutateLoading } = (0, import_swr2.default)(
+  const { data: isLoading = false, mutate: mutateLoading } = (0, import_swr.default)(
     [completionId, "loading"],
     null
   );
-  const [error, setError] = (0, import_react3.useState)(void 0);
+  const [error, setError] = (0, import_react2.useState)(void 0);
   const completion = data;
-  const [abortController, setAbortController] = (0, import_react3.useState)(null);
-  const extraMetadataRef = (0, import_react3.useRef)({
+  const [abortController, setAbortController] = (0, import_react2.useState)(null);
+  const extraMetadataRef = (0, import_react2.useRef)({
     credentials,
     headers,
     body
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     extraMetadataRef.current = {
       credentials,
       headers,
       body
     };
   }, [credentials, headers, body]);
-  const triggerRequest = (0, import_react3.useCallback)(
-    async (prompt, options) => (0, import_ai3.callCompletionApi)({
+  const triggerRequest = (0, import_react2.useCallback)(
+    async (prompt, options) => (0, import_ai2.callCompletionApi)({
       api,
       prompt,
       credentials: extraMetadataRef.current.credentials,
@@ -417,26 +286,26 @@ function useCompletion({
       throttleWaitMs
     ]
   );
-  const stop = (0, import_react3.useCallback)(() => {
+  const stop = (0, import_react2.useCallback)(() => {
     if (abortController) {
       abortController.abort();
       setAbortController(null);
     }
   }, [abortController]);
-  const setCompletion = (0, import_react3.useCallback)(
+  const setCompletion = (0, import_react2.useCallback)(
     (completion2) => {
       mutate(completion2, false);
     },
     [mutate]
   );
-  const complete = (0, import_react3.useCallback)(
+  const complete = (0, import_react2.useCallback)(
     async (prompt, options) => {
       return triggerRequest(prompt, options);
     },
     [triggerRequest]
   );
-  const [input, setInput] = (0, import_react3.useState)(initialInput);
-  const handleSubmit = (0, import_react3.useCallback)(
+  const [input, setInput] = (0, import_react2.useState)(initialInput);
+  const handleSubmit = (0, import_react2.useCallback)(
     (event) => {
       var _a;
       (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
@@ -444,7 +313,7 @@ function useCompletion({
     },
     [input, complete]
   );
-  const handleInputChange = (0, import_react3.useCallback)(
+  const handleInputChange = (0, import_react2.useCallback)(
     (e) => {
       setInput(e.target.value);
     },
@@ -466,9 +335,9 @@ function useCompletion({
 
 // src/use-object.ts
 var import_provider_utils = require("@ai-sdk/provider-utils");
-var import_ai4 = require("ai");
-var import_react4 = require("react");
-var import_swr3 = __toESM(require("swr"));
+var import_ai3 = require("ai");
+var import_react3 = require("react");
+var import_swr2 = __toESM(require("swr"));
 var getOriginalFetch = () => fetch;
 function useObject({
   api,
@@ -482,17 +351,17 @@ function useObject({
   headers,
   credentials
 }) {
-  const hookId = (0, import_react4.useId)();
+  const hookId = (0, import_react3.useId)();
   const completionId = id != null ? id : hookId;
-  const { data, mutate } = (0, import_swr3.default)(
+  const { data, mutate } = (0, import_swr2.default)(
     [api, completionId],
     null,
     { fallbackData: initialValue }
   );
-  const [error, setError] = (0, import_react4.useState)(void 0);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(false);
-  const abortControllerRef = (0, import_react4.useRef)(null);
-  const stop = (0, import_react4.useCallback)(() => {
+  const [error, setError] = (0, import_react3.useState)(void 0);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const abortControllerRef = (0, import_react3.useRef)(null);
+  const stop = (0, import_react3.useCallback)(() => {
     var _a;
     try {
       (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
@@ -535,9 +404,9 @@ function useObject({
         new WritableStream({
           async write(chunk) {
             accumulatedText += chunk;
-            const { value } = await (0, import_ai4.parsePartialJson)(accumulatedText);
+            const { value } = await (0, import_ai3.parsePartialJson)(accumulatedText);
             const currentObject = value;
-            if (!(0, import_ai4.isDeepEqualData)(latestObject, currentObject)) {
+            if (!(0, import_ai3.isDeepEqualData)(latestObject, currentObject)) {
               latestObject = currentObject;
               mutate(currentObject);
             }
@@ -548,7 +417,7 @@ function useObject({
             if (onFinish != null) {
               const validationResult = await (0, import_provider_utils.safeValidateTypes)({
                 value: latestObject,
-                schema: (0, import_ai4.asSchema)(schema)
+                schema: (0, import_ai3.asSchema)(schema)
               });
               onFinish(
                 validationResult.success ? { object: validationResult.value, error: void 0 } : { object: void 0, error: validationResult.error }