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

package/dist/index.mjs

@@ -1,306 +1,154 @@
 // src/use-chat.ts
 import {
-  callChatApi,
   convertFileListToFileUIParts,
-  extractMaxToolInvocationStep,
-  generateId as generateIdFunc,
-  getToolInvocations,
-  isAssistantMessageWithCompletedToolCalls,
-  shouldResubmitMessages,
-  updateToolCallResult
+  defaultChatStore,
+  generateId as generateIdFunc
 } from "ai";
-import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
-import useSWR from "swr";
-
-// src/throttle.ts
-import throttleFunction from "throttleit";
-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/use-chat.ts
+import { useCallback, useRef, useState, useSyncExternalStore } from "react";
 function useChat({
-  api = "/api/chat",
   id,
-  initialMessages,
   initialInput = "",
   onToolCall,
-  experimental_prepareRequestBody,
-  maxSteps = 1,
-  streamProtocol = "data",
-  onResponse,
   onFinish,
   onError,
-  credentials,
-  headers,
-  body,
   generateId = generateIdFunc,
-  fetch: fetch2,
   experimental_throttle: throttleWaitMs,
-  messageMetadataSchema
+  chatStore: chatStoreArg
 } = {}) {
-  const [hookId] = useState2(generateId);
+  const [hookId] = useState(generateId);
   const chatId = id != null ? id : hookId;
-  const chatKey = typeof api === "string" ? [api, chatId] : chatId;
-  const stableInitialMessages = useStableValue(initialMessages != null ? initialMessages : []);
-  const processedInitialMessages = useMemo(
-    () => stableInitialMessages,
-    [stableInitialMessages]
-  );
-  const { data: messages, mutate } = useSWR(
-    [chatKey, "messages"],
-    null,
-    { fallbackData: processedInitialMessages }
+  const chatStore = useRef(
+    chatStoreArg != null ? chatStoreArg : defaultChatStore({
+      api: "/api/chat",
+      generateId
+    })
   );
-  const messagesRef = useRef(messages || []);
-  useEffect2(() => {
-    messagesRef.current = messages || [];
-  }, [messages]);
-  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, requestType = "generate") => {
-      var _a;
-      mutateStatus("submitted");
-      setError(void 0);
-      const chatMessages = chatRequest.messages;
-      const messageCount = chatMessages.length;
-      const maxStep = extractMaxToolInvocationStep(
-        getToolInvocations(chatMessages[chatMessages.length - 1])
-      );
-      try {
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-        const throttledMutate = throttle(mutate, throttleWaitMs);
-        throttledMutate(chatMessages, false);
-        await callChatApi({
-          api,
-          body: (_a = experimental_prepareRequestBody == null ? void 0 : experimental_prepareRequestBody({
-            id: chatId,
-            messages: chatMessages,
-            requestData: chatRequest.data,
-            requestBody: chatRequest.body
-          })) != null ? _a : {
-            id: chatId,
-            messages: chatMessages,
-            data: chatRequest.data,
-            ...extraMetadataRef.current.body,
-            ...chatRequest.body
-          },
-          streamProtocol,
-          credentials: extraMetadataRef.current.credentials,
-          headers: {
-            ...extraMetadataRef.current.headers,
-            ...chatRequest.headers
-          },
-          abortController: () => abortControllerRef.current,
-          onResponse,
-          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 = 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 (shouldResubmitMessages({
-        originalMaxToolInvocationStep: maxStep,
-        originalMessageCount: messageCount,
-        maxSteps,
-        messages: messages2
-      })) {
-        await triggerRequest({ messages: messages2 });
-      }
+      });
     },
-    [
-      mutate,
-      mutateStatus,
-      api,
-      extraMetadataRef,
-      onResponse,
-      onFinish,
-      onError,
-      setError,
-      streamProtocol,
-      experimental_prepareRequestBody,
-      onToolCall,
-      maxSteps,
-      messagesRef,
-      abortControllerRef,
-      generateId,
-      fetch2,
-      throttleWaitMs,
-      chatId,
-      messageMetadataSchema
-    ]
+    [chatStore, chatId]
   );
-  const append = useCallback(
-    (message, { data, headers: headers2, body: body2 } = {}) => {
-      var _a;
-      return triggerRequest({
-        messages: messagesRef.current.concat({
-          ...message,
-          id: (_a = message.id) != null ? _a : generateId()
-        }),
-        headers: headers2,
-        body: body2,
-        data
+  const addToolResult = useCallback(
+    (options) => chatStore.current.addToolResult({ chatId, ...options }),
+    [chatStore, chatId]
+  );
+  const stopStream = useCallback(() => {
+    chatStore.current.stopStream({ chatId });
+  }, [chatStore, chatId]);
+  const error = useSyncExternalStore(
+    (callback) => subscribe({
+      onStoreChange: callback,
+      eventType: "chat-status-changed"
+    }),
+    () => chatStore.current.getError(chatId),
+    () => chatStore.current.getError(chatId)
+  );
+  const status = useSyncExternalStore(
+    (callback) => subscribe({
+      onStoreChange: callback,
+      eventType: "chat-status-changed"
+    }),
+    () => chatStore.current.getStatus(chatId),
+    () => chatStore.current.getStatus(chatId)
+  );
+  const messages = useSyncExternalStore(
+    (callback) => {
+      return subscribe({
+        onStoreChange: callback,
+        eventType: "chat-messages-changed"
       });
     },
-    [triggerRequest, generateId]
+    () => chatStore.current.getMessages(chatId),
+    () => chatStore.current.getMessages(chatId)
+  );
+  const append = useCallback(
+    (message, { headers, body } = {}) => chatStore.current.submitMessage({
+      chatId,
+      message,
+      headers,
+      body,
+      onError,
+      onToolCall,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
   );
   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]
+    async ({ headers, body } = {}) => chatStore.current.resubmitLastUserMessage({
+      chatId,
+      headers,
+      body,
+      onError,
+      onToolCall,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
+  );
+  const stop = useCallback(() => stopStream(), [stopStream]);
+  const experimental_resume = useCallback(
+    async () => chatStore.current.resumeStream({
+      chatId,
+      onError,
+      onToolCall,
+      onFinish
+    }),
+    [chatStore, chatId, onError, onToolCall, onFinish]
   );
-  const stop = useCallback(() => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-  }, []);
-  const experimental_resume = useCallback(async () => {
-    const messages2 = messagesRef.current;
-    triggerRequest({ messages: messages2 }, "resume");
-  }, [triggerRequest]);
   const setMessages = useCallback(
-    (messages2) => {
-      if (typeof messages2 === "function") {
-        messages2 = messages2(messagesRef.current);
+    (messagesParam) => {
+      if (typeof messagesParam === "function") {
+        messagesParam = messagesParam(messages);
       }
-      mutate(messages2, false);
-      messagesRef.current = messages2;
+      chatStore.current.setMessages({
+        id: chatId,
+        messages: messagesParam
+      });
     },
-    [mutate]
+    [chatId, messages]
   );
-  const [input, setInput] = useState2(initialInput);
+  const [input, setInput] = useState(initialInput);
   const handleSubmit = useCallback(
-    async (event, options = {}, metadata) => {
+    async (event, options = {}) => {
       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
-        };
-      }
       const fileParts = Array.isArray(options == null ? void 0 : options.files) ? options.files : await convertFileListToFileUIParts(options == null ? void 0 : options.files);
-      triggerRequest({
-        messages: messagesRef.current.concat({
+      if (!input && fileParts.length === 0)
+        return;
+      append(
+        {
           id: generateId(),
           role: "user",
           metadata: void 0,
           parts: [...fileParts, { type: "text", text: input }]
-        }),
-        headers: options.headers,
-        body: options.body,
-        data: options.data
-      });
+        },
+        {
+          headers: options.headers,
+          body: options.body
+        }
+      );
       setInput("");
     },
-    [input, generateId, triggerRequest]
+    [input, generateId, append, messages]
   );
   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],
-            // @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 (isAssistantMessageWithCompletedToolCalls(lastMessage)) {
-        triggerRequest({ messages: currentMessages });
-      }
-    },
-    [mutate, status, triggerRequest, generateId]
-  );
   return {
-    messages: messages != null ? messages : [],
+    messages,
     id: chatId,
     setMessages,
     error,
@@ -312,7 +160,6 @@ function useChat({
     setInput,
     handleInputChange,
     handleSubmit,
-    isLoading: status === "submitted" || status === "streaming",
     status,
     addToolResult
   };
@@ -322,8 +169,16 @@ 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, useId, useRef as useRef2, useState as useState2 } from "react";
+import useSWR from "swr";
+
+// src/throttle.ts
+import throttleFunction from "throttleit";
+function throttle(fn, waitMs) {
+  return waitMs != null ? throttleFunction(fn, waitMs) : fn;
+}
+
+// src/use-completion.ts
 function useCompletion({
   api = "/api/completion",
   id,
@@ -334,29 +189,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 [error, setError] = useState3(void 0);
+  const [error, setError] = useState2(void 0);
   const completion = data;
-  const [abortController, setAbortController] = useState3(null);
+  const [abortController, setAbortController] = useState2(null);
   const extraMetadataRef = useRef2({
     credentials,
     headers,
     body
   });
-  useEffect3(() => {
+  useEffect(() => {
     extraMetadataRef.current = {
       credentials,
       headers,
@@ -383,7 +237,6 @@ function useCompletion({
       setLoading: mutateLoading,
       setError,
       setAbortController,
-      onResponse,
       onFinish,
       onError
     }),
@@ -393,7 +246,6 @@ function useCompletion({
       api,
       extraMetadataRef,
       setAbortController,
-      onResponse,
       onFinish,
       onError,
       setError,
@@ -420,7 +272,7 @@ function useCompletion({
     },
     [triggerRequest]
   );
-  const [input, setInput] = useState3(initialInput);
+  const [input, setInput] = useState2(initialInput);
   const handleSubmit = useCallback2(
     (event) => {
       var _a;
@@ -456,11 +308,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 useState3 } from "react";
+import useSWR2 from "swr";
 var getOriginalFetch = () => fetch;
 function useObject({
   api,
@@ -476,13 +328,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] = useState3(void 0);
+  const [isLoading, setIsLoading] = useState3(false);
   const abortControllerRef = useRef3(null);
   const stop = useCallback3(() => {
     var _a;
@@ -529,7 +381,7 @@ function useObject({
             accumulatedText += chunk;
             const { value } = await parsePartialJson(accumulatedText);
             const currentObject = value;
-            if (!isDeepEqualData2(latestObject, currentObject)) {
+            if (!isDeepEqualData(latestObject, currentObject)) {
               latestObject = currentObject;
               mutate(currentObject);
             }