@standardagents/vue 0.1.0-dev.ffffff

package/dist/index.d.ts

@@ -0,0 +1,293 @@
+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';
+
+/**
+ * Configuration for the StandardAgents plugin
+ */
+interface StandardAgentsConfig {
+    /** API endpoint URL */
+    endpoint: string;
+}
+/**
+ * Context value provided by the StandardAgents plugin
+ */
+interface StandardAgentsContext {
+    /** The AgentBuilder client instance */
+    client: AgentBuilderClient;
+    /** The API endpoint URL */
+    endpoint: string;
+}
+/**
+ * Options passed to ThreadProvider
+ */
+interface ThreadProviderOptions {
+    /** Whether to preload messages on mount (default: true) */
+    preload?: boolean;
+    /** Whether to connect to live updates (default: true) */
+    live?: boolean;
+    /** Transform messages to workblocks (default: false) */
+    useWorkblocks?: boolean;
+    /** Message depth to fetch (default: 0) */
+    depth?: number;
+    /** Include silent messages (default: false) */
+    includeSilent?: boolean;
+}
+/**
+ * Thread context value provided by ThreadProvider
+ */
+interface ThreadContext {
+    /** The thread ID */
+    threadId: string;
+    /** Options passed to the provider */
+    options: ThreadProviderOptions;
+    /** Current messages in the thread */
+    messages: Ref<_standardagents_client.Message[]>;
+    /** Messages transformed to workblocks (if useWorkblocks is true) */
+    workblocks: ComputedRef<_standardagents_client.ThreadMessage[]>;
+    /** Connection status */
+    status: Ref<_standardagents_client.ConnectionStatus>;
+    /** Connection status (alias for status) */
+    connectionStatus: Ref<_standardagents_client.ConnectionStatus>;
+    /** Whether the thread is currently loading */
+    isLoading: Ref<boolean>;
+    /** Whether the thread is currently loading (alias for isLoading) */
+    loading: Ref<boolean>;
+    /** Any error that occurred */
+    error: Ref<Error | null>;
+    /** Send a message to the thread */
+    sendMessage: (payload: SendMessagePayload) => Promise<Message>;
+    /** Stop the current execution */
+    stopExecution: () => Promise<void>;
+    /** Subscribe to custom events */
+    onEvent: <T = unknown>(eventType: string, callback: (data: T) => void) => () => void;
+    /** Subscribe to custom events (alias for onEvent) */
+    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 */
+    addFiles: (files: File[] | FileList) => void;
+    /** Remove a pending file (cannot remove committed files) */
+    removeFile: (id: string) => void;
+    /** Get the full URL for a file */
+    getFileUrl: (file: ThreadFile) => string;
+    /** Get the thumbnail URL for an image file */
+    getThumbnailUrl: (file: ThreadFile) => string;
+    /** Get preview URL - localPreviewUrl for pending images, thumbnail for committed */
+    getPreviewUrl: (file: ThreadFile) => string | null;
+}
+/**
+ * Options for useThread composable
+ */
+interface UseThreadOptions {
+    /** Whether to preload messages on mount (default: true) */
+    preload?: boolean;
+    /** Whether to connect to live updates (default: true) */
+    live?: boolean;
+    /** Transform messages to workblocks (default: false) */
+    useWorkblocks?: boolean;
+    /** Message depth to fetch (default: 0) */
+    depth?: number;
+    /** Include silent messages (default: false) */
+    includeSilent?: boolean;
+    /** Optional endpoint override */
+    endpoint?: string;
+}
+/**
+ * Injection key for StandardAgents context
+ */
+declare const StandardAgentsKey: InjectionKey<StandardAgentsContext>;
+/**
+ * Injection key for Thread context
+ */
+declare const ThreadKey: InjectionKey<ThreadContext>;
+
+/**
+ * Vue plugin for Standard Agents
+ *
+ * @example
+ * ```typescript
+ * import { createApp } from 'vue'
+ * import { StandardAgentsPlugin } from '@standardagents/vue'
+ *
+ * const app = createApp(App)
+ * app.use(StandardAgentsPlugin, { endpoint: 'https://api.example.com' })
+ * ```
+ */
+declare const StandardAgentsPlugin: Plugin<StandardAgentsConfig>;
+
+/**
+ * Provider component that sets up a thread connection and provides context
+ * to all child components. Use `useThread()` in child components to access
+ * the thread context.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ThreadProvider threadId="thread-123">
+ *     <ChatMessages />
+ *   </ThreadProvider>
+ * </template>
+ *
+ * <script setup>
+ * import { ThreadProvider } from '@standardagents/vue'
+ * </script>
+ * ```
+ */
+declare const ThreadProvider: vue.DefineComponent<vue.ExtractPropTypes<{
+    /**
+     * The thread ID to connect to
+     */
+    threadId: {
+        type: PropType<string>;
+        required: true;
+    };
+    /**
+     * Whether to preload messages on mount (default: true)
+     */
+    preload: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Whether to connect to live updates (default: true)
+     */
+    live: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Transform messages to workblocks (default: false)
+     */
+    useWorkblocks: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Message depth to fetch (default: 0)
+     */
+    depth: {
+        type: PropType<number>;
+        default: undefined;
+    };
+    /**
+     * Include silent messages (default: false)
+     */
+    includeSilent: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Optional endpoint override
+     */
+    endpoint: {
+        type: PropType<string>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /**
+     * The thread ID to connect to
+     */
+    threadId: {
+        type: PropType<string>;
+        required: true;
+    };
+    /**
+     * Whether to preload messages on mount (default: true)
+     */
+    preload: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Whether to connect to live updates (default: true)
+     */
+    live: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Transform messages to workblocks (default: false)
+     */
+    useWorkblocks: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Message depth to fetch (default: 0)
+     */
+    depth: {
+        type: PropType<number>;
+        default: undefined;
+    };
+    /**
+     * Include silent messages (default: false)
+     */
+    includeSilent: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
+    /**
+     * Optional endpoint override
+     */
+    endpoint: {
+        type: PropType<string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    preload: boolean;
+    live: boolean;
+    useWorkblocks: boolean;
+    depth: number;
+    includeSilent: boolean;
+    endpoint: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Access the StandardAgents context
+ *
+ * @throws Error if used outside of StandardAgentsPlugin
+ * @returns The StandardAgents context with client and endpoint
+ *
+ * @example
+ * ```typescript
+ * const { client, endpoint } = useStandardAgents()
+ * ```
+ */
+declare function useStandardAgents(): StandardAgentsContext;
+
+/**
+ * Hook to access the thread context.
+ *
+ * Must be used within a ThreadProvider. Returns the full thread context
+ * including messages, actions, and file management.
+ *
+ * @returns The thread context value
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ThreadProvider threadId="thread-123">
+ *     <ChatMessages />
+ *   </ThreadProvider>
+ * </template>
+ *
+ * <script setup>
+ * // In ChatMessages component:
+ * import { useThread } from '@standardagents/vue'
+ *
+ * const { messages, sendMessage, files } = useThread()
+ *
+ * async function handleSend() {
+ *   await sendMessage({ role: 'user', content: 'Hello!' })
+ * }
+ * </script>
+ * ```
+ */
+declare function useThread(): ThreadContext;
+
+export { type StandardAgentsConfig, type StandardAgentsContext, StandardAgentsKey, StandardAgentsPlugin, type ThreadContext, ThreadKey, ThreadProvider, type UseThreadOptions, useStandardAgents, useThread };

package/dist/index.js

@@ -0,0 +1,314 @@
+import { FileUploadManager, AgentBuilderClient, messagesToFiles, 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';
+
+// src/plugin.ts
+
+// src/types.ts
+var StandardAgentsKey = Symbol("StandardAgents");
+var ThreadKey = Symbol("Thread");
+
+// src/plugin.ts
+var StandardAgentsPlugin = {
+  install(app, options) {
+    if (!options?.endpoint) {
+      throw new Error("StandardAgentsPlugin requires an endpoint option");
+    }
+    const client = new AgentBuilderClient(options.endpoint);
+    const context = {
+      client,
+      endpoint: options.endpoint
+    };
+    app.provide(StandardAgentsKey, context);
+  }
+};
+function useStandardAgents() {
+  const context = inject(StandardAgentsKey);
+  if (!context) {
+    throw new Error(
+      "useStandardAgents must be used within a component where StandardAgentsPlugin is installed"
+    );
+  }
+  return context;
+}
+
+// src/composables/useThreadSetup.ts
+var uploadManager = new FileUploadManager();
+function useThreadSetup(threadId, options = {}) {
+  const {
+    preload = true,
+    live = true,
+    useWorkblocks = false,
+    depth = 0,
+    includeSilent = false,
+    endpoint: endpointOverride
+  } = options;
+  const context = useStandardAgents();
+  const client = endpointOverride ? new AgentBuilderClient(endpointOverride) : context.client;
+  const resolvedOptions = {
+    preload,
+    live,
+    useWorkblocks,
+    depth,
+    includeSilent
+  };
+  const messages = ref([]);
+  const status = ref("disconnected");
+  const isLoading = ref(preload);
+  const error = ref(null);
+  const pendingFiles = ref([]);
+  const committedFiles = computed(() => {
+    return messagesToFiles(messages.value);
+  });
+  const files = computed(() => {
+    return [...pendingFiles.value, ...committedFiles.value];
+  });
+  const eventHandlers = /* @__PURE__ */ new Map();
+  let connectionManager = null;
+  const workblocks = computed(() => {
+    if (!useWorkblocks) {
+      return messages.value;
+    }
+    return transformToWorkblocks(messages.value);
+  });
+  async function loadMessages() {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const loadedMessages = await client.getMessages(threadId, { depth, includeSilent });
+      messages.value = loadedMessages;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  function connect() {
+    if (!live) return;
+    connectionManager = new ThreadConnectionManager(client, threadId, {
+      onStatusChange: (newStatus) => {
+        status.value = newStatus;
+      },
+      onMessage: (event) => {
+        if (event.type === "message_data") {
+          const existingIndex = messages.value.findIndex((m) => m.id === event.data.id);
+          if (existingIndex >= 0) {
+            messages.value[existingIndex] = event.data;
+          } else {
+            messages.value = [...messages.value, event.data];
+          }
+        }
+      },
+      onChunk: (event) => {
+        const existingIndex = messages.value.findIndex((m) => m.id === event.message_id);
+        if (existingIndex >= 0) {
+          const message = messages.value[existingIndex];
+          messages.value[existingIndex] = {
+            ...message,
+            content: (message.content || "") + event.chunk
+          };
+        }
+      },
+      onEvent: (event) => {
+        const handlers = eventHandlers.get(event.eventType);
+        if (handlers) {
+          handlers.forEach((handler) => {
+            try {
+              handler(event.data);
+            } catch (err) {
+              console.error(`Error in event listener for "${event.eventType}":`, err);
+            }
+          });
+        }
+      },
+      onError: (err) => {
+        error.value = err instanceof Error ? err : new Error(String(err));
+      }
+    }, { depth, includeSilent });
+    connectionManager.connect();
+  }
+  async function sendMessage(payload) {
+    try {
+      return await client.sendMessage(threadId, payload);
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      throw err;
+    }
+  }
+  async function stopExecution() {
+    try {
+      await client.stopExecution(threadId);
+    } catch (err) {
+      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,
+        file,
+        pending.id,
+        client,
+        (updates) => {
+          pendingFiles.value = pendingFiles.value.map(
+            (f) => f.id === pending.id ? { ...f, ...updates } : f
+          );
+        }
+      ).catch(() => {
+      });
+    }
+  }
+  function removeFile(id) {
+    pendingFiles.value = pendingFiles.value.filter((f) => f.id !== id);
+  }
+  function getFileUrl(file) {
+    if (!file.path) return "";
+    return client.getFileUrl(threadId, file.path);
+  }
+  function getThumbnailUrl(file) {
+    if (!file.path) return "";
+    return client.getThumbnailUrl(threadId, file.path);
+  }
+  function getPreviewUrl(file) {
+    if (!file.isImage) return null;
+    if (file.localPreviewUrl) {
+      return file.localPreviewUrl;
+    }
+    if (file.path) {
+      return getThumbnailUrl(file);
+    }
+    return null;
+  }
+  function onEvent(eventType, callback) {
+    if (!eventHandlers.has(eventType)) {
+      eventHandlers.set(eventType, /* @__PURE__ */ new Set());
+    }
+    eventHandlers.get(eventType).add(callback);
+    return () => {
+      const handlers = eventHandlers.get(eventType);
+      if (handlers) {
+        handlers.delete(callback);
+        if (handlers.size === 0) {
+          eventHandlers.delete(eventType);
+        }
+      }
+    };
+  }
+  onMounted(() => {
+    if (preload) {
+      loadMessages();
+    }
+    connect();
+  });
+  onUnmounted(() => {
+    connectionManager?.disconnect();
+    eventHandlers.clear();
+  });
+  return {
+    threadId,
+    options: resolvedOptions,
+    messages,
+    workblocks,
+    status,
+    connectionStatus: status,
+    // alias
+    isLoading,
+    loading: isLoading,
+    // alias
+    error,
+    sendMessage,
+    stopExecution,
+    onEvent,
+    subscribeToEvent: onEvent,
+    // alias
+    // File management
+    files,
+    addFiles,
+    removeFile,
+    getFileUrl,
+    getThumbnailUrl,
+    getPreviewUrl
+  };
+}
+
+// src/components/ThreadProvider.ts
+var ThreadProvider = defineComponent({
+  name: "ThreadProvider",
+  props: {
+    /**
+     * The thread ID to connect to
+     */
+    threadId: {
+      type: String,
+      required: true
+    },
+    /**
+     * Whether to preload messages on mount (default: true)
+     */
+    preload: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Whether to connect to live updates (default: true)
+     */
+    live: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Transform messages to workblocks (default: false)
+     */
+    useWorkblocks: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Message depth to fetch (default: 0)
+     */
+    depth: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * Include silent messages (default: false)
+     */
+    includeSilent: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * Optional endpoint override
+     */
+    endpoint: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const options = {};
+    if (props.preload !== void 0) options.preload = props.preload;
+    if (props.live !== void 0) options.live = props.live;
+    if (props.useWorkblocks !== void 0) options.useWorkblocks = props.useWorkblocks;
+    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);
+    provide(ThreadKey, context);
+    return () => slots.default?.();
+  }
+});
+function useThread() {
+  const context = inject(ThreadKey);
+  if (!context) {
+    throw new Error(
+      'useThread must be used within a <ThreadProvider>. Wrap your component with <ThreadProvider threadId="...">.'
+    );
+  }
+  return context;
+}
+
+export { StandardAgentsKey, StandardAgentsPlugin, ThreadKey, ThreadProvider, useStandardAgents, useThread };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@standardagents/vue",
+  "version": "0.1.0-dev.ffffff",
+  "description": "Vue SDK for Standard Agents",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@standardagents/client": "0.1.0-dev.ffffff"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^22.10.2",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^15.11.7",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13"
+  },
+  "keywords": [
+    "vue",
+    "agents",
+    "ai",
+    "standardagents"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}