@steventsao/agent-session 0.1.22 → 0.1.24

package/dist/react.js

@@ -1,26 +1,482 @@
-/**
- * React bindings for agent-session
- *
- * @example
- * ```tsx
- * import { useAgentSession } from 'agent-session/react';
- *
- * function Chat() {
- *   const { messages, sendMessage, isConnected } = useAgentSession({
- *     url: 'wss://your-agent-session.workers.dev',
- *     sessionId: 'doc-123',
- *   });
- *
- *   return (
- *     <div>
- *       {messages.map(m => <p key={m.id}>{m.content}</p>)}
- *       <button onClick={() => sendMessage('Hello!')}>Send</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export { useAgentSession } from './use-agent-session';
-// Re-export core types for convenience
-export * from '@steventsao/agent-session-core';
-//# sourceMappingURL=react.js.map
+// src/use-agent-session.ts
+import { useEffect, useState, useCallback, useRef } from "react";
+
+// src/client.ts
+var AgentSessionClient = class {
+  ws = null;
+  baseUrl;
+  sessionId;
+  userId;
+  pingIntervalId = null;
+  reconnectTimeout = null;
+  reconnectAttempts = 0;
+  socketId = 0;
+  maxReconnectAttempts;
+  autoReconnect;
+  pingInterval;
+  // Event resumption (Manus pattern)
+  lastEventId = null;
+  onEventIdChange = null;
+  // Event handlers
+  handlers = /* @__PURE__ */ new Map();
+  globalHandlers = /* @__PURE__ */ new Set();
+  constructor(options) {
+    this.baseUrl = options.url.replace(/\/$/, "");
+    this.sessionId = options.sessionId;
+    this.userId = options.userId || null;
+    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 5;
+    this.autoReconnect = options.autoReconnect ?? true;
+    this.pingInterval = options.pingInterval ?? 3e4;
+    this.lastEventId = options.lastEventId || null;
+    this.onEventIdChange = options.onEventIdChange || null;
+    if (options.autoConnect) {
+      this.connect();
+    }
+  }
+  // ==========================================================================
+  // Connection Management
+  // ==========================================================================
+  connect() {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return;
+    }
+    this.reconnectAttempts = 0;
+    const thisSocketId = ++this.socketId;
+    const params = new URLSearchParams();
+    if (this.userId) params.set("userId", this.userId);
+    const url = `${this.baseUrl}/session/${this.sessionId}/ws?${params}`;
+    console.log("[AgentSession] Connecting to:", url);
+    this.ws = new WebSocket(url);
+    this.ws.onopen = () => {
+      if (thisSocketId !== this.socketId) return;
+      console.log("[AgentSession] Connected");
+      this.reconnectAttempts = 0;
+      this.startPing();
+      this.send({
+        type: "JOIN_SESSION",
+        lastEventId: this.lastEventId || void 0
+      });
+    };
+    this.ws.onmessage = (event) => {
+      if (thisSocketId !== this.socketId) return;
+      try {
+        const data = JSON.parse(event.data);
+        this.handleMessage(data);
+      } catch (err) {
+        console.error("[AgentSession] Parse error:", err);
+      }
+    };
+    this.ws.onclose = (event) => {
+      if (thisSocketId !== this.socketId) return;
+      console.log("[AgentSession] Disconnected:", event.code);
+      this.stopPing();
+      this.emit({ type: "SYSTEM", msg: "Disconnected" });
+      if (this.autoReconnect) {
+        this.maybeReconnect();
+      }
+    };
+    this.ws.onerror = (event) => {
+      if (thisSocketId !== this.socketId) return;
+      console.error("[AgentSession] Error:", event);
+    };
+  }
+  disconnect() {
+    this.stopPing();
+    this.clearReconnect();
+    this.socketId++;
+    this.ws?.close();
+    this.ws = null;
+  }
+  get isConnected() {
+    return this.ws?.readyState === WebSocket.OPEN;
+  }
+  /** Get current event cursor for persistence */
+  getLastEventId() {
+    return this.lastEventId;
+  }
+  /** Set event cursor (load from storage before connect) */
+  setLastEventId(eventId) {
+    this.lastEventId = eventId;
+  }
+  /** Clear event cursor (for new chat/reset) */
+  clearEventId() {
+    this.lastEventId = null;
+  }
+  // ==========================================================================
+  // Event Handling
+  // ==========================================================================
+  on(eventType, handler) {
+    if (!this.handlers.has(eventType)) {
+      this.handlers.set(eventType, /* @__PURE__ */ new Set());
+    }
+    this.handlers.get(eventType).add(handler);
+    return () => this.handlers.get(eventType)?.delete(handler);
+  }
+  onAny(handler) {
+    this.globalHandlers.add(handler);
+    return () => this.globalHandlers.delete(handler);
+  }
+  off(eventType) {
+    this.handlers.delete(eventType);
+  }
+  offAll() {
+    this.handlers.clear();
+    this.globalHandlers.clear();
+  }
+  handleMessage(event) {
+    if (event.type === "EVENTS_BATCH") {
+      const batchEvent = event;
+      console.log(`[AgentSession] Replaying ${batchEvent.count} events from batch`);
+      for (const batchedEvent of batchEvent.events) {
+        this.handleMessage(batchedEvent);
+      }
+      if (batchEvent.lastEventId) {
+        this.updateEventId(batchEvent.lastEventId);
+      }
+      return;
+    }
+    const eventWithMeta = event;
+    if (eventWithMeta.eventId) {
+      this.updateEventId(eventWithMeta.eventId);
+    }
+    const handlers = this.handlers.get(event.type);
+    if (handlers) {
+      for (const handler of handlers) {
+        try {
+          handler(event);
+        } catch (err) {
+          console.error("[AgentSession] Handler error:", err);
+        }
+      }
+    }
+    for (const handler of this.globalHandlers) {
+      try {
+        handler(event);
+      } catch (err) {
+        console.error("[AgentSession] Global handler error:", err);
+      }
+    }
+  }
+  updateEventId(eventId) {
+    this.lastEventId = eventId;
+    this.onEventIdChange?.(eventId);
+  }
+  emit(event) {
+    this.handleMessage(event);
+  }
+  // ==========================================================================
+  // Client Commands
+  // ==========================================================================
+  send(message) {
+    if (this.ws?.readyState !== WebSocket.OPEN) {
+      console.warn("[AgentSession] Not connected");
+      return;
+    }
+    this.ws.send(JSON.stringify(message));
+  }
+  init(metadata) {
+    this.send({ type: "INIT", metadata });
+  }
+  startSandbox(template) {
+    this.send({ type: "START_SANDBOX", template });
+  }
+  stopSandbox() {
+    this.send({ type: "STOP_SANDBOX" });
+  }
+  exec(cmd, cwd) {
+    this.send({ type: "EXEC", cmd, cwd });
+  }
+  sendAgentMessage(content, model, options) {
+    this.send({
+      type: "AGENT_MESSAGE",
+      clientMessageId: options?.clientMessageId,
+      content,
+      model,
+      config: options?.config,
+      systemPrompt: options?.systemPrompt,
+      agentType: options?.agentType,
+      author: options?.author
+    });
+  }
+  stopAgent() {
+    this.send({ type: "AGENT_STOP" });
+  }
+  resetAgent() {
+    this.send({ type: "AGENT_RESET" });
+  }
+  // ==========================================================================
+  // Private Helpers
+  // ==========================================================================
+  startPing() {
+    this.stopPing();
+    this.pingIntervalId = setInterval(() => {
+      this.send({ type: "PING" });
+    }, this.pingInterval);
+  }
+  stopPing() {
+    if (this.pingIntervalId) {
+      clearInterval(this.pingIntervalId);
+      this.pingIntervalId = null;
+    }
+  }
+  clearReconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+  }
+  maybeReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.error("[AgentSession] Max reconnect attempts");
+      this.emit({ type: "ERROR", msg: "Max reconnect attempts reached" });
+      return;
+    }
+    this.reconnectAttempts++;
+    const delay = Math.min(1e3 * Math.pow(2, this.reconnectAttempts), 3e4);
+    console.log(`[AgentSession] Reconnecting in ${delay}ms`);
+    this.reconnectTimeout = setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+};
+
+// src/use-agent-session.ts
+import {
+  DEFAULT_SESSION_REFRESH_CONFIG,
+  shouldResetOnSessionChange
+} from "@steventsao/agent-session-core";
+function useAgentSession(options) {
+  const {
+    url,
+    sessionId,
+    userId,
+    autoConnect = true,
+    refreshConfig = DEFAULT_SESSION_REFRESH_CONFIG,
+    onLifecycle,
+    onAgentMessage,
+    onError
+  } = options;
+  const clientRef = useRef(null);
+  const unsubscribersRef = useRef([]);
+  const prevSessionIdRef = useRef(null);
+  const onLifecycleRef = useRef(onLifecycle);
+  const onAgentMessageRef = useRef(onAgentMessage);
+  const onErrorRef = useRef(onError);
+  onLifecycleRef.current = onLifecycle;
+  onAgentMessageRef.current = onAgentMessage;
+  onErrorRef.current = onError;
+  const [isConnected, setIsConnected] = useState(false);
+  const [clientId, setClientId] = useState(null);
+  const [connectedSessionId, setConnectedSessionId] = useState(null);
+  const [sandboxStatus, setSandboxStatus] = useState("idle");
+  const [sandboxId, setSandboxId] = useState(null);
+  const [sandboxUrl, setSandboxUrl] = useState(null);
+  const [lifecycle, setLifecycle] = useState("idle");
+  const [lifecycleMessage, setLifecycleMessage] = useState(null);
+  const [agentStatus, setAgentStatus] = useState("idle");
+  const [agentSessionId, setAgentSessionId] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (shouldResetOnSessionChange(refreshConfig, prevSessionIdRef.current, sessionId || null)) {
+      console.log(`[useAgentSession] Session changed: ${prevSessionIdRef.current} -> ${sessionId}, resetting state`);
+      setSandboxId(null);
+      setSandboxUrl(null);
+      setSandboxStatus("idle");
+      setLifecycle("idle");
+      setLifecycleMessage(null);
+      if (refreshConfig.clearMessagesOnReset !== false) {
+        setMessages([]);
+      }
+      if (refreshConfig.clearAgentSessionOnReset !== false) {
+        setAgentSessionId(null);
+      }
+      setAgentStatus("idle");
+      setError(null);
+    }
+    prevSessionIdRef.current = sessionId || null;
+  }, [sessionId, refreshConfig]);
+  useEffect(() => {
+    if (!sessionId) return;
+    if (clientRef.current && clientRef.current.isConnected && connectedSessionId === sessionId) {
+      return;
+    }
+    unsubscribersRef.current.forEach((unsub) => unsub());
+    unsubscribersRef.current = [];
+    clientRef.current?.disconnect();
+    const client = new AgentSessionClient({
+      url,
+      sessionId,
+      userId,
+      autoConnect: false
+    });
+    clientRef.current = client;
+    unsubscribersRef.current.push(
+      client.on("CONNECTED", (event) => {
+        setIsConnected(true);
+        setClientId(event.clientId);
+        setConnectedSessionId(event.sessionId);
+        setError(null);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("READY", (event) => {
+        setSandboxId(event.sandboxId);
+        setSandboxUrl(event.sandboxUrl);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("SANDBOX_STATUS", (event) => {
+        setSandboxStatus(event.status);
+        if (event.sandboxId) setSandboxId(event.sandboxId);
+        if (event.sandboxUrl) setSandboxUrl(event.sandboxUrl);
+        if (event.error) setError(event.error);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("LIFECYCLE", (event) => {
+        setLifecycle(event.phase);
+        setLifecycleMessage(event.message || null);
+        onLifecycleRef.current?.(event.phase, event.message);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("AGENT_STARTED", () => {
+        setAgentStatus("streaming");
+        const id = `msg-${Date.now()}`;
+        setMessages((prev) => [
+          ...prev,
+          { id, role: "assistant", content: "", timestamp: Date.now() }
+        ]);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("AGENT_MESSAGE", (event) => {
+        onAgentMessageRef.current?.(event);
+        if (event.message?.content) {
+          setMessages((prev) => {
+            const lastIdx = prev.length - 1;
+            if (lastIdx >= 0 && prev[lastIdx].role === "assistant") {
+              const updated = [...prev];
+              updated[lastIdx] = {
+                ...updated[lastIdx],
+                content: event.message.content
+              };
+              return updated;
+            }
+            return prev;
+          });
+        }
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("AGENT_DONE", (event) => {
+        setAgentStatus("idle");
+        if (event.sessionId) setAgentSessionId(event.sessionId);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("AGENT_ERROR", (event) => {
+        setAgentStatus("error");
+        setError(event.error);
+        onErrorRef.current?.(event.error);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("ERROR", (event) => {
+        setError(event.msg);
+        onErrorRef.current?.(event.msg);
+      })
+    );
+    unsubscribersRef.current.push(
+      client.on("SYSTEM", (event) => {
+        if (event.msg === "Disconnected") {
+          setIsConnected(false);
+        }
+      })
+    );
+    if (autoConnect) {
+      client.connect();
+    }
+    return () => {
+      unsubscribersRef.current.forEach((unsub) => unsub());
+      unsubscribersRef.current = [];
+      client.disconnect();
+    };
+  }, [url, sessionId, userId, autoConnect]);
+  const connect = useCallback((sid, uid) => {
+    if (clientRef.current) {
+      clientRef.current.disconnect();
+    }
+    const client = new AgentSessionClient({
+      url,
+      sessionId: sid,
+      userId: uid,
+      autoConnect: true
+    });
+    clientRef.current = client;
+  }, [url]);
+  const disconnect = useCallback(() => {
+    clientRef.current?.disconnect();
+    setIsConnected(false);
+    setClientId(null);
+    setConnectedSessionId(null);
+  }, []);
+  const startSandbox = useCallback((template) => {
+    clientRef.current?.startSandbox(template);
+  }, []);
+  const stopSandbox = useCallback(() => {
+    clientRef.current?.stopSandbox();
+  }, []);
+  const exec = useCallback((cmd, cwd) => {
+    clientRef.current?.exec(cmd, cwd);
+  }, []);
+  const sendMessage = useCallback(
+    (content, model, opts) => {
+      const id = `msg-${Date.now()}`;
+      setMessages((prev) => [...prev, { id, role: "user", content, timestamp: Date.now() }]);
+      setError(null);
+      clientRef.current?.sendAgentMessage(content, model, opts);
+    },
+    []
+  );
+  const stopAgent = useCallback(() => {
+    clientRef.current?.stopAgent();
+  }, []);
+  const resetAgent = useCallback(() => {
+    clientRef.current?.resetAgent();
+    setAgentSessionId(null);
+  }, []);
+  const clearMessages = useCallback(() => {
+    setMessages([]);
+  }, []);
+  return {
+    isConnected,
+    clientId,
+    sessionId: connectedSessionId,
+    sandboxStatus,
+    sandboxId,
+    sandboxUrl,
+    lifecycle,
+    lifecycleMessage,
+    agentStatus,
+    agentSessionId,
+    messages,
+    error,
+    connect,
+    disconnect,
+    startSandbox,
+    stopSandbox,
+    exec,
+    sendMessage,
+    stopAgent,
+    resetAgent,
+    clearMessages
+  };
+}
+
+// src/react.ts
+export * from "@steventsao/agent-session-core";
+export {
+  useAgentSession
+};