@standardagents/react 0.8.1

package/dist/index.js

@@ -0,0 +1,575 @@
+import { createContext, useMemo, useEffect, useRef, useState, useCallback, useContext } from 'react';
+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 {
+        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);
+    };
+    ws.onclose = () => {
+      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 {
+        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) {
+  globalEndpoint = endpoint;
+}
+async function sendMessage(id, payload) {
+  if (!globalEndpoint) {
+    throw new Error(
+      "sendMessage requires AgentBuilderProvider to be mounted in your app"
+    );
+  }
+  const token = typeof localStorage !== "undefined" ? localStorage.getItem("agentbuilder_auth_token") : null;
+  const headers = {
+    "Content-Type": "application/json"
+  };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const response = await fetch(`${globalEndpoint}/threads/${id}/message`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(payload)
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to send message: ${response.statusText}`);
+  }
+  return response.json();
+}
+
+// src/services/stopThread.ts
+var globalEndpoint2 = null;
+function __setGlobalEndpointForStop(endpoint) {
+  globalEndpoint2 = endpoint;
+}
+async function stopThread(id, options) {
+  const endpoint = options?.endpoint ?? globalEndpoint2;
+  if (!endpoint) {
+    throw new Error(
+      "stopThread requires AgentBuilderProvider to be mounted or endpoint option to be provided"
+    );
+  }
+  const normalizedEndpoint = endpoint.replace(/\/$/, "");
+  const token = typeof localStorage !== "undefined" ? localStorage.getItem("agentbuilder_auth_token") : null;
+  const headers = {};
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const response = await fetch(`${normalizedEndpoint}/threads/${id}/stop`, {
+    method: "POST",
+    headers
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to stop thread: ${response.statusText}`);
+  }
+  await response.json();
+}
+var AgentBuilderContext = createContext(null);
+function AgentBuilderProvider({ config, children }) {
+  const client = useMemo(() => {
+    return new AgentBuilderClient(config.endpoint);
+  }, [config.endpoint]);
+  const value = useMemo(
+    () => ({
+      client,
+      config
+    }),
+    [client, config]
+  );
+  useEffect(() => {
+    __setGlobalEndpoint(config.endpoint);
+    __setGlobalEndpointForStop(config.endpoint);
+  }, [config.endpoint]);
+  return /* @__PURE__ */ jsx(AgentBuilderContext.Provider, { value, children });
+}
+function useAgentBuilderClient() {
+  const context = useContext(AgentBuilderContext);
+  if (!context) {
+    throw new Error("useAgentBuilderClient must be used within AgentBuilderProvider");
+  }
+  return context.client;
+}
+function useAgentBuilderConfig() {
+  const context = useContext(AgentBuilderContext);
+  if (!context) {
+    throw new Error("useAgentBuilderConfig must be used within AgentBuilderProvider");
+  }
+  return context.config;
+}
+var ThreadContext = createContext(null);
+function ThreadProvider({
+  threadId,
+  options = {},
+  preload = true,
+  live = true,
+  depth = 0,
+  includeSilent = false,
+  endpoint: endpointOverride,
+  children
+}) {
+  const contextClient = useAgentBuilderClient();
+  const contextConfig = useAgentBuilderConfig();
+  endpointOverride || contextConfig.endpoint;
+  const clientRef = useRef(
+    endpointOverride ? new AgentBuilderClient(endpointOverride) : contextClient
+  );
+  useEffect(() => {
+    if (endpointOverride) {
+      clientRef.current = new AgentBuilderClient(endpointOverride);
+    } else {
+      clientRef.current = contextClient;
+    }
+  }, [endpointOverride, contextClient]);
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(preload);
+  const [error, setError] = useState(null);
+  const eventListenersRef = useRef(/* @__PURE__ */ new Map());
+  const wsRef = useRef(null);
+  const subscribeToEvent = useCallback((eventType, listener) => {
+    if (!eventListenersRef.current.has(eventType)) {
+      eventListenersRef.current.set(eventType, /* @__PURE__ */ new Set());
+    }
+    eventListenersRef.current.get(eventType).add(listener);
+    return () => {
+      const listeners = eventListenersRef.current.get(eventType);
+      if (listeners) {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          eventListenersRef.current.delete(eventType);
+        }
+      }
+    };
+  }, []);
+  const dispatchEvent = useCallback((eventType, data) => {
+    const listeners = eventListenersRef.current.get(eventType);
+    if (listeners) {
+      listeners.forEach((listener) => {
+        try {
+          listener(data);
+        } catch (err) {
+          console.error(`Error in event listener for "${eventType}":`, err);
+        }
+      });
+    }
+  }, []);
+  useEffect(() => {
+    if (!preload || !threadId) return;
+    const fetchMessages = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const fetchedMessages = await clientRef.current.getMessages(threadId, {
+          depth,
+          includeSilent
+        });
+        setMessages(fetchedMessages);
+      } catch (err) {
+        console.error("Failed to fetch messages:", err);
+        setError(err instanceof Error ? err : new Error("Failed to fetch messages"));
+        setMessages([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchMessages();
+  }, [threadId, preload, depth, includeSilent]);
+  useEffect(() => {
+    if (!live || !threadId) return;
+    const ws = clientRef.current.connectMessageWebSocket(
+      threadId,
+      {
+        onMessage: (event) => {
+          setMessages((prev) => {
+            const exists = prev.some((m) => m.id === event.data.id);
+            if (exists) {
+              return prev.map((m) => m.id === event.data.id ? event.data : m);
+            } else {
+              return [...prev, event.data];
+            }
+          });
+        },
+        onChunk: (event) => {
+          setMessages((prev) => {
+            return prev.map((m) => {
+              if (m.id === event.message_id) {
+                return {
+                  ...m,
+                  content: (m.content || "") + event.chunk
+                };
+              }
+              return m;
+            });
+          });
+        },
+        onEvent: (event) => {
+          dispatchEvent(event.eventType, event.data);
+        },
+        onError: (event) => {
+          console.error("WebSocket error:", event.error);
+          setError(new Error(event.error));
+        }
+      },
+      {
+        depth,
+        includeSilent
+      }
+    );
+    wsRef.current = ws;
+    return () => {
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [threadId, live, depth, includeSilent, dispatchEvent]);
+  const contextValue = useMemo(
+    () => ({
+      threadId,
+      messages,
+      loading,
+      error,
+      subscribeToEvent,
+      options: {
+        depth,
+        includeSilent,
+        ...options
+      }
+    }),
+    [threadId, messages, loading, error, subscribeToEvent, depth, includeSilent, options]
+  );
+  return /* @__PURE__ */ jsx(ThreadContext.Provider, { value: contextValue, children });
+}
+function useThreadContext() {
+  const context = useContext(ThreadContext);
+  if (!context) {
+    throw new Error("useThreadContext must be used within a ThreadProvider");
+  }
+  return context;
+}
+function useThreadId() {
+  return useThreadContext().threadId;
+}
+
+// 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";
+          }
+        }
+      }
+      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 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 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 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);
+    });
+    return unsubscribe;
+  }, [subscribeToEvent, type]);
+  return eventData;
+}
+function useSendMessage() {
+  let context;
+  try {
+    context = useThreadContext();
+  } catch {
+    throw new Error("useSendMessage must be used within a ThreadProvider");
+  }
+  const { threadId } = context;
+  return useCallback(
+    (payload) => {
+      return sendMessage(threadId, payload);
+    },
+    [threadId]
+  );
+}
+function useStopThread() {
+  let context;
+  try {
+    context = useThreadContext();
+  } catch {
+    throw new Error("useStopThread must be used within a ThreadProvider");
+  }
+  const { threadId } = context;
+  return useCallback(
+    () => {
+      return stopThread(threadId);
+    },
+    [threadId]
+  );
+}
+
+export { AgentBuilderProvider, ThreadProvider, onThreadEvent, sendMessage, stopThread, useSendMessage, useStopThread, useThread, useThreadContext, useThreadEvent, useThreadId };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map