@futurity/chat-react 0.0.1

package/dist/index.js

@@ -0,0 +1,637 @@
+"use client";
+
+// src/chat-protocol.ts
+import {
+  wsServerMessageSchema
+} from "@futurity/chat-protocol";
+function parseServerMessage(data) {
+  const result = wsServerMessageSchema.safeParse(data);
+  if (!result.success) {
+    console.error("Failed to parse server message:", result.error, data);
+    return null;
+  }
+  return result.data;
+}
+
+// src/tree-builder.ts
+var MessageNode = class {
+  id;
+  parent_id;
+  message;
+  children = [];
+  constructor(message) {
+    this.id = message.id;
+    this.message = message;
+    this.parent_id = message.metadata?.parent_id ?? null;
+  }
+  addChild(child) {
+    this.children.push(child);
+  }
+  getChildren() {
+    return this.children;
+  }
+};
+function buildTree(messages, byId) {
+  const roots = [];
+  const orphans = [];
+  for (const message of messages) {
+    const node = new MessageNode(message);
+    byId.set(node.id, node);
+    if (node.parent_id === null) {
+      roots.push(node);
+    } else {
+      const parent = byId.get(node.parent_id);
+      if (parent) {
+        parent.addChild(node);
+      } else {
+        orphans.push(node);
+      }
+    }
+  }
+  for (const node of orphans) {
+    const parent = byId.get(node.parent_id ?? "");
+    if (parent) {
+      parent.addChild(node);
+    } else {
+      console.error(
+        `Could not find parent ${node.parent_id} for orphan node ${node.id}. Treating as root.`
+      );
+      roots.push(node);
+    }
+  }
+  return roots;
+}
+function findLatestPath(tree, byId) {
+  const leaves = [];
+  const stack = [...tree];
+  while (stack.length > 0) {
+    const node = stack.pop();
+    if (!node) continue;
+    const children = node.getChildren();
+    if (children.length === 0) {
+      leaves.push(node);
+    } else {
+      for (const child of children) {
+        stack.push(child);
+      }
+    }
+  }
+  if (leaves.length === 0) {
+    return [];
+  }
+  let latestLeaf = leaves[0];
+  for (const leaf of leaves) {
+    if (leaf.message.createdAt && latestLeaf.message.createdAt && new Date(leaf.message.createdAt) > new Date(latestLeaf.message.createdAt)) {
+      latestLeaf = leaf;
+    }
+  }
+  const path = [];
+  let currentNode = latestLeaf;
+  while (currentNode) {
+    path.unshift(currentNode.message);
+    currentNode = byId.get(currentNode.parent_id ?? "");
+  }
+  return path;
+}
+
+// src/types.ts
+import { Z_MessagePart } from "@futurity/chat-protocol";
+import { z } from "zod";
+var messageMetadataSchema = z.object({
+  parent_id: z.uuid().nullable()
+});
+var Z_ChatMessage = z.looseObject({
+  id: z.string(),
+  role: z.enum(["user", "assistant", "system"]),
+  parts: z.array(Z_MessagePart),
+  createdAt: z.preprocess((val) => {
+    if (!val || typeof val !== "string") return void 0;
+    return new Date(val);
+  }, z.date().optional()),
+  metadata: messageMetadataSchema.optional()
+});
+
+// src/useReconnectingWebSocket.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/WebSocketConnection.ts
+var DEFAULT_HEARTBEAT_INTERVAL = 5e3;
+var DEFAULT_HEARTBEAT_TIMEOUT = 1e4;
+var DEFAULT_INITIAL_RECONNECT_DELAY = 1e3;
+var DEFAULT_MAX_RECONNECT_DELAY = 3e4;
+var WebSocketConnection = class {
+  ws = null;
+  reconnectTimeout = null;
+  heartbeatIntervalTimer = null;
+  heartbeatTimeoutTimer = null;
+  reconnectDelay;
+  pendingMessages = [];
+  intentionalClose = false;
+  awaitingPong = false;
+  connectPromise = null;
+  _state = "disconnected";
+  url;
+  heartbeatInterval;
+  heartbeatTimeout;
+  initialReconnectDelay;
+  maxReconnectDelay;
+  debugPrefix;
+  onMessage;
+  onConnectionChange;
+  onError;
+  get state() {
+    return this._state;
+  }
+  get isConnected() {
+    return this._state === "connected";
+  }
+  constructor(options) {
+    this.url = options.url;
+    this.onMessage = options.onMessage;
+    this.onConnectionChange = options.onConnectionChange;
+    this.onError = options.onError;
+    this.heartbeatInterval = options.heartbeatInterval ?? DEFAULT_HEARTBEAT_INTERVAL;
+    this.heartbeatTimeout = options.heartbeatTimeout ?? DEFAULT_HEARTBEAT_TIMEOUT;
+    this.initialReconnectDelay = options.initialReconnectDelay ?? DEFAULT_INITIAL_RECONNECT_DELAY;
+    this.maxReconnectDelay = options.maxReconnectDelay ?? DEFAULT_MAX_RECONNECT_DELAY;
+    this.debugPrefix = options.debugPrefix ?? "[WS]";
+    this.reconnectDelay = this.initialReconnectDelay;
+  }
+  updateState(state) {
+    this._state = state;
+    this.onConnectionChange?.(state);
+  }
+  clearTimers() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    if (this.heartbeatIntervalTimer) {
+      clearInterval(this.heartbeatIntervalTimer);
+      this.heartbeatIntervalTimer = null;
+    }
+    if (this.heartbeatTimeoutTimer) {
+      clearTimeout(this.heartbeatTimeoutTimer);
+      this.heartbeatTimeoutTimer = null;
+    }
+  }
+  sendPing() {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+    if (this.awaitingPong) {
+      console.warn(`${this.debugPrefix} No pong received, connection stale`);
+      this.ws.close();
+      return;
+    }
+    this.awaitingPong = true;
+    this.ws.send(JSON.stringify({ type: "__ping__" }));
+    this.heartbeatTimeoutTimer = setTimeout(() => {
+      if (this.awaitingPong) {
+        console.warn(`${this.debugPrefix} Pong timeout, closing connection`);
+        this.ws?.close();
+      }
+    }, this.heartbeatTimeout);
+  }
+  startHeartbeat() {
+    if (this.heartbeatIntervalTimer) {
+      clearInterval(this.heartbeatIntervalTimer);
+    }
+    this.heartbeatIntervalTimer = setInterval(
+      () => this.sendPing(),
+      this.heartbeatInterval
+    );
+  }
+  connect() {
+    if (this.ws?.readyState === WebSocket.OPEN || this.ws?.readyState === WebSocket.CONNECTING) {
+      return;
+    }
+    this.clearTimers();
+    this.intentionalClose = false;
+    const wsUrl = this.url.replace(/^http/, "ws");
+    console.log(`${this.debugPrefix} Connecting to:`, wsUrl);
+    this.updateState("connecting");
+    const ws = new WebSocket(wsUrl);
+    ws.onopen = () => {
+      console.log(`${this.debugPrefix} Connected`);
+      this.updateState("connected");
+      this.reconnectDelay = this.initialReconnectDelay;
+      this.awaitingPong = false;
+      for (const msg of this.pendingMessages) {
+        ws.send(JSON.stringify(msg));
+      }
+      this.pendingMessages = [];
+      this.startHeartbeat();
+      this.connectPromise?.resolve(true);
+      this.connectPromise = null;
+    };
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (typeof data === "object" && data !== null && "type" in data && data.type === "__pong__") {
+          this.awaitingPong = false;
+          if (this.heartbeatTimeoutTimer) {
+            clearTimeout(this.heartbeatTimeoutTimer);
+            this.heartbeatTimeoutTimer = null;
+          }
+          return;
+        }
+        this.onMessage(data);
+      } catch (error) {
+        console.error(`${this.debugPrefix} Error parsing message:`, error);
+      }
+    };
+    ws.onclose = () => {
+      console.log(`${this.debugPrefix} Disconnected`);
+      this.updateState("disconnected");
+      this.clearTimers();
+      this.connectPromise?.resolve(false);
+      this.connectPromise = null;
+      if (this.intentionalClose) {
+        return;
+      }
+      const delay = this.reconnectDelay;
+      console.log(`${this.debugPrefix} Reconnecting in ${delay}ms...`);
+      this.reconnectTimeout = setTimeout(() => {
+        if (this.ws === ws) {
+          this.reconnectDelay = Math.min(
+            this.reconnectDelay * 2,
+            this.maxReconnectDelay
+          );
+          this.connect();
+        }
+      }, delay);
+    };
+    ws.onerror = (error) => {
+      if (ws.readyState !== WebSocket.CLOSED) {
+        console.error(`${this.debugPrefix} WebSocket error`);
+        this.onError?.(error);
+      }
+    };
+    this.ws = ws;
+  }
+  disconnect() {
+    this.intentionalClose = true;
+    this.clearTimers();
+    if (this.ws) {
+      this.ws.onclose = null;
+      this.ws.onerror = null;
+      this.ws.close();
+      this.ws = null;
+    }
+    this.updateState("disconnected");
+  }
+  send(message) {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    } else {
+      this.pendingMessages.push(message);
+      if (this.ws?.readyState !== WebSocket.CONNECTING) {
+        this.reconnectDelay = this.initialReconnectDelay;
+        this.connect();
+      }
+    }
+  }
+  ensureConnected() {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return Promise.resolve(true);
+    }
+    if (this.ws?.readyState === WebSocket.CONNECTING) {
+      return new Promise((resolve) => {
+        this.connectPromise = { resolve };
+      });
+    }
+    return new Promise((resolve) => {
+      this.connectPromise = { resolve };
+      this.reconnectDelay = this.initialReconnectDelay;
+      this.connect();
+    });
+  }
+  reconnect() {
+    this.disconnect();
+    this.reconnectDelay = this.initialReconnectDelay;
+    setTimeout(() => this.connect(), 100);
+  }
+};
+
+// src/useReconnectingWebSocket.ts
+function useReconnectingWebSocket({
+  url,
+  onMessage,
+  onConnectionChange,
+  onError,
+  enabled = true,
+  heartbeatInterval,
+  heartbeatTimeout,
+  initialReconnectDelay,
+  maxReconnectDelay,
+  debugPrefix
+}) {
+  const [connectionState, setConnectionState] = useState("disconnected");
+  const onMessageRef = useRef(onMessage);
+  const onConnectionChangeRef = useRef(onConnectionChange);
+  const onErrorRef = useRef(onError);
+  useEffect(() => {
+    onMessageRef.current = onMessage;
+    onConnectionChangeRef.current = onConnectionChange;
+    onErrorRef.current = onError;
+  });
+  const connRef = useRef(null);
+  if (!connRef.current) {
+    connRef.current = new WebSocketConnection({
+      url,
+      onMessage: (data) => onMessageRef.current(data),
+      onConnectionChange: (state) => {
+        setConnectionState(state);
+        onConnectionChangeRef.current?.(state);
+      },
+      onError: (error) => onErrorRef.current?.(error),
+      heartbeatInterval,
+      heartbeatTimeout,
+      initialReconnectDelay,
+      maxReconnectDelay,
+      debugPrefix
+    });
+  }
+  useEffect(() => {
+    if (enabled) {
+      connRef.current?.connect();
+    }
+    return () => {
+      connRef.current?.disconnect();
+    };
+  }, [enabled]);
+  const send = useCallback((message) => {
+    connRef.current?.send(message);
+  }, []);
+  const ensureConnected = useCallback(() => {
+    return connRef.current?.ensureConnected() ?? Promise.resolve(false);
+  }, []);
+  const reconnect = useCallback(() => {
+    connRef.current?.reconnect();
+  }, []);
+  return {
+    connectionState,
+    isConnected: connectionState === "connected",
+    send,
+    ensureConnected,
+    reconnect
+  };
+}
+
+// src/useStreamChat.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+function transformChatHistory(rawMessages) {
+  const parsedMessages = Z_ChatMessage.array().safeParse(rawMessages);
+  if (!parsedMessages.success) {
+    throw new Error("Invalid chat history");
+  }
+  const messages = parsedMessages.data;
+  const byId = /* @__PURE__ */ new Map();
+  const tree = buildTree(messages, byId);
+  const initialPath = findLatestPath(tree, byId);
+  return {
+    messages,
+    tree,
+    byId,
+    initialPath
+  };
+}
+function useStreamChat({
+  chatId,
+  wsUrl,
+  onStart,
+  onDelta,
+  onResume,
+  onFinish,
+  onError,
+  onHistory
+}) {
+  if (!chatId) {
+    throw new Error("useStreamChat: chatId is required");
+  }
+  if (!wsUrl) {
+    throw new Error("useStreamChat: wsUrl is required");
+  }
+  const [messages, setMessages] = useState2([]);
+  const [status, setStatus] = useState2("ready");
+  const [job, setJob] = useState2("");
+  const hasRequestedChat = useRef2(false);
+  const [pendingClarify, setPendingClarify] = useState2(null);
+  const onStartRef = useRef2(onStart);
+  const onDeltaRef = useRef2(onDelta);
+  const onResumeRef = useRef2(onResume);
+  const onFinishRef = useRef2(onFinish);
+  const onErrorRef = useRef2(onError);
+  const onHistoryRef = useRef2(onHistory);
+  const sendRef = useRef2(() => {
+  });
+  useEffect2(() => {
+    onStartRef.current = onStart;
+    onDeltaRef.current = onDelta;
+    onResumeRef.current = onResume;
+    onFinishRef.current = onFinish;
+    onErrorRef.current = onError;
+    onHistoryRef.current = onHistory;
+  });
+  const handleMessage = useCallback2(
+    (rawData) => {
+      const message = parseServerMessage(rawData);
+      if (!message) {
+        console.error("Invalid message received from server");
+        return;
+      }
+      switch (message.type) {
+        case "ready": {
+          if (!hasRequestedChat.current) {
+            hasRequestedChat.current = true;
+            sendRef.current({
+              type: "get_chat",
+              data: { chat_id: chatId }
+            });
+          }
+          break;
+        }
+        case "run": {
+          const { job_id, message_id } = message.data;
+          setStatus("submitted");
+          setJob(job_id);
+          onStartRef.current?.(message_id);
+          break;
+        }
+        case "stream": {
+          const messageId = message.messageId;
+          setStatus("streaming");
+          onDeltaRef.current?.(messageId, message.delta, message.consolidated);
+          break;
+        }
+        case "stream_resume": {
+          const messageId = message.messageId;
+          setStatus("streaming");
+          onResumeRef.current?.(messageId, message.parts);
+          break;
+        }
+        case "done": {
+          setStatus("ready");
+          setPendingClarify(null);
+          onFinishRef.current?.();
+          break;
+        }
+        case "error": {
+          setStatus("error");
+          onErrorRef.current?.(message);
+          break;
+        }
+        case "chat_history": {
+          const result = transformChatHistory(message.data.messages);
+          result.activeMessageId = message.data.activeMessageId;
+          onHistoryRef.current?.(result);
+          break;
+        }
+        case "clarify_request": {
+          setPendingClarify(message.data);
+          break;
+        }
+        case "cancel": {
+          setJob("");
+          setPendingClarify(null);
+          setTimeout(() => {
+            setStatus("ready");
+          }, 1e3);
+          break;
+        }
+      }
+    },
+    [chatId]
+  );
+  const handleConnectionChange = useCallback2((state) => {
+    if (state === "connected") {
+      setStatus("ready");
+      hasRequestedChat.current = false;
+    }
+  }, []);
+  const handleError = useCallback2(() => {
+    setStatus("error");
+  }, []);
+  const { send, ensureConnected, isConnected } = useReconnectingWebSocket({
+    url: wsUrl,
+    onMessage: handleMessage,
+    onConnectionChange: handleConnectionChange,
+    onError: handleError,
+    enabled: !!chatId,
+    debugPrefix: "[ChatWS]"
+  });
+  useEffect2(() => {
+    sendRef.current = send;
+  }, [send]);
+  const sendMessage = useCallback2(
+    async (payload) => {
+      if (status === "streaming" || status === "submitted") return;
+      const connected = await ensureConnected();
+      if (!connected) {
+        console.error("[ChatWS] Failed to connect for sendMessage");
+        return;
+      }
+      const parent_id = payload.metadata !== void 0 ? payload.metadata.parent_id ?? null : messages.at(-1)?.id ?? null;
+      const message = {
+        id: crypto.randomUUID(),
+        role: "user",
+        parts: payload.parts,
+        metadata: {
+          parent_id
+        }
+      };
+      const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      setMessages((prev) => [...prev, message]);
+      send({
+        type: "run",
+        data: {
+          id: chatId,
+          message: {
+            id: message.id,
+            role: message.role,
+            parts: message.parts,
+            metadata: message.metadata
+          },
+          vaultItems: payload.vaultItems ?? [],
+          timezone
+        }
+      });
+    },
+    [chatId, ensureConnected, messages, send, status]
+  );
+  const stop = useCallback2(async () => {
+    if (!job) return;
+    const connected = await ensureConnected();
+    if (!connected) return;
+    send({ type: "cancel", data: { job_id: job } });
+  }, [job, ensureConnected, send]);
+  const injectMessage = useCallback2(
+    async (text) => {
+      if (!job) return;
+      const connected = await ensureConnected();
+      if (!connected) return;
+      const message_id = crypto.randomUUID();
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: message_id,
+          role: "user",
+          parts: [{ type: "text", text }]
+        }
+      ]);
+      send({
+        type: "inject_message",
+        data: {
+          job_id: job,
+          text,
+          message_id
+        }
+      });
+    },
+    [job, ensureConnected, send]
+  );
+  const sendClarifyResponse = useCallback2(
+    (answers) => {
+      if (!pendingClarify) return;
+      send({
+        type: "clarify_response",
+        data: {
+          job_id: pendingClarify.job_id,
+          requestId: pendingClarify.requestId,
+          answers
+        }
+      });
+      setPendingClarify(null);
+    },
+    [pendingClarify, send]
+  );
+  const reset = useCallback2(() => {
+    setMessages([]);
+    setStatus("ready");
+    setJob("");
+    setPendingClarify(null);
+    hasRequestedChat.current = false;
+  }, []);
+  return {
+    messages,
+    setMessages,
+    sendMessage,
+    injectMessage,
+    status,
+    stop,
+    reset,
+    isConnected,
+    pendingClarify,
+    sendClarifyResponse
+  };
+}
+export {
+  MessageNode,
+  WebSocketConnection,
+  Z_ChatMessage,
+  buildTree,
+  findLatestPath,
+  messageMetadataSchema,
+  parseServerMessage,
+  useReconnectingWebSocket,
+  useStreamChat
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@futurity/chat-react",
+  "version": "0.0.1",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": "./src/*.ts"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "src", "README.md"],
+  "scripts": {
+    "build": "tsup",
+    "check": "tsgo --noEmit",
+    "prepublishOnly": "tsup"
+  },
+  "dependencies": {
+    "@futurity/chat-protocol": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "react": "^19",
+    "tsup": "^8.5.0",
+    "zod": "^4.1.13"
+  }
+}