@standardagents/vue 0.10.1-dev.d2d335e → 0.11.0-next.41deba4

package/dist/index.cjs

@@ -47,7 +47,7 @@ function fileToBase64(file) {
     reader.readAsDataURL(file);
   });
 }
-function useThreadSetup(threadId, options = {}) {
+function useThreadSetup(threadIdInput, options = {}) {
   const {
     preload = true,
     live = true,
@@ -56,6 +56,7 @@ function useThreadSetup(threadId, options = {}) {
     includeSilent = false,
     endpoint: endpointOverride
   } = options;
+  const threadId = vue.computed(() => vue.toValue(threadIdInput));
   const context = useStandardAgents();
   const client$1 = endpointOverride ? new client.AgentBuilderClient(endpointOverride) : context.client;
   const resolvedOptions = {
@@ -70,12 +71,12 @@ function useThreadSetup(threadId, options = {}) {
   const isLoading = vue.ref(preload);
   const error = vue.ref(null);
   const pendingFiles = vue.ref([]);
+  const serverFiles = vue.ref([]);
   const attachments = vue.ref([]);
-  const committedFiles = vue.computed(() => {
-    return client.messagesToFiles(messages.value);
-  });
   const files = vue.computed(() => {
-    return [...pendingFiles.value, ...committedFiles.value];
+    const serverPaths = new Set(serverFiles.value.map((f) => f.path));
+    const uniquePendingFiles = pendingFiles.value.filter((f) => !f.path || !serverPaths.has(f.path));
+    return [...uniquePendingFiles, ...serverFiles.value];
   });
   const eventHandlers = /* @__PURE__ */ new Map();
   let connectionManager = null;
@@ -89,7 +90,7 @@ function useThreadSetup(threadId, options = {}) {
     isLoading.value = true;
     error.value = null;
     try {
-      const loadedMessages = await client$1.getMessages(threadId, { depth, includeSilent });
+      const loadedMessages = await client$1.getMessages(threadId.value, { depth, includeSilent });
       messages.value = loadedMessages;
     } catch (err) {
       error.value = err instanceof Error ? err : new Error(String(err));
@@ -97,9 +98,68 @@ function useThreadSetup(threadId, options = {}) {
       isLoading.value = false;
     }
   }
+  async function loadFiles() {
+    try {
+      const fileList = await client$1.listFiles(threadId.value);
+      serverFiles.value = fileList.filter((f) => !f.isDirectory).map((f) => ({
+        id: f.path,
+        // Use path as ID for server files
+        name: f.name,
+        path: f.path,
+        mimeType: f.mimeType,
+        size: f.size,
+        isImage: f.mimeType.startsWith("image/"),
+        status: "committed",
+        localPreviewUrl: null
+      }));
+    } catch (err) {
+      console.error("Failed to load files:", err);
+    }
+  }
+  function handleFileCreated(data) {
+    if (data.file.isDirectory) return;
+    const newFile = {
+      id: data.path,
+      name: data.file.name,
+      path: data.path,
+      mimeType: data.file.mimeType,
+      size: data.file.size,
+      isImage: data.file.mimeType?.startsWith("image/") || false,
+      status: "committed",
+      localPreviewUrl: null
+    };
+    const existingIndex = serverFiles.value.findIndex((f) => f.path === data.path);
+    if (existingIndex >= 0) {
+      serverFiles.value[existingIndex] = newFile;
+    } else {
+      serverFiles.value = [...serverFiles.value, newFile];
+    }
+  }
+  function handleFileUpdated(data) {
+    if (data.file.isDirectory) return;
+    const updatedFile = {
+      id: data.path,
+      name: data.file.name,
+      path: data.path,
+      mimeType: data.file.mimeType,
+      size: data.file.size,
+      isImage: data.file.mimeType?.startsWith("image/") || false,
+      status: "committed",
+      localPreviewUrl: null
+    };
+    const existingIndex = serverFiles.value.findIndex((f) => f.path === data.path);
+    if (existingIndex >= 0) {
+      serverFiles.value[existingIndex] = updatedFile;
+    } else {
+      serverFiles.value = [...serverFiles.value, updatedFile];
+    }
+  }
+  function handleFileDeleted(data) {
+    serverFiles.value = serverFiles.value.filter((f) => f.path !== data.path);
+  }
   function connect() {
     if (!live) return;
-    connectionManager = new client.ThreadConnectionManager(client$1, threadId, {
+    connectionManager = new client.ThreadConnectionManager(client$1, threadId.value, {
       onStatusChange: (newStatus) => {
         status.value = newStatus;
       },
@@ -124,6 +184,13 @@ function useThreadSetup(threadId, options = {}) {
         }
       },
       onEvent: (event) => {
+        if (event.eventType === "file_created") {
+          handleFileCreated(event.data);
+        } else if (event.eventType === "file_updated") {
+          handleFileUpdated(event.data);
+        } else if (event.eventType === "file_deleted") {
+          handleFileDeleted(event.data);
+        }
         const handlers = eventHandlers.get(event.eventType);
         if (handlers) {
           handlers.forEach((handler) => {
@@ -177,7 +244,7 @@ function useThreadSetup(threadId, options = {}) {
           height: a.height
         }))
       );
-      const result = await client$1.sendMessage(threadId, {
+      const result = await client$1.sendMessage(threadId.value, {
         ...payload,
         attachments: attachmentPayloads.length > 0 ? attachmentPayloads : void 0
       });
@@ -195,18 +262,29 @@ function useThreadSetup(threadId, options = {}) {
   }
   async function stopExecution() {
     try {
-      await client$1.stopExecution(threadId);
+      await client$1.stopExecution(threadId.value);
     } catch (err) {
       error.value = err instanceof Error ? err : new Error(String(err));
       throw err;
     }
   }
+  async function deleteMessage(messageId) {
+    const previousMessages = [...messages.value];
+    messages.value = messages.value.filter((m) => m.id !== messageId);
+    try {
+      await client$1.deleteMessage(threadId.value, messageId);
+    } catch (err) {
+      messages.value = previousMessages;
+      error.value = err instanceof Error ? err : new Error(String(err));
+      throw err;
+    }
+  }
   function addFiles(filesToAdd) {
     const items = uploadManager.queueFiles(filesToAdd);
     pendingFiles.value = [...pendingFiles.value, ...items.map((i) => i.pending)];
     for (const { pending, file } of items) {
       uploadManager.executeUpload(
-        threadId,
+        threadId.value,
         file,
         pending.id,
         client$1,
@@ -224,11 +302,11 @@ function useThreadSetup(threadId, options = {}) {
   }
   function getFileUrl(file) {
     if (!file.path) return "";
-    return client$1.getFileUrl(threadId, file.path);
+    return client$1.getFileUrl(threadId.value, file.path);
   }
   function getThumbnailUrl(file) {
     if (!file.path) return "";
-    return client$1.getThumbnailUrl(threadId, file.path);
+    return client$1.getThumbnailUrl(threadId.value, file.path);
   }
   function getPreviewUrl(file) {
     if (!file.isImage) return null;
@@ -284,10 +362,34 @@ function useThreadSetup(threadId, options = {}) {
       }
     };
   }
+  function disconnect() {
+    connectionManager?.disconnect();
+    connectionManager = null;
+    status.value = "disconnected";
+  }
+  vue.watch(threadId, (newThreadId, oldThreadId) => {
+    if (newThreadId !== oldThreadId) {
+      disconnect();
+      messages.value = [];
+      error.value = null;
+      pendingFiles.value = [];
+      serverFiles.value = [];
+      attachments.value.forEach((a) => {
+        if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+      });
+      attachments.value = [];
+      if (preload) {
+        loadMessages();
+      }
+      loadFiles();
+      connect();
+    }
+  });
   vue.onMounted(() => {
     if (preload) {
       loadMessages();
     }
+    loadFiles();
     connect();
   });
   vue.onUnmounted(() => {
@@ -311,6 +413,7 @@ function useThreadSetup(threadId, options = {}) {
     error,
     sendMessage,
     stopExecution,
+    deleteMessage,
     onEvent,
     subscribeToEvent: onEvent,
     // alias
@@ -391,7 +494,7 @@ var ThreadProvider = vue.defineComponent({
     if (props.depth !== void 0) options.depth = props.depth;
     if (props.includeSilent !== void 0) options.includeSilent = props.includeSilent;
     if (props.endpoint !== void 0) options.endpoint = props.endpoint;
-    const context = useThreadSetup(props.threadId, options);
+    const context = useThreadSetup(() => props.threadId, options);
     vue.provide(ThreadKey, context);
     return () => slots.default?.();
   }

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, ComputedRef, InjectionKey, Plugin, PropType } from 'vue';
+import { ComputedRef, Ref, InjectionKey, Plugin, PropType } from 'vue';
 import * as _standardagents_client 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';
@@ -39,8 +39,8 @@ interface ThreadProviderOptions {
  * Thread context value provided by ThreadProvider
  */
 interface ThreadContext {
-    /** The thread ID */
-    threadId: string;
+    /** The thread ID (computed to handle reactive input) */
+    threadId: ComputedRef<string>;
     /** Options passed to the provider */
     options: ThreadProviderOptions;
     /** Current messages in the thread */
@@ -61,6 +61,8 @@ interface ThreadContext {
     sendMessage: (payload: Omit<SendMessagePayload, 'attachments'>) => Promise<Message>;
     /** Stop the current execution */
     stopExecution: () => Promise<void>;
+    /** Delete a message from the thread (optimistically removes from UI) */
+    deleteMessage: (messageId: string) => Promise<void>;
     /** Subscribe to custom events */
     onEvent: <T = unknown>(eventType: string, callback: (data: T) => void) => () => void;
     /** Subscribe to custom events (alias for onEvent) */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, ComputedRef, InjectionKey, Plugin, PropType } from 'vue';
+import { ComputedRef, Ref, InjectionKey, Plugin, PropType } from 'vue';
 import * as _standardagents_client 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';
@@ -39,8 +39,8 @@ interface ThreadProviderOptions {
  * Thread context value provided by ThreadProvider
  */
 interface ThreadContext {
-    /** The thread ID */
-    threadId: string;
+    /** The thread ID (computed to handle reactive input) */
+    threadId: ComputedRef<string>;
     /** Options passed to the provider */
     options: ThreadProviderOptions;
     /** Current messages in the thread */
@@ -61,6 +61,8 @@ interface ThreadContext {
     sendMessage: (payload: Omit<SendMessagePayload, 'attachments'>) => Promise<Message>;
     /** Stop the current execution */
     stopExecution: () => Promise<void>;
+    /** Delete a message from the thread (optimistically removes from UI) */
+    deleteMessage: (messageId: string) => Promise<void>;
     /** Subscribe to custom events */
     onEvent: <T = unknown>(eventType: string, callback: (data: T) => void) => () => void;
     /** Subscribe to custom events (alias for onEvent) */

package/dist/index.js

@@ -1,6 +1,6 @@
-import { FileUploadManager, AgentBuilderClient, messagesToFiles, transformToWorkblocks, ThreadConnectionManager } from '@standardagents/client';
+import { FileUploadManager, AgentBuilderClient, transformToWorkblocks, ThreadConnectionManager } from '@standardagents/client';
 export { AgentBuilderClient, FileUploadManager, ThreadConnectionManager, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
-import { defineComponent, provide, ref, computed, onMounted, onUnmounted, inject } from 'vue';
+import { defineComponent, provide, computed, toValue, ref, watch, onMounted, onUnmounted, inject } from 'vue';
 
 // src/plugin.ts
 
@@ -46,7 +46,7 @@ function fileToBase64(file) {
     reader.readAsDataURL(file);
   });
 }
-function useThreadSetup(threadId, options = {}) {
+function useThreadSetup(threadIdInput, options = {}) {
   const {
     preload = true,
     live = true,
@@ -55,6 +55,7 @@ function useThreadSetup(threadId, options = {}) {
     includeSilent = false,
     endpoint: endpointOverride
   } = options;
+  const threadId = computed(() => toValue(threadIdInput));
   const context = useStandardAgents();
   const client = endpointOverride ? new AgentBuilderClient(endpointOverride) : context.client;
   const resolvedOptions = {
@@ -69,12 +70,12 @@ function useThreadSetup(threadId, options = {}) {
   const isLoading = ref(preload);
   const error = ref(null);
   const pendingFiles = ref([]);
+  const serverFiles = ref([]);
   const attachments = ref([]);
-  const committedFiles = computed(() => {
-    return messagesToFiles(messages.value);
-  });
   const files = computed(() => {
-    return [...pendingFiles.value, ...committedFiles.value];
+    const serverPaths = new Set(serverFiles.value.map((f) => f.path));
+    const uniquePendingFiles = pendingFiles.value.filter((f) => !f.path || !serverPaths.has(f.path));
+    return [...uniquePendingFiles, ...serverFiles.value];
   });
   const eventHandlers = /* @__PURE__ */ new Map();
   let connectionManager = null;
@@ -88,7 +89,7 @@ function useThreadSetup(threadId, options = {}) {
     isLoading.value = true;
     error.value = null;
     try {
-      const loadedMessages = await client.getMessages(threadId, { depth, includeSilent });
+      const loadedMessages = await client.getMessages(threadId.value, { depth, includeSilent });
       messages.value = loadedMessages;
     } catch (err) {
       error.value = err instanceof Error ? err : new Error(String(err));
@@ -96,9 +97,68 @@ function useThreadSetup(threadId, options = {}) {
       isLoading.value = false;
     }
   }
+  async function loadFiles() {
+    try {
+      const fileList = await client.listFiles(threadId.value);
+      serverFiles.value = fileList.filter((f) => !f.isDirectory).map((f) => ({
+        id: f.path,
+        // Use path as ID for server files
+        name: f.name,
+        path: f.path,
+        mimeType: f.mimeType,
+        size: f.size,
+        isImage: f.mimeType.startsWith("image/"),
+        status: "committed",
+        localPreviewUrl: null
+      }));
+    } catch (err) {
+      console.error("Failed to load files:", err);
+    }
+  }
+  function handleFileCreated(data) {
+    if (data.file.isDirectory) return;
+    const newFile = {
+      id: data.path,
+      name: data.file.name,
+      path: data.path,
+      mimeType: data.file.mimeType,
+      size: data.file.size,
+      isImage: data.file.mimeType?.startsWith("image/") || false,
+      status: "committed",
+      localPreviewUrl: null
+    };
+    const existingIndex = serverFiles.value.findIndex((f) => f.path === data.path);
+    if (existingIndex >= 0) {
+      serverFiles.value[existingIndex] = newFile;
+    } else {
+      serverFiles.value = [...serverFiles.value, newFile];
+    }
+  }
+  function handleFileUpdated(data) {
+    if (data.file.isDirectory) return;
+    const updatedFile = {
+      id: data.path,
+      name: data.file.name,
+      path: data.path,
+      mimeType: data.file.mimeType,
+      size: data.file.size,
+      isImage: data.file.mimeType?.startsWith("image/") || false,
+      status: "committed",
+      localPreviewUrl: null
+    };
+    const existingIndex = serverFiles.value.findIndex((f) => f.path === data.path);
+    if (existingIndex >= 0) {
+      serverFiles.value[existingIndex] = updatedFile;
+    } else {
+      serverFiles.value = [...serverFiles.value, updatedFile];
+    }
+  }
+  function handleFileDeleted(data) {
+    serverFiles.value = serverFiles.value.filter((f) => f.path !== data.path);
+  }
   function connect() {
     if (!live) return;
-    connectionManager = new ThreadConnectionManager(client, threadId, {
+    connectionManager = new ThreadConnectionManager(client, threadId.value, {
       onStatusChange: (newStatus) => {
         status.value = newStatus;
       },
@@ -123,6 +183,13 @@ function useThreadSetup(threadId, options = {}) {
         }
       },
       onEvent: (event) => {
+        if (event.eventType === "file_created") {
+          handleFileCreated(event.data);
+        } else if (event.eventType === "file_updated") {
+          handleFileUpdated(event.data);
+        } else if (event.eventType === "file_deleted") {
+          handleFileDeleted(event.data);
+        }
         const handlers = eventHandlers.get(event.eventType);
         if (handlers) {
           handlers.forEach((handler) => {
@@ -176,7 +243,7 @@ function useThreadSetup(threadId, options = {}) {
           height: a.height
         }))
       );
-      const result = await client.sendMessage(threadId, {
+      const result = await client.sendMessage(threadId.value, {
         ...payload,
         attachments: attachmentPayloads.length > 0 ? attachmentPayloads : void 0
       });
@@ -194,18 +261,29 @@ function useThreadSetup(threadId, options = {}) {
   }
   async function stopExecution() {
     try {
-      await client.stopExecution(threadId);
+      await client.stopExecution(threadId.value);
     } catch (err) {
       error.value = err instanceof Error ? err : new Error(String(err));
       throw err;
     }
   }
+  async function deleteMessage(messageId) {
+    const previousMessages = [...messages.value];
+    messages.value = messages.value.filter((m) => m.id !== messageId);
+    try {
+      await client.deleteMessage(threadId.value, messageId);
+    } catch (err) {
+      messages.value = previousMessages;
+      error.value = err instanceof Error ? err : new Error(String(err));
+      throw err;
+    }
+  }
   function addFiles(filesToAdd) {
     const items = uploadManager.queueFiles(filesToAdd);
     pendingFiles.value = [...pendingFiles.value, ...items.map((i) => i.pending)];
     for (const { pending, file } of items) {
       uploadManager.executeUpload(
-        threadId,
+        threadId.value,
         file,
         pending.id,
         client,
@@ -223,11 +301,11 @@ function useThreadSetup(threadId, options = {}) {
   }
   function getFileUrl(file) {
     if (!file.path) return "";
-    return client.getFileUrl(threadId, file.path);
+    return client.getFileUrl(threadId.value, file.path);
   }
   function getThumbnailUrl(file) {
     if (!file.path) return "";
-    return client.getThumbnailUrl(threadId, file.path);
+    return client.getThumbnailUrl(threadId.value, file.path);
   }
   function getPreviewUrl(file) {
     if (!file.isImage) return null;
@@ -283,10 +361,34 @@ function useThreadSetup(threadId, options = {}) {
       }
     };
   }
+  function disconnect() {
+    connectionManager?.disconnect();
+    connectionManager = null;
+    status.value = "disconnected";
+  }
+  watch(threadId, (newThreadId, oldThreadId) => {
+    if (newThreadId !== oldThreadId) {
+      disconnect();
+      messages.value = [];
+      error.value = null;
+      pendingFiles.value = [];
+      serverFiles.value = [];
+      attachments.value.forEach((a) => {
+        if (a.previewUrl) URL.revokeObjectURL(a.previewUrl);
+      });
+      attachments.value = [];
+      if (preload) {
+        loadMessages();
+      }
+      loadFiles();
+      connect();
+    }
+  });
   onMounted(() => {
     if (preload) {
       loadMessages();
     }
+    loadFiles();
     connect();
   });
   onUnmounted(() => {
@@ -310,6 +412,7 @@ function useThreadSetup(threadId, options = {}) {
     error,
     sendMessage,
     stopExecution,
+    deleteMessage,
     onEvent,
     subscribeToEvent: onEvent,
     // alias
@@ -390,7 +493,7 @@ var ThreadProvider = defineComponent({
     if (props.depth !== void 0) options.depth = props.depth;
     if (props.includeSilent !== void 0) options.includeSilent = props.includeSilent;
     if (props.endpoint !== void 0) options.endpoint = props.endpoint;
-    const context = useThreadSetup(props.threadId, options);
+    const context = useThreadSetup(() => props.threadId, options);
     provide(ThreadKey, context);
     return () => slots.default?.();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@standardagents/vue",
-  "version": "0.10.1-dev.d2d335e",
+  "version": "0.11.0-next.41deba4",
   "description": "Vue SDK for Standard Agents",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@standardagents/client": "0.10.1-dev.d2d335e"
+    "@standardagents/client": "0.11.0-next.41deba4"
   },
   "peerDependencies": {
     "vue": "^3.3.0"
@@ -34,7 +34,7 @@
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^15.11.7",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
+    "typescript": "^5.9.0",
     "vitest": "^2.1.8",
     "vue": "^3.5.13"
   },