@standardagents/react 0.10.0 → 0.10.1-dev.114898

package/dist/index.js

@@ -1,183 +1,10 @@
 import { createContext, useMemo, useEffect, useRef, useState, useCallback, useContext } from 'react';
+import { FileUploadManager, AgentBuilderClient, messagesToFiles, transformToWorkblocks, ThreadConnectionManager } from '@standardagents/client';
+export { AgentBuilderClient, FileUploadManager, ThreadConnectionManager, generatePendingFileId, isImageMimeType, messagesToFiles, parseAttachments, readFileAsDataUrl, transformToWorkblocks } from '@standardagents/client';
 import { jsx } from 'react/jsx-runtime';
 
 // src/context/AgentBuilderProvider.tsx
 
-// src/services/client.ts
-var AgentBuilderClient = class {
-  endpoint;
-  token;
-  constructor(endpoint) {
-    this.endpoint = endpoint.replace(/\/$/, "");
-    this.token = typeof localStorage !== "undefined" ? localStorage.getItem("agentbuilder_auth_token") : null;
-  }
-  /**
-   * Get thread metadata
-   */
-  async getThread(id) {
-    const response = await fetch(`${this.endpoint}/threads/${id}`, {
-      method: "GET",
-      headers: this.getHeaders()
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to get thread: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  /**
-   * Get messages from a thread with optional pagination and filtering
-   */
-  async getMessages(id, options = {}) {
-    const params = new URLSearchParams();
-    if (options.limit !== void 0) params.set("limit", String(options.limit));
-    if (options.offset !== void 0) params.set("offset", String(options.offset));
-    if (options.depth !== void 0) params.set("depth", String(options.depth));
-    if (options.includeSilent !== void 0) params.set("includeSilent", String(options.includeSilent));
-    const queryString = params.toString();
-    const url = `${this.endpoint}/threads/${id}/messages${queryString ? `?${queryString}` : ""}`;
-    const response = await fetch(url, {
-      method: "GET",
-      headers: this.getHeaders()
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to get messages: ${response.statusText}`);
-    }
-    const data = await response.json();
-    return data.messages || [];
-  }
-  /**
-   * Send a message to a thread
-   */
-  async sendMessage(id, payload) {
-    const response = await fetch(`${this.endpoint}/threads/${id}/message`, {
-      method: "POST",
-      headers: {
-        ...this.getHeaders(),
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(payload)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to send message: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  /**
-   * Stop execution of a thread
-   */
-  async stopExecution(id) {
-    const response = await fetch(`${this.endpoint}/threads/${id}/stop`, {
-      method: "POST",
-      headers: this.getHeaders()
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to stop execution: ${response.statusText}`);
-    }
-    await response.json();
-  }
-  /**
-   * Connect to message WebSocket for real-time message updates
-   */
-  connectMessageWebSocket(id, callbacks = {}, options = {}) {
-    const params = new URLSearchParams();
-    if (this.token) params.set("token", this.token);
-    if (options.includeSilent !== void 0) params.set("includeSilent", String(options.includeSilent));
-    if (options.depth !== void 0) params.set("depth", String(options.depth));
-    const wsProtocol = this.endpoint.startsWith("https") ? "wss" : "ws";
-    const wsEndpoint = this.endpoint.replace(/^https?/, wsProtocol);
-    const url = `${wsEndpoint}/threads/${id}/stream?${params.toString()}`;
-    const ws = new WebSocket(url);
-    ws.onopen = () => {
-      callbacks.onOpen?.();
-    };
-    ws.onmessage = (event) => {
-      try {
-        if (typeof event.data === "string" && event.data === "pong") {
-          return;
-        }
-        const data = JSON.parse(event.data);
-        switch (data.type) {
-          case "message_data":
-            callbacks.onMessage?.(data);
-            break;
-          case "message_chunk":
-            callbacks.onChunk?.(data);
-            break;
-          case "event":
-            callbacks.onEvent?.(data);
-            break;
-          case "error":
-            callbacks.onError?.(data);
-            break;
-        }
-      } catch (error) {
-        console.error("Failed to parse WebSocket message:", error);
-      }
-    };
-    ws.onerror = (event) => {
-      console.error("WebSocket error:", event);
-      callbacks.onError?.({ type: "error", error: "WebSocket connection error" });
-    };
-    ws.onclose = (event) => {
-      console.log(`[AgentBuilderClient] Message WebSocket closed - code: ${event.code}, reason: ${event.reason || "none"}, wasClean: ${event.wasClean}`);
-      callbacks.onClose?.();
-    };
-    return ws;
-  }
-  /**
-   * Connect to log WebSocket for custom events
-   */
-  connectLogWebSocket(id, callbacks = {}) {
-    const params = new URLSearchParams();
-    if (this.token) params.set("token", this.token);
-    const wsProtocol = this.endpoint.startsWith("https") ? "wss" : "ws";
-    const wsEndpoint = this.endpoint.replace(/^https?/, wsProtocol);
-    const url = `${wsEndpoint}/threads/${id}?${params.toString()}`;
-    const ws = new WebSocket(url);
-    ws.onopen = () => {
-      callbacks.onOpen?.();
-    };
-    ws.onmessage = (event) => {
-      try {
-        if (typeof event.data === "string" && event.data === "pong") {
-          return;
-        }
-        const data = JSON.parse(event.data);
-        switch (data.type) {
-          case "log_data":
-            callbacks.onLog?.(data);
-            break;
-          case "custom":
-            callbacks.onCustom?.(data);
-            break;
-          case "stopped_by_user":
-            callbacks.onStopped?.(data);
-            break;
-        }
-      } catch (error) {
-        console.error("Failed to parse WebSocket message:", error);
-      }
-    };
-    ws.onerror = (event) => {
-      console.error("WebSocket error:", event);
-    };
-    ws.onclose = () => {
-      callbacks.onClose?.();
-    };
-    return ws;
-  }
-  /**
-   * Get headers for HTTP requests
-   */
-  getHeaders() {
-    const headers = {};
-    if (this.token) {
-      headers["Authorization"] = `Bearer ${this.token}`;
-    }
-    return headers;
-  }
-};
-
 // src/services/sendMessage.ts
 var globalEndpoint = null;
 function __setGlobalEndpoint(endpoint) {
@@ -196,7 +23,7 @@ async function sendMessage(id, payload) {
   if (token) {
     headers["Authorization"] = `Bearer ${token}`;
   }
-  const response = await fetch(`${globalEndpoint}/threads/${id}/message`, {
+  const response = await fetch(`${globalEndpoint}/threads/${id}/messages`, {
     method: "POST",
     headers,
     body: JSON.stringify(payload)
@@ -266,12 +93,18 @@ function useAgentBuilderConfig() {
   }
   return context.config;
 }
-var ThreadContext = createContext(null);
+var uploadManager = new FileUploadManager();
+var StaticContext = createContext(null);
+var MessagesContext = createContext(null);
+var FilesContext = createContext(null);
+var ConnectionContext = createContext(null);
+createContext(null);
 function ThreadProvider({
   threadId,
   options = {},
   preload = true,
   live = true,
+  useWorkblocks = false,
   depth = 0,
   includeSilent = false,
   endpoint: endpointOverride,
@@ -296,13 +129,21 @@ function ThreadProvider({
   const [connectionStatus, setConnectionStatus] = useState(
     live ? "connecting" : "disconnected"
   );
+  const [pendingFiles, setPendingFiles] = useState([]);
+  const committedFiles = useMemo(() => {
+    return messagesToFiles(messages);
+  }, [messages]);
+  const files = useMemo(() => {
+    return [...pendingFiles, ...committedFiles];
+  }, [pendingFiles, committedFiles]);
+  const workblocks = useMemo(() => {
+    if (!useWorkblocks) {
+      return messages;
+    }
+    return transformToWorkblocks(messages);
+  }, [messages, useWorkblocks]);
   const eventListenersRef = useRef(/* @__PURE__ */ new Map());
-  const wsRef = useRef(null);
-  const reconnectAttempts = useRef(0);
-  const reconnectTimeoutRef = useRef(null);
-  const heartbeatIntervalRef = useRef(null);
-  const isReconnectingRef = useRef(false);
-  const isMountedRef = useRef(true);
+  const connectionManagerRef = useRef(null);
   const subscribeToEvent = useCallback(
     (eventType, listener) => {
       if (!eventListenersRef.current.has(eventType)) {
@@ -333,60 +174,84 @@ function ThreadProvider({
       });
     }
   }, []);
-  const clearTimers = useCallback(() => {
-    if (reconnectTimeoutRef.current) {
-      clearTimeout(reconnectTimeoutRef.current);
-      reconnectTimeoutRef.current = null;
-    }
-    if (heartbeatIntervalRef.current) {
-      clearInterval(heartbeatIntervalRef.current);
-      heartbeatIntervalRef.current = null;
-    }
-  }, []);
-  const startHeartbeat = useCallback((ws) => {
-    if (heartbeatIntervalRef.current) {
-      clearInterval(heartbeatIntervalRef.current);
-    }
-    heartbeatIntervalRef.current = setInterval(() => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.send("ping");
+  const addFiles = useCallback(
+    (filesToAdd) => {
+      const items = uploadManager.queueFiles(filesToAdd);
+      setPendingFiles((prev) => [...prev, ...items.map((i) => i.pending)]);
+      for (const { pending, file } of items) {
+        uploadManager.executeUpload(
+          threadId,
+          file,
+          pending.id,
+          clientRef.current,
+          (updates) => {
+            setPendingFiles(
+              (prev) => prev.map(
+                (f) => f.id === pending.id ? { ...f, ...updates } : f
+              )
+            );
+          }
+        ).catch(() => {
+        });
       }
-    }, 3e4);
+    },
+    [threadId]
+  );
+  const removeFile = useCallback((id) => {
+    setPendingFiles((prev) => prev.filter((f) => f.id !== id));
   }, []);
+  const getFileUrl = useCallback(
+    (file) => {
+      if (!file.path) return "";
+      return clientRef.current.getFileUrl(threadId, file.path);
+    },
+    [threadId]
+  );
+  const getThumbnailUrl = useCallback(
+    (file) => {
+      if (!file.path) return "";
+      return clientRef.current.getThumbnailUrl(threadId, file.path);
+    },
+    [threadId]
+  );
+  const getPreviewUrl = useCallback(
+    (file) => {
+      if (!file.isImage) return null;
+      if (file.localPreviewUrl) return file.localPreviewUrl;
+      if (file.path) return clientRef.current.getThumbnailUrl(threadId, file.path);
+      return null;
+    },
+    [threadId]
+  );
+  const sendMessage2 = useCallback(
+    async (payload) => {
+      try {
+        return await clientRef.current.sendMessage(threadId, payload);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        throw err;
+      }
+    },
+    [threadId]
+  );
+  const stopExecution = useCallback(async () => {
+    try {
+      await clientRef.current.stopExecution(threadId);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      throw err;
+    }
+  }, [threadId]);
   useEffect(() => {
     if (!live || !threadId) return;
-    console.log(
-      `[ThreadProvider] useEffect running - threadId: ${threadId}, live: ${live}`
-    );
-    connectWebSocket();
-    return () => {
-      console.log(
-        `[ThreadProvider] useEffect cleanup - threadId: ${threadId}, live: ${live}`
-      );
-      clearTimers();
-      if (wsRef.current) {
-        wsRef.current.close();
-        wsRef.current = null;
-      }
-      reconnectAttempts.current = 0;
-      isReconnectingRef.current = false;
-    };
-  }, [threadId, live]);
-  const connectWebSocket = useCallback(() => {
-    if (!live || !threadId || !isMountedRef.current) return;
     console.log(`[ThreadProvider] Connecting WebSocket for thread ${threadId}`);
-    setConnectionStatus("connecting");
-    const ws = clientRef.current.connectMessageWebSocket(
+    const manager = new ThreadConnectionManager(
+      clientRef.current,
       threadId,
       {
-        onOpen: () => {
-          console.log(
-            `[ThreadProvider] WebSocket connected for thread ${threadId}`
-          );
-          setConnectionStatus("connected");
-          reconnectAttempts.current = 0;
-          isReconnectingRef.current = false;
-          startHeartbeat(ws);
+        onStatusChange: (status) => {
+          console.log(`[ThreadProvider] Connection status: ${status}`);
+          setConnectionStatus(status);
         },
         onMessage: (event) => {
           setMessages((prev) => {
@@ -417,30 +282,6 @@ function ThreadProvider({
         onError: (event) => {
           console.error("[ThreadProvider] WebSocket error:", event.error);
           setError(new Error(event.error));
-          setConnectionStatus("disconnected");
-        },
-        onClose: () => {
-          console.log("[ThreadProvider] WebSocket closed");
-          clearTimers();
-          if (isMountedRef.current && !isReconnectingRef.current) {
-            isReconnectingRef.current = true;
-            setConnectionStatus("connecting");
-            const delay = Math.min(
-              1e3 * Math.pow(2, reconnectAttempts.current),
-              3e4
-            );
-            reconnectAttempts.current++;
-            console.log(
-              `[ThreadProvider] Reconnecting in ${delay}ms (attempt ${reconnectAttempts.current})`
-            );
-            reconnectTimeoutRef.current = setTimeout(() => {
-              if (isMountedRef.current) {
-                connectWebSocket();
-              }
-            }, delay);
-          } else {
-            setConnectionStatus("disconnected");
-          }
         }
       },
       {
@@ -448,16 +289,13 @@ function ThreadProvider({
         includeSilent
       }
     );
-    wsRef.current = ws;
-  }, [
-    threadId,
-    live,
-    depth,
-    includeSilent,
-    dispatchEvent,
-    startHeartbeat,
-    clearTimers
-  ]);
+    connectionManagerRef.current = manager;
+    manager.connect();
+    return () => {
+      manager.disconnect();
+      connectionManagerRef.current = null;
+    };
+  }, [threadId, live, depth, includeSilent, dispatchEvent]);
   useEffect(() => {
     if (!preload || !threadId) return;
     const fetchMessages = async () => {
@@ -481,172 +319,158 @@ function ThreadProvider({
     };
     fetchMessages();
   }, [threadId, preload, depth, includeSilent]);
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-    };
-  }, []);
-  const contextValue = useMemo(
+  const staticValue = useMemo(
     () => ({
       threadId,
-      messages,
-      loading,
-      error,
-      connectionStatus,
+      options: { preload, live, useWorkblocks, depth, includeSilent },
+      sendMessage: sendMessage2,
+      stopExecution,
       subscribeToEvent,
-      options: {
-        depth,
-        includeSilent,
-        ...options
-      }
+      addFiles,
+      removeFile,
+      getFileUrl,
+      getThumbnailUrl,
+      getPreviewUrl
     }),
     [
       threadId,
-      messages,
-      loading,
-      error,
-      connectionStatus,
-      subscribeToEvent,
+      preload,
+      live,
+      useWorkblocks,
       depth,
       includeSilent,
-      options
+      sendMessage2,
+      stopExecution,
+      subscribeToEvent,
+      addFiles,
+      removeFile,
+      getFileUrl,
+      getThumbnailUrl,
+      getPreviewUrl
     ]
   );
-  return /* @__PURE__ */ jsx(ThreadContext.Provider, { value: contextValue, children });
+  const messagesValue = useMemo(
+    () => ({
+      messages,
+      workblocks,
+      loading
+    }),
+    [messages, workblocks, loading]
+  );
+  const filesValue = useMemo(
+    () => ({
+      files
+    }),
+    [files]
+  );
+  const connectionValue = useMemo(
+    () => ({
+      connectionStatus,
+      error
+    }),
+    [connectionStatus, error]
+  );
+  return /* @__PURE__ */ jsx(StaticContext.Provider, { value: staticValue, children: /* @__PURE__ */ jsx(MessagesContext.Provider, { value: messagesValue, children: /* @__PURE__ */ jsx(FilesContext.Provider, { value: filesValue, children: /* @__PURE__ */ jsx(ConnectionContext.Provider, { value: connectionValue, children }) }) }) });
 }
-function useThreadContext() {
-  const context = useContext(ThreadContext);
+function useStaticContext() {
+  const context = useContext(StaticContext);
   if (!context) {
-    throw new Error("useThreadContext must be used within a ThreadProvider");
+    throw new Error("useThread must be used within a ThreadProvider");
   }
   return context;
 }
-function useThreadId() {
-  return useThreadContext().threadId;
+function useMessagesContext() {
+  const context = useContext(MessagesContext);
+  if (!context) {
+    throw new Error("useThread must be used within a ThreadProvider");
+  }
+  return context;
 }
-
-// src/utils/workblocks.ts
-function transformToWorkblocks(messages) {
-  if (messages.length === 0) {
-    return [];
+function useFilesContext() {
+  const context = useContext(FilesContext);
+  if (!context) {
+    throw new Error("useThread must be used within a ThreadProvider");
   }
-  const result = [];
-  let i = 0;
-  while (i < messages.length) {
-    const message = messages[i];
-    if (message.role === "assistant" && message.tool_calls) {
-      let toolCalls;
-      try {
-        toolCalls = JSON.parse(message.tool_calls);
-      } catch (error) {
-        result.push(message);
-        i++;
-        continue;
-      }
-      const workItems = [];
-      for (const toolCall of toolCalls) {
-        workItems.push({
-          id: toolCall.id || message.id,
-          type: "tool_call",
-          name: toolCall.function?.name,
-          content: toolCall.function?.arguments || null,
-          status: null,
-          // Will be updated below based on matching results
-          tool_call_id: toolCall.id
-        });
-      }
-      let j = i + 1;
-      while (j < messages.length && messages[j].role === "tool") {
-        const toolMessage = messages[j];
-        const resultStatus = toolMessage.tool_status || "pending";
-        workItems.push({
-          id: toolMessage.id,
-          type: "tool_result",
-          name: toolMessage.name || void 0,
-          content: toolMessage.content,
-          status: resultStatus,
-          tool_call_id: toolMessage.tool_call_id || void 0
-        });
-        j++;
-      }
-      for (const item of workItems) {
-        if (item.type === "tool_call" && item.tool_call_id) {
-          const matchingResult = workItems.find(
-            (wi) => wi.type === "tool_result" && wi.tool_call_id === item.tool_call_id
-          );
-          if (matchingResult) {
-            item.status = matchingResult.status;
-          } else {
-            item.status = "pending";
-          }
-        }
-      }
-      let status = "completed";
-      if (message.status === "pending") {
-        status = "pending";
-      } else if (message.status === "failed") {
-        status = "failed";
-      }
-      const workblock = {
-        id: message.id,
-        type: "workblock",
-        content: message.content,
-        reasoning_content: message.reasoning_content,
-        workItems,
-        status,
-        created_at: message.created_at,
-        depth: message.depth
-      };
-      result.push(workblock);
-      i = j;
-    } else {
-      result.push(message);
-      i++;
-    }
+  return context;
+}
+function useConnectionContext() {
+  const context = useContext(ConnectionContext);
+  if (!context) {
+    throw new Error("useThread must be used within a ThreadProvider");
   }
-  return result;
+  return context;
+}
+function useThreadContextInternal() {
+  const static_ = useStaticContext();
+  const messages_ = useMessagesContext();
+  const files_ = useFilesContext();
+  const connection_ = useConnectionContext();
+  return {
+    threadId: static_.threadId,
+    options: static_.options,
+    sendMessage: static_.sendMessage,
+    stopExecution: static_.stopExecution,
+    subscribeToEvent: static_.subscribeToEvent,
+    onEvent: static_.subscribeToEvent,
+    addFiles: static_.addFiles,
+    removeFile: static_.removeFile,
+    getFileUrl: static_.getFileUrl,
+    getThumbnailUrl: static_.getThumbnailUrl,
+    getPreviewUrl: static_.getPreviewUrl,
+    messages: messages_.messages,
+    workblocks: messages_.workblocks,
+    loading: messages_.loading,
+    isLoading: messages_.loading,
+    files: files_.files,
+    connectionStatus: connection_.connectionStatus,
+    status: connection_.connectionStatus,
+    error: connection_.error
+  };
+}
+var hasWarnedAboutUseThreadContext = false;
+function useThreadContext() {
+  if (!hasWarnedAboutUseThreadContext && process.env.NODE_ENV !== "production") {
+    hasWarnedAboutUseThreadContext = true;
+    console.warn(
+      "[DEPRECATED] useThreadContext() is deprecated.\nUse: const { messages, sendMessage, ... } = useThread()"
+    );
+  }
+  return useThreadContextInternal();
+}
+function useThreadId() {
+  return useStaticContext().threadId;
 }
 
 // src/hooks/useThread.ts
-function useThread(options = {}) {
-  const {
-    useWorkblocks = true
-  } = options;
-  const context = useContext(ThreadContext);
-  if (!context) {
-    throw new Error(
-      'useThread must be used within a ThreadProvider. Wrap your component with <ThreadProvider threadId="...">.'
-    );
+var hasWarnedAboutArrayUsage = false;
+function useThread() {
+  const context = useThreadContextInternal();
+  if (process.env.NODE_ENV !== "production") {
+    const arrayMethods = ["map", "filter", "forEach", "find", "some", "every", "reduce", "length", "push", "pop", "slice", "splice"];
+    return new Proxy(context, {
+      get(target, prop) {
+        if (arrayMethods.includes(prop) && !hasWarnedAboutArrayUsage) {
+          hasWarnedAboutArrayUsage = true;
+          console.warn(
+            "[BREAKING CHANGE] useThread() now returns an object, not an array.\nChange: const messages = useThread()\nTo:     const { messages } = useThread()\n\nThe returned object includes: messages, sendMessage, stopExecution, files, and more."
+          );
+        }
+        return target[prop];
+      }
+    });
   }
-  const { messages } = context;
-  const transformedMessages = useMemo(() => {
-    return useWorkblocks ? transformToWorkblocks(messages) : messages;
-  }, [messages, useWorkblocks]);
-  return transformedMessages;
+  return context;
 }
 function onThreadEvent(type, callback) {
-  const context = useContext(ThreadContext);
-  if (!context) {
-    throw new Error(
-      'onThreadEvent must be used within a ThreadProvider. Wrap your component with <ThreadProvider threadId="...">.'
-    );
-  }
-  const { subscribeToEvent } = context;
+  const { subscribeToEvent } = useThreadContextInternal();
   useEffect(() => {
     const unsubscribe = subscribeToEvent(type, callback);
     return unsubscribe;
   }, [subscribeToEvent, type, callback]);
 }
 function useThreadEvent(type) {
-  const context = useContext(ThreadContext);
+  const { subscribeToEvent } = useThreadContextInternal();
   const [eventData, setEventData] = useState(null);
-  if (!context) {
-    throw new Error(
-      'useThreadEvent must be used within a ThreadProvider. Wrap your component with <ThreadProvider threadId="...">.'
-    );
-  }
-  const { subscribeToEvent } = context;
   useEffect(() => {
     const unsubscribe = subscribeToEvent(type, (data) => {
       setEventData(data);
@@ -655,7 +479,14 @@ function useThreadEvent(type) {
   }, [subscribeToEvent, type]);
   return eventData;
 }
+var hasWarned = false;
 function useSendMessage() {
+  if (!hasWarned && process.env.NODE_ENV !== "production") {
+    hasWarned = true;
+    console.warn(
+      '[DEPRECATED] useSendMessage() is deprecated.\nUse: const { sendMessage } = useThread()\nThen: await sendMessage({ role: "user", content: "Hello!" })'
+    );
+  }
   let context;
   try {
     context = useThreadContext();
@@ -670,7 +501,14 @@ function useSendMessage() {
     [threadId]
   );
 }
+var hasWarned2 = false;
 function useStopThread() {
+  if (!hasWarned2 && process.env.NODE_ENV !== "production") {
+    hasWarned2 = true;
+    console.warn(
+      "[DEPRECATED] useStopThread() is deprecated.\nUse: const { stopExecution } = useThread()"
+    );
+  }
   let context;
   try {
     context = useThreadContext();