@standardagents/react 0.10.1-dev.b8746e9 → 0.10.1-next.bbd142a

package/dist/index.js

@@ -1,10 +1,183 @@
 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) {
@@ -23,7 +196,7 @@ async function sendMessage(id, payload) {
   if (token) {
     headers["Authorization"] = `Bearer ${token}`;
   }
-  const response = await fetch(`${globalEndpoint}/threads/${id}/messages`, {
+  const response = await fetch(`${globalEndpoint}/threads/${id}/message`, {
     method: "POST",
     headers,
     body: JSON.stringify(payload)
@@ -93,18 +266,12 @@ function useAgentBuilderConfig() {
   }
   return context.config;
 }
-var uploadManager = new FileUploadManager();
-var StaticContext = createContext(null);
-var MessagesContext = createContext(null);
-var FilesContext = createContext(null);
-var ConnectionContext = createContext(null);
-createContext(null);
+var ThreadContext = createContext(null);
 function ThreadProvider({
   threadId,
   options = {},
   preload = true,
   live = true,
-  useWorkblocks = false,
   depth = 0,
   includeSilent = false,
   endpoint: endpointOverride,
@@ -129,21 +296,13 @@ 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 connectionManagerRef = useRef(null);
+  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 subscribeToEvent = useCallback(
     (eventType, listener) => {
       if (!eventListenersRef.current.has(eventType)) {
@@ -174,84 +333,60 @@ function ThreadProvider({
       });
     }
   }, []);
-  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(() => {
-        });
-      }
-    },
-    [threadId]
-  );
-  const removeFile = useCallback((id) => {
-    setPendingFiles((prev) => prev.filter((f) => f.id !== id));
+  const clearTimers = useCallback(() => {
+    if (reconnectTimeoutRef.current) {
+      clearTimeout(reconnectTimeoutRef.current);
+      reconnectTimeoutRef.current = null;
+    }
+    if (heartbeatIntervalRef.current) {
+      clearInterval(heartbeatIntervalRef.current);
+      heartbeatIntervalRef.current = null;
+    }
   }, []);
-  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;
+  const startHeartbeat = useCallback((ws) => {
+    if (heartbeatIntervalRef.current) {
+      clearInterval(heartbeatIntervalRef.current);
     }
-  }, [threadId]);
+    heartbeatIntervalRef.current = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send("ping");
+      }
+    }, 3e4);
+  }, []);
   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}`);
-    const manager = new ThreadConnectionManager(
-      clientRef.current,
+    setConnectionStatus("connecting");
+    const ws = clientRef.current.connectMessageWebSocket(
       threadId,
       {
-        onStatusChange: (status) => {
-          console.log(`[ThreadProvider] Connection status: ${status}`);
-          setConnectionStatus(status);
+        onOpen: () => {
+          console.log(
+            `[ThreadProvider] WebSocket connected for thread ${threadId}`
+          );
+          setConnectionStatus("connected");
+          reconnectAttempts.current = 0;
+          isReconnectingRef.current = false;
+          startHeartbeat(ws);
         },
         onMessage: (event) => {
           setMessages((prev) => {
@@ -282,6 +417,30 @@ 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");
+          }
         }
       },
       {
@@ -289,13 +448,16 @@ function ThreadProvider({
         includeSilent
       }
     );
-    connectionManagerRef.current = manager;
-    manager.connect();
-    return () => {
-      manager.disconnect();
-      connectionManagerRef.current = null;
-    };
-  }, [threadId, live, depth, includeSilent, dispatchEvent]);
+    wsRef.current = ws;
+  }, [
+    threadId,
+    live,
+    depth,
+    includeSilent,
+    dispatchEvent,
+    startHeartbeat,
+    clearTimers
+  ]);
   useEffect(() => {
     if (!preload || !threadId) return;
     const fetchMessages = async () => {
@@ -319,158 +481,172 @@ function ThreadProvider({
     };
     fetchMessages();
   }, [threadId, preload, depth, includeSilent]);
-  const staticValue = useMemo(
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const contextValue = useMemo(
     () => ({
       threadId,
-      options: { preload, live, useWorkblocks, depth, includeSilent },
-      sendMessage: sendMessage2,
-      stopExecution,
+      messages,
+      loading,
+      error,
+      connectionStatus,
       subscribeToEvent,
-      addFiles,
-      removeFile,
-      getFileUrl,
-      getThumbnailUrl,
-      getPreviewUrl
+      options: {
+        depth,
+        includeSilent,
+        ...options
+      }
     }),
     [
       threadId,
-      preload,
-      live,
-      useWorkblocks,
+      messages,
+      loading,
+      error,
+      connectionStatus,
+      subscribeToEvent,
       depth,
       includeSilent,
-      sendMessage2,
-      stopExecution,
-      subscribeToEvent,
-      addFiles,
-      removeFile,
-      getFileUrl,
-      getThumbnailUrl,
-      getPreviewUrl
+      options
     ]
   );
-  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 useStaticContext() {
-  const context = useContext(StaticContext);
-  if (!context) {
-    throw new Error("useThread must be used within a ThreadProvider");
-  }
-  return context;
+  return /* @__PURE__ */ jsx(ThreadContext.Provider, { value: contextValue, children });
 }
-function useMessagesContext() {
-  const context = useContext(MessagesContext);
-  if (!context) {
-    throw new Error("useThread must be used within a ThreadProvider");
-  }
-  return context;
-}
-function useFilesContext() {
-  const context = useContext(FilesContext);
-  if (!context) {
-    throw new Error("useThread must be used within a ThreadProvider");
-  }
-  return context;
-}
-function useConnectionContext() {
-  const context = useContext(ConnectionContext);
+function useThreadContext() {
+  const context = useContext(ThreadContext);
   if (!context) {
-    throw new Error("useThread must be used within a ThreadProvider");
+    throw new Error("useThreadContext must be used within a ThreadProvider");
   }
   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;
+  return useThreadContext().threadId;
 }
 
-// src/hooks/useThread.ts
-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."
+// src/utils/workblocks.ts
+function transformToWorkblocks(messages) {
+  if (messages.length === 0) {
+    return [];
+  }
+  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";
+          }
         }
-        return target[prop];
       }
-    });
+      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;
+  return result;
+}
+
+// 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="...">.'
+    );
+  }
+  const { messages } = context;
+  const transformedMessages = useMemo(() => {
+    return useWorkblocks ? transformToWorkblocks(messages) : messages;
+  }, [messages, useWorkblocks]);
+  return transformedMessages;
 }
 function onThreadEvent(type, callback) {
-  const { subscribeToEvent } = useThreadContextInternal();
+  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;
   useEffect(() => {
     const unsubscribe = subscribeToEvent(type, callback);
     return unsubscribe;
   }, [subscribeToEvent, type, callback]);
 }
 function useThreadEvent(type) {
-  const { subscribeToEvent } = useThreadContextInternal();
+  const context = useContext(ThreadContext);
   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);
@@ -479,14 +655,7 @@ 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();
@@ -501,14 +670,7 @@ 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();