@braincrew-lab/langchain-canvas 0.3.0 → 0.4.9

package/dist/langgraph/index.d.ts

@@ -0,0 +1,68 @@
+import { C as CanvasTransport, E as ElementSelection, S as StreamEvent } from '../types-BfGP9R2I.js';
+
+/**
+ * `langgraphTransport` — speak to a LangGraph server without a translator
+ * in between.
+ *
+ * Built on the official `@langchain/langgraph-sdk` (the server's wire format
+ * belongs to LangGraph and evolves with it — we ride the official client
+ * rather than hand-parse it). Verified against `langgraph dev` (local);
+ * hosted LangGraph Platform is untested — open an issue if you need it.
+ *
+ * Per user turn it: maps the canvas thread id to the UUID LangGraph requires,
+ * makes sure the thread exists, frames any element selections into the
+ * message (targeted edits), then streams the run with
+ * `streamMode: ["messages-tuple", "custom"]` through the translation in
+ * `translate.ts`.
+ */
+
+interface LangGraphTransportOptions {
+    /** LangGraph server URL, e.g. `http://127.0.0.1:2024` (`langgraph dev`). */
+    url: string;
+    /** Graph/assistant to run, e.g. `"canvas_agent"`. */
+    assistantId: string;
+    /** Extra headers (e.g. auth) passed to the SDK client. */
+    headers?: Record<string, string>;
+}
+/** Frame a targeted edit so the agent changes only the selected element(s). */
+declare function withSelections(message: string, selections: ElementSelection[]): string;
+/**
+ * LangGraph requires UUID thread ids; the canvas allows any string. Non-UUID
+ * ids map deterministically (RFC 4122 v5 over `canvas-thread:<id>`), matching
+ * the mapping the Python bridge example uses — same id in, same UUID out.
+ */
+declare function threadUuid(threadId: string): Promise<string>;
+declare function langgraphTransport(options: LangGraphTransportOptions): CanvasTransport;
+
+/**
+ * Translate a LangGraph run stream into Canvas Wire Protocol events.
+ *
+ * Input: the `{event, data}` chunks the LangGraph SDK yields for a run
+ * streamed with `streamMode: ["messages-tuple", "custom"]`. Output: the
+ * `StreamEvent`s the canvas applies. The mapping:
+ *
+ * - `messages` AIMessageChunk text        → `message.delta`
+ * - `messages` AIMessageChunk tool chunks → `tool.start` (once per call id)
+ * - `messages` tool result                → `tool.end`
+ * - `custom` `canvas.*`                   → passed through untouched
+ * - `error`                               → `error`
+ * - stream end                            → `message.end` + `done`
+ *
+ * The chunk shapes are pinned by a captured fixture from a real
+ * `langgraph dev` run (`__fixtures__/langgraph-run.json`) — notably, model
+ * content arrives as block arrays (`{type: "text" | "tool_use"}`), not plain
+ * strings.
+ */
+
+/** One chunk from `client.runs.stream(...)` — the SDK's `{event, data}` pair. */
+interface LangGraphStreamChunk {
+    event: string;
+    data: unknown;
+}
+/** Text of a message chunk — models may stream content as block lists. */
+declare function chunkText(content: unknown): string;
+declare function translateLangGraphStream(chunks: AsyncIterable<LangGraphStreamChunk> | Iterable<LangGraphStreamChunk>, options?: {
+    messageId?: string;
+}): AsyncGenerator<StreamEvent>;
+
+export { type LangGraphStreamChunk, type LangGraphTransportOptions, chunkText, langgraphTransport, threadUuid, translateLangGraphStream, withSelections };

package/dist/langgraph/index.js

@@ -0,0 +1,111 @@
+import { Client } from '@langchain/langgraph-sdk';
+
+// src/langgraph/transport.ts
+
+// src/langgraph/translate.ts
+function chunkText(content) {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    return content.filter(
+      (block) => typeof block === "object" && block !== null && block.type === "text" && typeof block.text === "string"
+    ).map((block) => block.text).join("");
+  }
+  return "";
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+async function* translateLangGraphStream(chunks, options = {}) {
+  const messageId = options.messageId ?? `msg_${Math.random().toString(36).slice(2, 14)}`;
+  const startedTools = /* @__PURE__ */ new Set();
+  for await (const chunk of chunks) {
+    if (chunk.event === "error") {
+      const detail = typeof chunk.data === "string" ? chunk.data : JSON.stringify(chunk.data);
+      yield { type: "error", message: `agent run failed: ${detail}` };
+      continue;
+    }
+    if (chunk.event === "custom") {
+      if (isRecord(chunk.data) && String(chunk.data.type ?? "").startsWith("canvas.")) {
+        yield chunk.data;
+      }
+      continue;
+    }
+    if (chunk.event !== "messages" || !Array.isArray(chunk.data) || chunk.data.length === 0) {
+      continue;
+    }
+    const msg = chunk.data[0];
+    if (!isRecord(msg)) continue;
+    const meta = chunk.data.length > 1 && isRecord(chunk.data[1]) ? chunk.data[1] : {};
+    const fromToolsNode = meta.langgraph_node === "tools";
+    if (msg.type === "AIMessageChunk") {
+      const calls = Array.isArray(msg.tool_call_chunks) ? msg.tool_call_chunks : [];
+      for (const call of calls) {
+        if (!isRecord(call)) continue;
+        const id = typeof call.id === "string" ? call.id : null;
+        const name = typeof call.name === "string" ? call.name : null;
+        if (id && name && !startedTools.has(id)) {
+          startedTools.add(id);
+          yield { type: "tool.start", toolCallId: id, name };
+        }
+      }
+      const text = chunkText(msg.content);
+      if (text && !fromToolsNode) yield { type: "message.delta", messageId, text };
+    } else if (msg.type === "tool") {
+      const id = typeof msg.tool_call_id === "string" ? msg.tool_call_id : null;
+      if (id) yield { type: "tool.end", toolCallId: id, ok: msg.status !== "error" };
+    }
+  }
+  yield { type: "message.end", messageId };
+  yield { type: "done" };
+}
+
+// src/langgraph/transport.ts
+function withSelections(message, selections) {
+  if (selections.length === 0) return message;
+  const listed = selections.map((s) => `- \`${s.selector}\` (data-cid=${s.cid})`).join("\n");
+  const artifactId = selections[0].artifactId;
+  return `${message}
+
+[Targeted edit] Apply the change to these selected element(s) in file \`${artifactId}\`:
+${listed}
+First call read_canvas on the file to get its current content and revision, then call edit_canvas with the element's exact current outer HTML as \`old\` and your replacement as \`new\` (keep the data-cid attribute).`;
+}
+var UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+var NAMESPACE_URL = "6ba7b811-9dad-11d1-80b4-00c04fd430c8";
+async function threadUuid(threadId) {
+  if (UUID_RE.test(threadId)) return threadId.toLowerCase();
+  const name = new TextEncoder().encode(`canvas-thread:${threadId}`);
+  const namespace = NAMESPACE_URL.replace(/-/g, "");
+  const namespaceBytes = new Uint8Array(16);
+  for (let i = 0; i < 16; i++) namespaceBytes[i] = parseInt(namespace.slice(i * 2, i * 2 + 2), 16);
+  const payload = new Uint8Array(namespaceBytes.length + name.length);
+  payload.set(namespaceBytes);
+  payload.set(name, namespaceBytes.length);
+  const digest = new Uint8Array(await crypto.subtle.digest("SHA-1", payload)).slice(0, 16);
+  digest[6] = digest[6] & 15 | 80;
+  digest[8] = digest[8] & 63 | 128;
+  const hex = [...digest].map((b) => b.toString(16).padStart(2, "0")).join("");
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+function langgraphTransport(options) {
+  const client = new Client({ apiUrl: options.url, defaultHeaders: options.headers });
+  const knownThreads = /* @__PURE__ */ new Set();
+  return {
+    async *stream(request) {
+      const threadId = await threadUuid(request.threadId);
+      if (!knownThreads.has(threadId)) {
+        await client.threads.create({ threadId, ifExists: "do_nothing" });
+        knownThreads.add(threadId);
+      }
+      const message = withSelections(request.message, request.selections ?? []);
+      const chunks = client.runs.stream(threadId, options.assistantId, {
+        input: { messages: [{ role: "user", content: message }] },
+        streamMode: ["messages-tuple", "custom"],
+        signal: request.signal
+      });
+      yield* translateLangGraphStream(chunks);
+    }
+  };
+}
+
+export { chunkText, langgraphTransport, threadUuid, translateLangGraphStream, withSelections };