@standardagents/vue 0.10.1-dev.8f03957 → 0.10.1-dev.d2d335e

package/dist/index.cjs

@@ -35,6 +35,18 @@ function useStandardAgents() {
 
 // src/composables/useThreadSetup.ts
 var uploadManager = new client.FileUploadManager();
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
 function useThreadSetup(threadId, options = {}) {
   const {
     preload = true,
@@ -58,6 +70,7 @@ function useThreadSetup(threadId, options = {}) {
   const isLoading = vue.ref(preload);
   const error = vue.ref(null);
   const pendingFiles = vue.ref([]);
+  const attachments = vue.ref([]);
   const committedFiles = vue.computed(() => {
     return client.messagesToFiles(messages.value);
   });
@@ -129,9 +142,53 @@ function useThreadSetup(threadId, options = {}) {
     connectionManager.connect();
   }
   async function sendMessage(payload) {
+    const optimisticId = `optimistic-${crypto.randomUUID()}`;
+    const optimisticAttachments = attachments.value.map((a) => ({
+      id: a.id,
+      type: "file",
+      path: "",
+      // No path yet - will be assigned by server
+      name: a.name,
+      mimeType: a.mimeType,
+      size: a.size,
+      width: a.width,
+      height: a.height,
+      localPreviewUrl: a.previewUrl || void 0
+    }));
+    const optimisticMessage = {
+      id: optimisticId,
+      role: payload.role,
+      content: payload.content,
+      attachments: optimisticAttachments.length > 0 ? JSON.stringify(optimisticAttachments) : null,
+      created_at: Date.now() * 1e3,
+      // microseconds
+      status: "pending"
+    };
+    messages.value = [...messages.value, optimisticMessage];
+    const currentAttachments = [...attachments.value];
+    attachments.value = [];
     try {
-      return await client$1.sendMessage(threadId, payload);
+      const attachmentPayloads = await Promise.all(
+        currentAttachments.map(async (a) => ({
+          name: a.name,
+          mimeType: a.mimeType,
+          data: await fileToBase64(a.file),
+          width: a.width,
+          height: a.height
+        }))
+      );
+      const result = await client$1.sendMessage(threadId, {
+        ...payload,
+        attachments: attachmentPayloads.length > 0 ? attachmentPayloads : void 0
+      });
+      messages.value = messages.value.filter((m) => m.id !== optimisticId);
+      currentAttachments.forEach((a) => {
+        if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+      });
+      return result;
     } catch (err) {
+      attachments.value = currentAttachments;
+      messages.value = messages.value.filter((m) => m.id !== optimisticId);
       error.value = err instanceof Error ? err : new Error(String(err));
       throw err;
     }
@@ -183,6 +240,35 @@ function useThreadSetup(threadId, options = {}) {
     }
     return null;
   }
+  function addAttachment(input) {
+    const filesToAdd = input instanceof FileList ? Array.from(input) : Array.isArray(input) ? input : [input];
+    const newAttachments = filesToAdd.map((file) => {
+      const isImage = file.type.startsWith("image/");
+      return {
+        id: crypto.randomUUID(),
+        file,
+        name: file.name,
+        mimeType: file.type,
+        size: file.size,
+        isImage,
+        previewUrl: isImage ? URL.createObjectURL(file) : null
+      };
+    });
+    attachments.value = [...attachments.value, ...newAttachments];
+  }
+  function removeAttachment(id) {
+    const attachment = attachments.value.find((a) => a.id === id);
+    if (attachment?.previewUrl) {
+      URL.revokeObjectURL(attachment.previewUrl);
+    }
+    attachments.value = attachments.value.filter((a) => a.id !== id);
+  }
+  function clearAttachments() {
+    attachments.value.forEach((a) => {
+      if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+    });
+    attachments.value = [];
+  }
   function onEvent(eventType, callback) {
     if (!eventHandlers.has(eventType)) {
       eventHandlers.set(eventType, /* @__PURE__ */ new Set());
@@ -207,6 +293,9 @@ function useThreadSetup(threadId, options = {}) {
   vue.onUnmounted(() => {
     connectionManager?.disconnect();
     eventHandlers.clear();
+    attachments.value.forEach((a) => {
+      if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+    });
   });
   return {
     threadId,
@@ -225,13 +314,18 @@ function useThreadSetup(threadId, options = {}) {
     onEvent,
     subscribeToEvent: onEvent,
     // alias
-    // File management
+    // File management (uploads to filesystem)
     files,
     addFiles,
     removeFile,
     getFileUrl,
     getThumbnailUrl,
-    getPreviewUrl
+    getPreviewUrl,
+    // Attachment management (sent inline with messages)
+    attachments,
+    addAttachment,
+    removeAttachment,
+    clearAttachments
   };
 }
 

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, Plugin, PropType } from 'vue';
 import * as _standardagents_client from '@standardagents/client';
-import { AgentBuilderClient, SendMessagePayload, Message, ThreadFile } from '@standardagents/client';
-export { AgentBuilderClient, AttachmentRef, ConnectionStatus, FileUploadManager, GetMessagesOptions, Message, SendMessagePayload, Thread, ThreadConnectionCallbacks, ThreadConnectionManager, ThreadConnectionOptions, ThreadFile, ThreadMessage, WorkItem, WorkMessage, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
+import { AgentBuilderClient, SendMessagePayload, Message, ThreadFile, PendingAttachment } from '@standardagents/client';
+export { AgentBuilderClient, AttachmentPayload, AttachmentRef, ConnectionStatus, FileUploadManager, GetMessagesOptions, Message, PendingAttachment, SendMessagePayload, Thread, ThreadConnectionCallbacks, ThreadConnectionManager, ThreadConnectionOptions, ThreadFile, ThreadMessage, WorkItem, WorkMessage, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
 
 /**
  * Configuration for the StandardAgents plugin
@@ -57,8 +57,8 @@ interface ThreadContext {
     loading: Ref<boolean>;
     /** Any error that occurred */
     error: Ref<Error | null>;
-    /** Send a message to the thread */
-    sendMessage: (payload: SendMessagePayload) => Promise<Message>;
+    /** Send a message to the thread (auto-includes pending attachments) */
+    sendMessage: (payload: Omit<SendMessagePayload, 'attachments'>) => Promise<Message>;
     /** Stop the current execution */
     stopExecution: () => Promise<void>;
     /** Subscribe to custom events */
@@ -67,7 +67,7 @@ interface ThreadContext {
     subscribeToEvent: <T = unknown>(eventType: string, callback: (data: T) => void) => () => void;
     /** All files in the thread (pending uploads + committed from messages) */
     files: ComputedRef<ThreadFile[]>;
-    /** Add files and start uploading immediately */
+    /** Add files and start uploading immediately to filesystem */
     addFiles: (files: File[] | FileList) => void;
     /** Remove a pending file (cannot remove committed files) */
     removeFile: (id: string) => void;
@@ -77,6 +77,14 @@ interface ThreadContext {
     getThumbnailUrl: (file: ThreadFile) => string;
     /** Get preview URL - localPreviewUrl for pending images, thumbnail for committed */
     getPreviewUrl: (file: ThreadFile) => string | null;
+    /** Pending attachments to be sent with next message */
+    attachments: Ref<PendingAttachment[]>;
+    /** Add attachment(s) to be sent with next message (no upload, stored locally) */
+    addAttachment: (files: File | File[] | FileList) => void;
+    /** Remove a pending attachment */
+    removeAttachment: (id: string) => void;
+    /** Clear all pending attachments */
+    clearAttachments: () => void;
 }
 /**
  * Options for useThread composable

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, Plugin, PropType } from 'vue';
 import * as _standardagents_client from '@standardagents/client';
-import { AgentBuilderClient, SendMessagePayload, Message, ThreadFile } from '@standardagents/client';
-export { AgentBuilderClient, AttachmentRef, ConnectionStatus, FileUploadManager, GetMessagesOptions, Message, SendMessagePayload, Thread, ThreadConnectionCallbacks, ThreadConnectionManager, ThreadConnectionOptions, ThreadFile, ThreadMessage, WorkItem, WorkMessage, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
+import { AgentBuilderClient, SendMessagePayload, Message, ThreadFile, PendingAttachment } from '@standardagents/client';
+export { AgentBuilderClient, AttachmentPayload, AttachmentRef, ConnectionStatus, FileUploadManager, GetMessagesOptions, Message, PendingAttachment, SendMessagePayload, Thread, ThreadConnectionCallbacks, ThreadConnectionManager, ThreadConnectionOptions, ThreadFile, ThreadMessage, WorkItem, WorkMessage, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
 
 /**
  * Configuration for the StandardAgents plugin
@@ -57,8 +57,8 @@ interface ThreadContext {
     loading: Ref<boolean>;
     /** Any error that occurred */
     error: Ref<Error | null>;
-    /** Send a message to the thread */
-    sendMessage: (payload: SendMessagePayload) => Promise<Message>;
+    /** Send a message to the thread (auto-includes pending attachments) */
+    sendMessage: (payload: Omit<SendMessagePayload, 'attachments'>) => Promise<Message>;
     /** Stop the current execution */
     stopExecution: () => Promise<void>;
     /** Subscribe to custom events */
@@ -67,7 +67,7 @@ interface ThreadContext {
     subscribeToEvent: <T = unknown>(eventType: string, callback: (data: T) => void) => () => void;
     /** All files in the thread (pending uploads + committed from messages) */
     files: ComputedRef<ThreadFile[]>;
-    /** Add files and start uploading immediately */
+    /** Add files and start uploading immediately to filesystem */
     addFiles: (files: File[] | FileList) => void;
     /** Remove a pending file (cannot remove committed files) */
     removeFile: (id: string) => void;
@@ -77,6 +77,14 @@ interface ThreadContext {
     getThumbnailUrl: (file: ThreadFile) => string;
     /** Get preview URL - localPreviewUrl for pending images, thumbnail for committed */
     getPreviewUrl: (file: ThreadFile) => string | null;
+    /** Pending attachments to be sent with next message */
+    attachments: Ref<PendingAttachment[]>;
+    /** Add attachment(s) to be sent with next message (no upload, stored locally) */
+    addAttachment: (files: File | File[] | FileList) => void;
+    /** Remove a pending attachment */
+    removeAttachment: (id: string) => void;
+    /** Clear all pending attachments */
+    clearAttachments: () => void;
 }
 /**
  * Options for useThread composable

package/dist/index.js

@@ -34,6 +34,18 @@ function useStandardAgents() {
 
 // src/composables/useThreadSetup.ts
 var uploadManager = new FileUploadManager();
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
 function useThreadSetup(threadId, options = {}) {
   const {
     preload = true,
@@ -57,6 +69,7 @@ function useThreadSetup(threadId, options = {}) {
   const isLoading = ref(preload);
   const error = ref(null);
   const pendingFiles = ref([]);
+  const attachments = ref([]);
   const committedFiles = computed(() => {
     return messagesToFiles(messages.value);
   });
@@ -128,9 +141,53 @@ function useThreadSetup(threadId, options = {}) {
     connectionManager.connect();
   }
   async function sendMessage(payload) {
+    const optimisticId = `optimistic-${crypto.randomUUID()}`;
+    const optimisticAttachments = attachments.value.map((a) => ({
+      id: a.id,
+      type: "file",
+      path: "",
+      // No path yet - will be assigned by server
+      name: a.name,
+      mimeType: a.mimeType,
+      size: a.size,
+      width: a.width,
+      height: a.height,
+      localPreviewUrl: a.previewUrl || void 0
+    }));
+    const optimisticMessage = {
+      id: optimisticId,
+      role: payload.role,
+      content: payload.content,
+      attachments: optimisticAttachments.length > 0 ? JSON.stringify(optimisticAttachments) : null,
+      created_at: Date.now() * 1e3,
+      // microseconds
+      status: "pending"
+    };
+    messages.value = [...messages.value, optimisticMessage];
+    const currentAttachments = [...attachments.value];
+    attachments.value = [];
     try {
-      return await client.sendMessage(threadId, payload);
+      const attachmentPayloads = await Promise.all(
+        currentAttachments.map(async (a) => ({
+          name: a.name,
+          mimeType: a.mimeType,
+          data: await fileToBase64(a.file),
+          width: a.width,
+          height: a.height
+        }))
+      );
+      const result = await client.sendMessage(threadId, {
+        ...payload,
+        attachments: attachmentPayloads.length > 0 ? attachmentPayloads : void 0
+      });
+      messages.value = messages.value.filter((m) => m.id !== optimisticId);
+      currentAttachments.forEach((a) => {
+        if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+      });
+      return result;
     } catch (err) {
+      attachments.value = currentAttachments;
+      messages.value = messages.value.filter((m) => m.id !== optimisticId);
       error.value = err instanceof Error ? err : new Error(String(err));
       throw err;
     }
@@ -182,6 +239,35 @@ function useThreadSetup(threadId, options = {}) {
     }
     return null;
   }
+  function addAttachment(input) {
+    const filesToAdd = input instanceof FileList ? Array.from(input) : Array.isArray(input) ? input : [input];
+    const newAttachments = filesToAdd.map((file) => {
+      const isImage = file.type.startsWith("image/");
+      return {
+        id: crypto.randomUUID(),
+        file,
+        name: file.name,
+        mimeType: file.type,
+        size: file.size,
+        isImage,
+        previewUrl: isImage ? URL.createObjectURL(file) : null
+      };
+    });
+    attachments.value = [...attachments.value, ...newAttachments];
+  }
+  function removeAttachment(id) {
+    const attachment = attachments.value.find((a) => a.id === id);
+    if (attachment?.previewUrl) {
+      URL.revokeObjectURL(attachment.previewUrl);
+    }
+    attachments.value = attachments.value.filter((a) => a.id !== id);
+  }
+  function clearAttachments() {
+    attachments.value.forEach((a) => {
+      if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+    });
+    attachments.value = [];
+  }
   function onEvent(eventType, callback) {
     if (!eventHandlers.has(eventType)) {
       eventHandlers.set(eventType, /* @__PURE__ */ new Set());
@@ -206,6 +292,9 @@ function useThreadSetup(threadId, options = {}) {
   onUnmounted(() => {
     connectionManager?.disconnect();
     eventHandlers.clear();
+    attachments.value.forEach((a) => {
+      if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+    });
   });
   return {
     threadId,
@@ -224,13 +313,18 @@ function useThreadSetup(threadId, options = {}) {
     onEvent,
     subscribeToEvent: onEvent,
     // alias
-    // File management
+    // File management (uploads to filesystem)
     files,
     addFiles,
     removeFile,
     getFileUrl,
     getThumbnailUrl,
-    getPreviewUrl
+    getPreviewUrl,
+    // Attachment management (sent inline with messages)
+    attachments,
+    addAttachment,
+    removeAttachment,
+    clearAttachments
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardagents/vue",
-  "version": "0.10.1-dev.8f03957",
+  "version": "0.10.1-dev.d2d335e",
   "description": "Vue SDK for Standard Agents",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@standardagents/client": "0.10.1-dev.8f03957"
+    "@standardagents/client": "0.10.1-dev.d2d335e"
   },
   "peerDependencies": {
     "vue": "^3.3.0"