@ai-sdk/vue - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

CHANGELOG.md

 # @ai-sdk/vue
 
+## 0.0.15
+
+### Patch Changes
+
+- dd0d854e: feat (ai/vue): add useAssistant
+
 ## 0.0.14
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -1,4 +0,4 @@
-import { Message, CreateMessage, ChatRequestOptions, JSONValue, UseChatOptions, RequestOptions, UseCompletionOptions } from '@ai-sdk/ui-utils';
+import { Message, CreateMessage, ChatRequestOptions, JSONValue, UseChatOptions, RequestOptions, UseCompletionOptions, AssistantStatus, UseAssistantOptions } from '@ai-sdk/ui-utils';
 export { CreateMessage, Message, UseChatOptions, UseCompletionOptions } from '@ai-sdk/ui-utils';
-import { Ref } from 'vue';
+import { Ref, ComputedRef } from 'vue';
 
@@ -82,2 +82,71 @@ type UseChatHelpers = {
 
-export { UseChatHelpers, UseCompletionHelpers, useChat, useCompletion };
+/**
+ * A vue.js composable function to interact with the assistant API.
+ */
+
+type UseAssistantHelpers = {
+    /**
+     * The current array of chat messages.
+     */
+    messages: Ref<Message[]>;
+    /**
+     * Update the message store with a new array of messages.
+     */
+    setMessages: (messagesProcessor: (messages: Message[]) => Message[]) => void;
+    /**
+     * The current thread ID.
+     */
+    threadId: Ref<string | undefined>;
+    /**
+     * Set the current thread ID. Specifying a thread ID will switch to that thread, if it exists. If set to 'undefined', a new thread will be created. For both cases, `threadId` will be updated with the new value and `messages` will be cleared.
+     */
+    setThreadId: (threadId: string | undefined) => void;
+    /**
+     * The current value of the input field.
+     */
+    input: Ref<string>;
+    /**
+     * Append a user message to the chat list. This triggers the API call to fetch
+     * the assistant's response.
+     * @param message The message to append
+     * @param requestOptions Additional options to pass to the API call
+     */
+    append: (message: Message | CreateMessage, requestOptions?: {
+        data?: Record<string, string>;
+    }) => Promise<void>;
+    /**
+     * Abort the current request immediately, keep the generated tokens if any.
+     */
+    stop: ComputedRef<() => void>;
+    /**
+     * Handler for the `onChange` event of the input field to control the input's value.
+     */
+    handleInputChange: (e: Event & {
+        target: HTMLInputElement;
+    }) => void;
+    /**
+     * Handler for the `onSubmit` event of the form to append a user message and reset the input.
+     */
+    handleSubmit: (e: Event & {
+        target: HTMLFormElement;
+    }) => void;
+    /**
+     * Whether the assistant is currently sending a message.
+     */
+    isSending: ComputedRef<boolean>;
+    /**
+     * The current status of the assistant.
+     */
+    status: Ref<AssistantStatus>;
+    /**
+     * The current error, if any.
+     */
+    error: Ref<Error | undefined>;
+};
+declare function useAssistant({ api, threadId: threadIdParam, credentials, headers, body, onError, }: UseAssistantOptions): UseAssistantHelpers;
+/**
+ * @deprecated Use `useAssistant` instead.
+ */
+declare const experimental_useAssistant: typeof useAssistant;
+
+export { UseAssistantHelpers, UseChatHelpers, UseCompletionHelpers, experimental_useAssistant, useAssistant, useChat, useCompletion };

dist/index.js

@@ -33,2 +33,4 @@ "use strict";
 __export(src_exports, {
+  experimental_useAssistant: () => experimental_useAssistant,
+  useAssistant: () => useAssistant,
   useChat: () => useChat,
@@ -60,4 +62,4 @@ useCompletion: () => useCompletion
   body,
-  generateId = import_ui_utils.generateId,
-  fetch
+  generateId: generateId2 = import_ui_utils.generateId,
+  fetch: fetch2
 } = {}) {
@@ -153,6 +155,6 @@ var _a, _b;
             },
-            generateId,
+            generateId: generateId2,
             onToolCall: void 0,
             // not implemented yet
-            fetch
+            fetch: fetch2
           });
@@ -183,3 +185,3 @@ },
     if (!message.id) {
-      message.id = generateId();
+      message.id = generateId2();
     }
@@ -218,3 +220,3 @@ const requestOptions = {
       inputValue ? messages.value.concat({
-        id: generateId(),
+        id: generateId2(),
         content: inputValue,
@@ -260,3 +262,3 @@ role: "user"
   onError,
-  fetch
+  fetch: fetch2
 } = {}) {
@@ -314,3 +316,3 @@ var _a;
       },
-      fetch
+      fetch: fetch2
     });
@@ -349,4 +351,184 @@ }
 }
+
+// src/use-assistant.ts
+var import_provider_utils = require("@ai-sdk/provider-utils");
+var import_ui_utils3 = require("@ai-sdk/ui-utils");
+var import_vue3 = require("vue");
+function useAssistant({
+  api,
+  threadId: threadIdParam,
+  credentials,
+  headers,
+  body,
+  onError
+}) {
+  const messages = (0, import_vue3.ref)([]);
+  const input = (0, import_vue3.ref)("");
+  const currentThreadId = (0, import_vue3.ref)(void 0);
+  const status = (0, import_vue3.ref)("awaiting_message");
+  const error = (0, import_vue3.ref)(void 0);
+  const setMessages = (messageFactory) => {
+    messages.value = messageFactory(messages.value);
+  };
+  const setCurrentThreadId = (newThreadId) => {
+    currentThreadId.value = newThreadId;
+    messages.value = [];
+  };
+  const handleInputChange = (event) => {
+    var _a;
+    input.value = (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value;
+  };
+  const isSending = (0, import_vue3.computed)(() => status.value === "in_progress");
+  const abortController = (0, import_vue3.ref)(null);
+  const stop = (0, import_vue3.computed)(() => {
+    return () => {
+      if (abortController.value) {
+        abortController.value.abort();
+        abortController.value = null;
+      }
+    };
+  });
+  const append = async (message, requestOptions) => {
+    var _a, _b, _c, _d;
+    status.value = "in_progress";
+    const newMessage = {
+      ...message,
+      id: (_a = message.id) != null ? _a : (0, import_ui_utils3.generateId)()
+    };
+    setMessages((messages2) => [...messages2, newMessage]);
+    input.value = "";
+    const controller = new AbortController();
+    try {
+      abortController.value = controller;
+      const response = await fetch(api, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: JSON.stringify({
+          ...body,
+          // Message Content
+          message: message.content,
+          // Always Use User Provided Thread ID When Available
+          threadId: (_b = threadIdParam != null ? threadIdParam : currentThreadId.value) != null ? _b : null,
+          // Optional Request Data
+          ...(requestOptions == null ? void 0 : requestOptions.data) && { data: requestOptions == null ? void 0 : requestOptions.data }
+        }),
+        signal: controller.signal,
+        credentials
+      });
+      if (!response.ok) {
+        throw new Error(
+          (_c = response.statusText) != null ? _c : "An error occurred while sending the message"
+        );
+      }
+      if (!response.body) {
+        throw new Error("The response body is empty");
+      }
+      for await (const { type, value } of (0, import_ui_utils3.readDataStream)(
+        response.body.getReader()
+      )) {
+        switch (type) {
+          case "assistant_message": {
+            messages.value = [
+              ...messages.value,
+              {
+                id: value.id,
+                content: value.content[0].text.value,
+                role: value.role
+              }
+            ];
+            break;
+          }
+          case "assistant_control_data": {
+            if (value.threadId) {
+              currentThreadId.value = value.threadId;
+            }
+            setMessages((messages2) => {
+              const lastMessage = messages2[messages2.length - 1];
+              lastMessage.id = value.messageId;
+              return [...messages2.slice(0, -1), lastMessage];
+            });
+            break;
+          }
+          case "text": {
+            setMessages((messages2) => {
+              const lastMessage = messages2[messages2.length - 1];
+              lastMessage.content += value;
+              return [...messages2.slice(0, -1), lastMessage];
+            });
+            break;
+          }
+          case "data_message": {
+            setMessages((messages2) => {
+              var _a2;
+              return [
+                ...messages2,
+                {
+                  id: (_a2 = value.id) != null ? _a2 : (0, import_ui_utils3.generateId)(),
+                  role: "data",
+                  content: "",
+                  data: value.data
+                }
+              ];
+            });
+            break;
+          }
+          case "error": {
+            error.value = new Error(value);
+          }
+          default: {
+            console.error("Unknown message type:", type);
+            break;
+          }
+        }
+      }
+    } catch (err) {
+      if ((0, import_provider_utils.isAbortError)(err) && ((_d = abortController.value) == null ? void 0 : _d.signal.aborted)) {
+        abortController.value = null;
+        return;
+      }
+      if (onError && err instanceof Error) {
+        onError(err);
+      }
+      error.value = err;
+    } finally {
+      abortController.value = null;
+      status.value = "awaiting_message";
+    }
+  };
+  const submitMessage = async (event, requestOptions) => {
+    var _a;
+    (_a = event == null ? void 0 : event.preventDefault) == null ? void 0 : _a.call(event);
+    if (!input.value)
+      return;
+    append(
+      {
+        role: "user",
+        content: input.value
+      },
+      requestOptions
+    );
+  };
+  return {
+    append,
+    messages,
+    setMessages,
+    threadId: (0, import_vue3.readonly)(currentThreadId),
+    setThreadId: setCurrentThreadId,
+    input,
+    handleInputChange,
+    handleSubmit: submitMessage,
+    isSending,
+    status,
+    error,
+    stop
+  };
+}
+var experimental_useAssistant = useAssistant;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  experimental_useAssistant,
+  useAssistant,
   useChat,
@@ -353,0 +535,0 @@ useCompletion

package.json

 {
   "name": "@ai-sdk/vue",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "Apache-2.0",
@@ -18,2 +18,3 @@ "sideEffects": false,
   "dependencies": {
+    "@ai-sdk/provider-utils": "0.0.14",
     "@ai-sdk/ui-utils": "0.0.12",
@@ -20,0 +21,0 @@ "swrv": "1.0.4"

README.md

@@ -5,3 +5,4 @@ # Vercel AI SDK: Vue.js provider
 
-- [`useChat`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat) hook
-- [`useCompletion`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-completion) hook
+- [`useChat`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat) composable
+- [`useCompletion`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-completion) composable
+- [`useAssistant`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-assistant) composable

src/index.ts

 export * from './use-chat';
 export * from './use-completion';
+export * from './use-assistant';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153252

increased by58.64%

Number of package files

33

increased by13.79%

Lines of code

2337

increased by64.35%

Number of lines in readme file

8

increased by14.29%

Number of medium supply chain risk alerts

2

decreased by-50%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@ai-sdk/provider-utils@0.0.14

• + Added@ai-sdk/provider@0.0.10(transitive)

• + Added@ai-sdk/provider-utils@0.0.14(transitive)