ai 2.1.0 → 2.1.3

package/react/dist/index.mjs

@@ -1,11 +1,389 @@
 'use client'
-import {
-  useChat
-} from "./chunk-5PP6W52J.mjs";
-import {
-  useCompletion
-} from "./chunk-PW6HSU2N.mjs";
-import "./chunk-6EH3SWMP.mjs";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// react/use-chat.ts
+import { useCallback, useId, useRef, useEffect, useState } from "react";
+import useSWRMutation from "swr/mutation";
+import useSWR from "swr";
+
+// shared/utils.ts
+import { customAlphabet } from "nanoid";
+var nanoid = customAlphabet(
+  "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
+  7
+);
+var decoder = new TextDecoder();
+function decodeAIStreamChunk(chunk) {
+  return decoder.decode(chunk);
+}
+
+// react/use-chat.ts
+function useChat({
+  api = "/api/chat",
+  id,
+  initialMessages = [],
+  initialInput = "",
+  sendExtraMessageFields,
+  onResponse,
+  onFinish,
+  onError,
+  headers,
+  body
+} = {}) {
+  const hookId = useId();
+  const chatId = id || hookId;
+  const { data, mutate } = useSWR([api, chatId], null, {
+    fallbackData: initialMessages
+  });
+  const messages = data;
+  const messagesRef = useRef(messages);
+  useEffect(() => {
+    messagesRef.current = messages;
+  }, [messages]);
+  const abortControllerRef = useRef(null);
+  const extraMetadataRef = useRef({
+    headers,
+    body
+  });
+  useEffect(() => {
+    extraMetadataRef.current = {
+      headers,
+      body
+    };
+  }, [headers, body]);
+  const { error, trigger, isMutating } = useSWRMutation(
+    [api, chatId],
+    (_0, _1) => __async(this, [_0, _1], function* (_, { arg: messagesSnapshot }) {
+      try {
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+        const previousMessages = messagesRef.current;
+        mutate(messagesSnapshot, false);
+        const res = yield fetch(api, {
+          method: "POST",
+          body: JSON.stringify(__spreadValues({
+            messages: sendExtraMessageFields ? messagesSnapshot : messagesSnapshot.map(({ role, content }) => ({
+              role,
+              content
+            }))
+          }, extraMetadataRef.current.body)),
+          headers: extraMetadataRef.current.headers || {},
+          signal: abortController.signal
+        }).catch((err) => {
+          mutate(previousMessages, false);
+          throw err;
+        });
+        if (onResponse) {
+          try {
+            yield onResponse(res);
+          } catch (err) {
+            throw err;
+          }
+        }
+        if (!res.ok) {
+          mutate(previousMessages, false);
+          throw new Error(
+            (yield res.text()) || "Failed to fetch the chat response."
+          );
+        }
+        if (!res.body) {
+          throw new Error("The response body is empty.");
+        }
+        let result = "";
+        const createdAt = /* @__PURE__ */ new Date();
+        const replyId = nanoid();
+        const reader = res.body.getReader();
+        while (true) {
+          const { done, value } = yield reader.read();
+          if (done) {
+            break;
+          }
+          result += decodeAIStreamChunk(value);
+          mutate(
+            [
+              ...messagesSnapshot,
+              {
+                id: replyId,
+                createdAt,
+                content: result,
+                role: "assistant"
+              }
+            ],
+            false
+          );
+          if (abortControllerRef.current === null) {
+            reader.cancel();
+            break;
+          }
+        }
+        if (onFinish) {
+          onFinish({
+            id: replyId,
+            createdAt,
+            content: result,
+            role: "assistant"
+          });
+        }
+        abortControllerRef.current = null;
+        return result;
+      } catch (err) {
+        if (err.name === "AbortError") {
+          abortControllerRef.current = null;
+          return null;
+        }
+        if (onError && err instanceof Error) {
+          onError(err);
+        }
+        throw err;
+      }
+    }),
+    {
+      populateCache: false,
+      revalidate: false
+    }
+  );
+  const append = useCallback(
+    (message) => __async(this, null, function* () {
+      if (!message.id) {
+        message.id = nanoid();
+      }
+      return trigger(messagesRef.current.concat(message));
+    }),
+    [trigger]
+  );
+  const reload = useCallback(() => __async(this, null, function* () {
+    if (messagesRef.current.length === 0)
+      return null;
+    const lastMessage = messagesRef.current[messagesRef.current.length - 1];
+    if (lastMessage.role === "assistant") {
+      return trigger(messagesRef.current.slice(0, -1));
+    }
+    return trigger(messagesRef.current);
+  }), [trigger]);
+  const stop = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+  }, []);
+  const setMessages = useCallback(
+    (messages2) => {
+      mutate(messages2, false);
+      messagesRef.current = messages2;
+    },
+    [mutate]
+  );
+  const [input, setInput] = useState(initialInput);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!input)
+        return;
+      append({
+        content: input,
+        role: "user",
+        createdAt: /* @__PURE__ */ new Date()
+      });
+      setInput("");
+    },
+    [input, append]
+  );
+  const handleInputChange = (e) => {
+    setInput(e.target.value);
+  };
+  return {
+    messages,
+    error,
+    append,
+    reload,
+    stop,
+    setMessages,
+    input,
+    setInput,
+    handleInputChange,
+    handleSubmit,
+    isLoading: isMutating
+  };
+}
+
+// react/use-completion.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useId as useId2, useRef as useRef2, useState as useState2 } from "react";
+import useSWRMutation2 from "swr/mutation";
+import useSWR2 from "swr";
+function useCompletion({
+  api = "/api/completion",
+  id,
+  initialCompletion = "",
+  initialInput = "",
+  headers,
+  body,
+  onResponse,
+  onFinish,
+  onError
+} = {}) {
+  const hookId = useId2();
+  const completionId = id || hookId;
+  const { data, mutate } = useSWR2([api, completionId], null, {
+    fallbackData: initialCompletion
+  });
+  const completion = data;
+  const [abortController, setAbortController] = useState2(null);
+  const extraMetadataRef = useRef2({
+    headers,
+    body
+  });
+  useEffect2(() => {
+    extraMetadataRef.current = {
+      headers,
+      body
+    };
+  }, [headers, body]);
+  const { error, trigger, isMutating } = useSWRMutation2(
+    [api, completionId],
+    (_0, _1) => __async(this, [_0, _1], function* (_, { arg: prompt }) {
+      try {
+        const abortController2 = new AbortController();
+        setAbortController(abortController2);
+        mutate("", false);
+        const res = yield fetch(api, {
+          method: "POST",
+          body: JSON.stringify(__spreadValues({
+            prompt
+          }, extraMetadataRef.current.body)),
+          headers: extraMetadataRef.current.headers || {},
+          signal: abortController2.signal
+        }).catch((err) => {
+          throw err;
+        });
+        if (onResponse) {
+          try {
+            yield onResponse(res);
+          } catch (err) {
+            throw err;
+          }
+        }
+        if (!res.ok) {
+          throw new Error(
+            (yield res.text()) || "Failed to fetch the chat response."
+          );
+        }
+        if (!res.body) {
+          throw new Error("The response body is empty.");
+        }
+        let result = "";
+        const reader = res.body.getReader();
+        while (true) {
+          const { done, value } = yield reader.read();
+          if (done) {
+            break;
+          }
+          result += decodeAIStreamChunk(value);
+          mutate(result, false);
+          if (abortController2 === null) {
+            reader.cancel();
+            break;
+          }
+        }
+        if (onFinish) {
+          onFinish(prompt, result);
+        }
+        setAbortController(null);
+        return result;
+      } catch (err) {
+        if (err.name === "AbortError") {
+          setAbortController(null);
+          return null;
+        }
+        if (onError && err instanceof Error) {
+          onError(err);
+        }
+        throw err;
+      }
+    }),
+    {
+      populateCache: false,
+      revalidate: false
+    }
+  );
+  const stop = useCallback2(() => {
+    if (abortController) {
+      abortController.abort();
+      setAbortController(null);
+    }
+  }, [abortController]);
+  const setCompletion = useCallback2(
+    (completion2) => {
+      mutate(completion2, false);
+    },
+    [mutate]
+  );
+  const [input, setInput] = useState2(initialInput);
+  const handleSubmit = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (!input)
+        return;
+      return trigger(input);
+    },
+    [input, trigger]
+  );
+  const handleInputChange = (e) => {
+    setInput(e.target.value);
+  };
+  const complete = useCallback2(
+    (prompt) => __async(this, null, function* () {
+      return trigger(prompt);
+    }),
+    [trigger]
+  );
+  return {
+    completion,
+    complete,
+    error,
+    setCompletion,
+    stop,
+    input,
+    setInput,
+    handleInputChange,
+    handleSubmit,
+    isLoading: isMutating
+  };
+}
 export {
   useChat,
   useCompletion

package/svelte/dist/index.d.ts

@@ -1,4 +1,194 @@
-export { UseChatHelpers, useChat } from './use-chat.js';
-export { UseCompletionHelpers, useCompletion } from './use-completion.js';
-export { C as CreateMessage, M as Message, U as UseChatOptions } from './types-f862f74a.js';
-import 'svelte/store';
+import { Readable, Writable } from 'svelte/store';
+
+/**
+ * Shared types between the API and UI packages.
+ */
+type Message = {
+    id: string;
+    createdAt?: Date;
+    content: string;
+    role: 'system' | 'user' | 'assistant';
+};
+type CreateMessage = {
+    id?: string;
+    createdAt?: Date;
+    content: string;
+    role: 'system' | 'user' | 'assistant';
+};
+type UseChatOptions = {
+    /**
+     * The API endpoint that accepts a `{ messages: Message[] }` object and returns
+     * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
+     */
+    api?: string;
+    /**
+     * An unique identifier for the chat. If not provided, a random one will be
+     * generated. When provided, the `useChat` hook with the same `id` will
+     * have shared states across components.
+     */
+    id?: string;
+    /**
+     * Initial messages of the chat. Useful to load an existing chat history.
+     */
+    initialMessages?: Message[];
+    /**
+     * Initial input of the chat.
+     */
+    initialInput?: string;
+    /**
+     * Callback function to be called when the API response is received.
+     */
+    onResponse?: (response: Response) => void;
+    /**
+     * Callback function to be called when the chat is finished streaming.
+     */
+    onFinish?: (message: Message) => void;
+    /**
+     * Callback function to be called when an error is encountered.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * HTTP headers to be sent with the API request.
+     */
+    headers?: Record<string, string> | Headers;
+    /**
+     * Extra body object to be sent with the API request.
+     * @example
+     * Send a `sessionId` to the API along with the messages.
+     * ```js
+     * useChat({
+     *   body: {
+     *     sessionId: '123',
+     *   }
+     * })
+     * ```
+     */
+    body?: object;
+    /**
+     * Whether to send extra message fields such as `message.id` and `message.createdAt` to the API.
+     * Defaults to `false`. When set to `true`, the API endpoint might need to
+     * handle the extra fields before forwarding the request to the AI service.
+     */
+    sendExtraMessageFields?: boolean;
+};
+type UseCompletionOptions = {
+    /**
+     * The API endpoint that accepts a `{ prompt: string }` object and returns
+     * a stream of tokens of the AI completion response. Defaults to `/api/completion`.
+     */
+    api?: string;
+    /**
+     * An unique identifier for the chat. If not provided, a random one will be
+     * generated. When provided, the `useChat` hook with the same `id` will
+     * have shared states across components.
+     */
+    id?: string;
+    /**
+     * Initial prompt input of the completion.
+     */
+    initialInput?: string;
+    /**
+     * Initial completion result. Useful to load an existing history.
+     */
+    initialCompletion?: string;
+    /**
+     * Callback function to be called when the API response is received.
+     */
+    onResponse?: (response: Response) => void;
+    /**
+     * Callback function to be called when the completion is finished streaming.
+     */
+    onFinish?: (prompt: string, completion: string) => void;
+    /**
+     * Callback function to be called when an error is encountered.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * HTTP headers to be sent with the API request.
+     */
+    headers?: Record<string, string> | Headers;
+    /**
+     * Extra body object to be sent with the API request.
+     * @example
+     * Send a `sessionId` to the API along with the prompt.
+     * ```js
+     * useChat({
+     *   body: {
+     *     sessionId: '123',
+     *   }
+     * })
+     * ```
+     */
+    body?: object;
+};
+
+type UseChatHelpers = {
+    /** Current messages in the chat */
+    messages: Readable<Message[]>;
+    /** The error object of the API request */
+    error: Readable<undefined | Error>;
+    /**
+     * Append a user message to the chat list. This triggers the API call to fetch
+     * the assistant's response.
+     */
+    append: (message: Message | CreateMessage) => Promise<string | null | undefined>;
+    /**
+     * Reload the last AI chat response for the given chat history. If the last
+     * message isn't from the assistant, it will request the API to generate a
+     * new response.
+     */
+    reload: () => Promise<string | null | undefined>;
+    /**
+     * Abort the current request immediately, keep the generated tokens if any.
+     */
+    stop: () => void;
+    /**
+     * Update the `messages` state locally. This is useful when you want to
+     * edit the messages on the client, and then trigger the `reload` method
+     * manually to regenerate the AI response.
+     */
+    setMessages: (messages: Message[]) => void;
+    /** The current value of the input */
+    input: Writable<string>;
+    /** Form submission handler to automattically reset input and append a user message  */
+    handleSubmit: (e: any) => void;
+    /** Whether the API request is in progress */
+    isLoading: Writable<boolean>;
+};
+declare function useChat({ api, id, initialMessages, initialInput, sendExtraMessageFields, onResponse, onFinish, onError, headers, body }?: UseChatOptions): UseChatHelpers;
+
+type UseCompletionHelpers = {
+    /** The current completion result */
+    completion: Readable<string>;
+    /** The error object of the API request */
+    error: Readable<undefined | Error>;
+    /**
+     * Send a new prompt to the API endpoint and update the completion state.
+     */
+    complete: (prompt: string) => Promise<string | null | undefined>;
+    /**
+     * Abort the current API request but keep the generated tokens.
+     */
+    stop: () => void;
+    /**
+     * Update the `completion` state locally.
+     */
+    setCompletion: (completion: string) => void;
+    /** The current value of the input */
+    input: Writable<string>;
+    /**
+     * Form submission handler to automattically reset input and append a user message
+     * @example
+     * ```jsx
+     * <form onSubmit={handleSubmit}>
+     *  <input onChange={handleInputChange} value={input} />
+     * </form>
+     * ```
+     */
+    handleSubmit: (e: any) => void;
+    /** Whether the API request is in progress */
+    isLoading: Writable<boolean>;
+};
+declare function useCompletion({ api, id, initialCompletion, initialInput, headers, body, onResponse, onFinish, onError }?: UseCompletionOptions): UseCompletionHelpers;
+
+export { CreateMessage, Message, UseChatHelpers, UseChatOptions, UseCompletionHelpers, useChat, useCompletion };

package/svelte/dist/index.js

@@ -659,7 +659,8 @@ function useChat({
       return;
     append({
       content: inputValue,
-      role: "user"
+      role: "user",
+      createdAt: /* @__PURE__ */ new Date()
     });
     input.set("");
   };