@assistant-ui/react-langgraph 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Simon Farshid
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# `@assistant-ui/react-langgraph`
+
+LangGraph integration for `@assistant-ui/react`.

package/dist/index.d.mts

@@ -0,0 +1,55 @@
+import { ExternalStoreRuntime, useExternalMessageConverter } from '@assistant-ui/react';
+
+type LangChainToolCallChunk = {
+    id: string;
+    name: string;
+    args: string;
+};
+type LangChainToolCall = {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+};
+type LangChainMessage = {
+    id?: string;
+    type: "human" | "system";
+    content: string;
+} | {
+    id?: string;
+    type: "tool";
+    content: string;
+    tool_call_id: string;
+    name: string;
+} | {
+    id?: string;
+    type: "ai";
+    content: string;
+    tool_call_chunks?: LangChainToolCallChunk[];
+    tool_calls?: LangChainToolCall[];
+};
+type LangChainEvent = {
+    event: "messages/partial" | "messages/complete";
+    data: LangChainMessage[];
+};
+
+declare const useLangChainLangGraphRuntime: ({ threadId, stream, }: {
+    threadId?: string | undefined;
+    stream: (message: LangChainMessage) => Promise<AsyncGenerator<{
+        event: string;
+        data: any;
+    }>>;
+}) => ExternalStoreRuntime;
+
+declare const useLangGraphMessages: <TMessage>({ stream, }: {
+    stream: (message: TMessage) => Promise<AsyncGenerator<{
+        event: string;
+        data: any;
+    }>>;
+}) => {
+    messages: TMessage[];
+    sendMessage: (message: TMessage) => Promise<void>;
+};
+
+declare const convertLangchainMessages: useExternalMessageConverter.Callback<LangChainMessage>;
+
+export { type LangChainEvent, type LangChainMessage, type LangChainToolCall, type LangChainToolCallChunk, convertLangchainMessages, useLangChainLangGraphRuntime, useLangGraphMessages };

package/dist/index.d.ts

@@ -0,0 +1,55 @@
+import { ExternalStoreRuntime, useExternalMessageConverter } from '@assistant-ui/react';
+
+type LangChainToolCallChunk = {
+    id: string;
+    name: string;
+    args: string;
+};
+type LangChainToolCall = {
+    id: string;
+    name: string;
+    args: Record<string, unknown>;
+};
+type LangChainMessage = {
+    id?: string;
+    type: "human" | "system";
+    content: string;
+} | {
+    id?: string;
+    type: "tool";
+    content: string;
+    tool_call_id: string;
+    name: string;
+} | {
+    id?: string;
+    type: "ai";
+    content: string;
+    tool_call_chunks?: LangChainToolCallChunk[];
+    tool_calls?: LangChainToolCall[];
+};
+type LangChainEvent = {
+    event: "messages/partial" | "messages/complete";
+    data: LangChainMessage[];
+};
+
+declare const useLangChainLangGraphRuntime: ({ threadId, stream, }: {
+    threadId?: string | undefined;
+    stream: (message: LangChainMessage) => Promise<AsyncGenerator<{
+        event: string;
+        data: any;
+    }>>;
+}) => ExternalStoreRuntime;
+
+declare const useLangGraphMessages: <TMessage>({ stream, }: {
+    stream: (message: TMessage) => Promise<AsyncGenerator<{
+        event: string;
+        data: any;
+    }>>;
+}) => {
+    messages: TMessage[];
+    sendMessage: (message: TMessage) => Promise<void>;
+};
+
+declare const convertLangchainMessages: useExternalMessageConverter.Callback<LangChainMessage>;
+
+export { type LangChainEvent, type LangChainMessage, type LangChainToolCall, type LangChainToolCallChunk, convertLangchainMessages, useLangChainLangGraphRuntime, useLangGraphMessages };

package/dist/index.js

@@ -0,0 +1,170 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  convertLangchainMessages: () => convertLangchainMessages,
+  useLangChainLangGraphRuntime: () => useLangChainLangGraphRuntime,
+  useLangGraphMessages: () => useLangGraphMessages
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useLangGraphRuntime.ts
+var import_react2 = require("react");
+var import_react3 = require("@assistant-ui/react");
+
+// src/convertLangchainMessages.ts
+var convertLangchainMessages = (message) => {
+  switch (message.type) {
+    case "system":
+      return {
+        role: "system",
+        id: message.id,
+        content: [{ type: "text", text: message.content }]
+      };
+    case "human":
+      return {
+        role: "user",
+        id: message.id,
+        content: [{ type: "text", text: message.content }]
+      };
+    case "ai":
+      return {
+        role: "assistant",
+        id: message.id,
+        content: [
+          {
+            type: "text",
+            text: message.content
+          },
+          ...message.tool_calls?.map(
+            (chunk) => ({
+              type: "tool-call",
+              toolCallId: chunk.id,
+              toolName: chunk.name,
+              args: chunk.args,
+              argsText: message.tool_call_chunks?.find((c) => c.id === chunk.id)?.args ?? JSON.stringify(chunk.args)
+            })
+          ) ?? []
+        ]
+      };
+    case "tool":
+      return {
+        role: "tool",
+        toolName: message.name,
+        toolCallId: message.tool_call_id,
+        result: message.content
+      };
+  }
+};
+
+// src/useLangGraphMessages.ts
+var import_react = require("react");
+var useLangGraphMessages = ({
+  stream
+}) => {
+  const [messages, setMessages] = (0, import_react.useState)([]);
+  const sendMessage = (0, import_react.useCallback)(
+    async (message) => {
+      if (message !== null) {
+        setMessages((currentMessages) => [...currentMessages, message]);
+      }
+      const response = await stream(message);
+      const completeMessages = [];
+      let partialMessages = /* @__PURE__ */ new Map();
+      for await (const chunk of response) {
+        if (chunk.event === "messages/partial") {
+          for (const message2 of chunk.data) {
+            if (!message2.id) throw new Error("Partial message missing id");
+            partialMessages.set(message2.id, message2);
+          }
+        } else if (chunk.event === "messages/complete") {
+          for (const message2 of chunk.data) {
+            if (!message2.id) continue;
+            partialMessages.delete(message2.id);
+          }
+          completeMessages.push(...chunk.data);
+        } else {
+          continue;
+        }
+        setMessages([...completeMessages, ...partialMessages.values()]);
+      }
+      if (partialMessages.size > 0) {
+        throw new Error("A partial message was not marked as complete");
+      }
+    },
+    [stream]
+  );
+  return { messages, sendMessage };
+};
+
+// src/useLangGraphRuntime.ts
+var useLangChainLangGraphRuntime = ({
+  threadId,
+  stream
+}) => {
+  const { messages, sendMessage } = useLangGraphMessages({
+    stream
+  });
+  const [isRunning, setIsRunning] = (0, import_react2.useState)(false);
+  const handleSendMessage = async (message) => {
+    try {
+      setIsRunning(true);
+      await sendMessage(message);
+    } catch (error) {
+      console.error("Error streaming messages:", error);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+  const threadMessages = (0, import_react3.useExternalMessageConverter)({
+    callback: convertLangchainMessages,
+    messages,
+    isRunning
+  });
+  return (0, import_react3.useExternalStoreRuntime)({
+    threadId,
+    isRunning,
+    messages: threadMessages,
+    onNew: (msg) => {
+      if (msg.content.length !== 1 || msg.content[0]?.type !== "text")
+        throw new Error("Only text messages are supported");
+      return handleSendMessage({
+        type: "human",
+        content: msg.content[0].text
+      });
+    },
+    onAddToolResult: async ({ toolCallId, toolName, result }) => {
+      await handleSendMessage({
+        type: "tool",
+        name: toolName,
+        tool_call_id: toolCallId,
+        content: JSON.stringify(result)
+      });
+    }
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertLangchainMessages,
+  useLangChainLangGraphRuntime,
+  useLangGraphMessages
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useLangGraphRuntime.ts","../src/convertLangchainMessages.ts","../src/useLangGraphMessages.ts"],"sourcesContent":["export { useLangChainLangGraphRuntime } from \"./useLangGraphRuntime\";\nexport { useLangGraphMessages } from \"./useLangGraphMessages\";\nexport { convertLangchainMessages } from \"./convertLangchainMessages\";\nexport type {\n  LangChainMessage,\n  LangChainEvent,\n  LangChainToolCall,\n  LangChainToolCallChunk,\n} from \"./types\";\n","import { useState } from \"react\";\nimport { LangChainMessage } from \"./types\";\nimport {\n  useExternalMessageConverter,\n  useExternalStoreRuntime,\n} from \"@assistant-ui/react\";\nimport { convertLangchainMessages } from \"./convertLangchainMessages\";\nimport { useLangGraphMessages } from \"./useLangGraphMessages\";\nimport { ExternalStoreRuntime } from \"@assistant-ui/react\";\n\nexport const useLangChainLangGraphRuntime = ({\n  threadId,\n  stream,\n}: {\n  threadId?: string | undefined;\n  stream: (message: LangChainMessage) => Promise<\n    AsyncGenerator<{\n      event: string;\n      data: any;\n    }>\n  >;\n}): ExternalStoreRuntime => {\n  const { messages, sendMessage } = useLangGraphMessages({\n    stream,\n  });\n\n  const [isRunning, setIsRunning] = useState(false);\n  const handleSendMessage = async (message: LangChainMessage) => {\n    try {\n      setIsRunning(true);\n      await sendMessage(message);\n    } catch (error) {\n      console.error(\"Error streaming messages:\", error);\n    } finally {\n      setIsRunning(false);\n    }\n  };\n\n  const threadMessages = useExternalMessageConverter({\n    callback: convertLangchainMessages,\n    messages,\n    isRunning,\n  });\n\n  return useExternalStoreRuntime({\n    threadId,\n    isRunning,\n    messages: threadMessages,\n    onNew: (msg) => {\n      if (msg.content.length !== 1 || msg.content[0]?.type !== \"text\")\n        throw new Error(\"Only text messages are supported\");\n      return handleSendMessage({\n        type: \"human\",\n        content: msg.content[0].text,\n      });\n    },\n    onAddToolResult: async ({ toolCallId, toolName, result }) => {\n      await handleSendMessage({\n        type: \"tool\",\n        name: toolName,\n        tool_call_id: toolCallId,\n        content: JSON.stringify(result),\n      });\n    },\n  });\n};\n","\"use client\";\n\nimport { useExternalMessageConverter } from \"@assistant-ui/react\";\nimport { LangChainMessage } from \"./types\";\nimport { ToolCallContentPart } from \"@assistant-ui/react\";\n\nexport const convertLangchainMessages: useExternalMessageConverter.Callback<\n  LangChainMessage\n> = (message) => {\n  switch (message.type) {\n    case \"system\":\n      return {\n        role: \"system\",\n        id: message.id,\n        content: [{ type: \"text\", text: message.content }],\n      };\n    case \"human\":\n      return {\n        role: \"user\",\n        id: message.id,\n        content: [{ type: \"text\", text: message.content }],\n      };\n    case \"ai\":\n      return {\n        role: \"assistant\",\n        id: message.id,\n        content: [\n          {\n            type: \"text\",\n            text: message.content,\n          },\n          ...(message.tool_calls?.map(\n            (chunk): ToolCallContentPart => ({\n              type: \"tool-call\",\n              toolCallId: chunk.id,\n              toolName: chunk.name,\n              args: chunk.args,\n              argsText:\n                message.tool_call_chunks?.find((c) => c.id === chunk.id)\n                  ?.args ?? JSON.stringify(chunk.args),\n            }),\n          ) ?? []),\n        ],\n      };\n    case \"tool\":\n      return {\n        role: \"tool\",\n        toolName: message.name,\n        toolCallId: message.tool_call_id,\n        result: message.content,\n      };\n  }\n};\n","import { useState, useCallback } from \"react\";\n\nexport const useLangGraphMessages = <TMessage>({\n  stream,\n}: {\n  stream: (message: TMessage) => Promise<\n    AsyncGenerator<{\n      event: string;\n      data: any;\n    }>\n  >;\n}) => {\n  const [messages, setMessages] = useState<TMessage[]>([]);\n\n  const sendMessage = useCallback(\n    async (message: TMessage) => {\n      if (message !== null) {\n        setMessages((currentMessages) => [...currentMessages, message]);\n      }\n\n      const response = await stream(message);\n\n      const completeMessages: TMessage[] = [];\n      let partialMessages: Map<string, TMessage> = new Map();\n      for await (const chunk of response) {\n        if (chunk.event === \"messages/partial\") {\n          for (const message of chunk.data) {\n            if (!message.id) throw new Error(\"Partial message missing id\");\n\n            partialMessages.set(message.id, message);\n          }\n        } else if (chunk.event === \"messages/complete\") {\n          for (const message of chunk.data) {\n            if (!message.id) continue;\n            partialMessages.delete(message.id);\n          }\n\n          completeMessages.push(...chunk.data);\n        } else {\n          continue;\n        }\n\n        setMessages([...completeMessages, ...partialMessages.values()]);\n      }\n      if (partialMessages.size > 0) {\n        throw new Error(\"A partial message was not marked as complete\");\n      }\n    },\n    [stream],\n  );\n\n  return { messages, sendMessage };\n};\n"],"mappings":"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","names":["import_react","message"]}

package/dist/index.mjs

@@ -0,0 +1,144 @@
+// src/useLangGraphRuntime.ts
+import { useState as useState2 } from "react";
+import {
+  useExternalMessageConverter,
+  useExternalStoreRuntime
+} from "@assistant-ui/react";
+
+// src/convertLangchainMessages.ts
+var convertLangchainMessages = (message) => {
+  switch (message.type) {
+    case "system":
+      return {
+        role: "system",
+        id: message.id,
+        content: [{ type: "text", text: message.content }]
+      };
+    case "human":
+      return {
+        role: "user",
+        id: message.id,
+        content: [{ type: "text", text: message.content }]
+      };
+    case "ai":
+      return {
+        role: "assistant",
+        id: message.id,
+        content: [
+          {
+            type: "text",
+            text: message.content
+          },
+          ...message.tool_calls?.map(
+            (chunk) => ({
+              type: "tool-call",
+              toolCallId: chunk.id,
+              toolName: chunk.name,
+              args: chunk.args,
+              argsText: message.tool_call_chunks?.find((c) => c.id === chunk.id)?.args ?? JSON.stringify(chunk.args)
+            })
+          ) ?? []
+        ]
+      };
+    case "tool":
+      return {
+        role: "tool",
+        toolName: message.name,
+        toolCallId: message.tool_call_id,
+        result: message.content
+      };
+  }
+};
+
+// src/useLangGraphMessages.ts
+import { useState, useCallback } from "react";
+var useLangGraphMessages = ({
+  stream
+}) => {
+  const [messages, setMessages] = useState([]);
+  const sendMessage = useCallback(
+    async (message) => {
+      if (message !== null) {
+        setMessages((currentMessages) => [...currentMessages, message]);
+      }
+      const response = await stream(message);
+      const completeMessages = [];
+      let partialMessages = /* @__PURE__ */ new Map();
+      for await (const chunk of response) {
+        if (chunk.event === "messages/partial") {
+          for (const message2 of chunk.data) {
+            if (!message2.id) throw new Error("Partial message missing id");
+            partialMessages.set(message2.id, message2);
+          }
+        } else if (chunk.event === "messages/complete") {
+          for (const message2 of chunk.data) {
+            if (!message2.id) continue;
+            partialMessages.delete(message2.id);
+          }
+          completeMessages.push(...chunk.data);
+        } else {
+          continue;
+        }
+        setMessages([...completeMessages, ...partialMessages.values()]);
+      }
+      if (partialMessages.size > 0) {
+        throw new Error("A partial message was not marked as complete");
+      }
+    },
+    [stream]
+  );
+  return { messages, sendMessage };
+};
+
+// src/useLangGraphRuntime.ts
+var useLangChainLangGraphRuntime = ({
+  threadId,
+  stream
+}) => {
+  const { messages, sendMessage } = useLangGraphMessages({
+    stream
+  });
+  const [isRunning, setIsRunning] = useState2(false);
+  const handleSendMessage = async (message) => {
+    try {
+      setIsRunning(true);
+      await sendMessage(message);
+    } catch (error) {
+      console.error("Error streaming messages:", error);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+  const threadMessages = useExternalMessageConverter({
+    callback: convertLangchainMessages,
+    messages,
+    isRunning
+  });
+  return useExternalStoreRuntime({
+    threadId,
+    isRunning,
+    messages: threadMessages,
+    onNew: (msg) => {
+      if (msg.content.length !== 1 || msg.content[0]?.type !== "text")
+        throw new Error("Only text messages are supported");
+      return handleSendMessage({
+        type: "human",
+        content: msg.content[0].text
+      });
+    },
+    onAddToolResult: async ({ toolCallId, toolName, result }) => {
+      await handleSendMessage({
+        type: "tool",
+        name: toolName,
+        tool_call_id: toolCallId,
+        content: JSON.stringify(result)
+      });
+    }
+  });
+};
+export {
+  convertLangchainMessages,
+  useLangChainLangGraphRuntime,
+  useLangGraphMessages
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useLangGraphRuntime.ts","../src/convertLangchainMessages.ts","../src/useLangGraphMessages.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { LangChainMessage } from \"./types\";\nimport {\n  useExternalMessageConverter,\n  useExternalStoreRuntime,\n} from \"@assistant-ui/react\";\nimport { convertLangchainMessages } from \"./convertLangchainMessages\";\nimport { useLangGraphMessages } from \"./useLangGraphMessages\";\nimport { ExternalStoreRuntime } from \"@assistant-ui/react\";\n\nexport const useLangChainLangGraphRuntime = ({\n  threadId,\n  stream,\n}: {\n  threadId?: string | undefined;\n  stream: (message: LangChainMessage) => Promise<\n    AsyncGenerator<{\n      event: string;\n      data: any;\n    }>\n  >;\n}): ExternalStoreRuntime => {\n  const { messages, sendMessage } = useLangGraphMessages({\n    stream,\n  });\n\n  const [isRunning, setIsRunning] = useState(false);\n  const handleSendMessage = async (message: LangChainMessage) => {\n    try {\n      setIsRunning(true);\n      await sendMessage(message);\n    } catch (error) {\n      console.error(\"Error streaming messages:\", error);\n    } finally {\n      setIsRunning(false);\n    }\n  };\n\n  const threadMessages = useExternalMessageConverter({\n    callback: convertLangchainMessages,\n    messages,\n    isRunning,\n  });\n\n  return useExternalStoreRuntime({\n    threadId,\n    isRunning,\n    messages: threadMessages,\n    onNew: (msg) => {\n      if (msg.content.length !== 1 || msg.content[0]?.type !== \"text\")\n        throw new Error(\"Only text messages are supported\");\n      return handleSendMessage({\n        type: \"human\",\n        content: msg.content[0].text,\n      });\n    },\n    onAddToolResult: async ({ toolCallId, toolName, result }) => {\n      await handleSendMessage({\n        type: \"tool\",\n        name: toolName,\n        tool_call_id: toolCallId,\n        content: JSON.stringify(result),\n      });\n    },\n  });\n};\n","\"use client\";\n\nimport { useExternalMessageConverter } from \"@assistant-ui/react\";\nimport { LangChainMessage } from \"./types\";\nimport { ToolCallContentPart } from \"@assistant-ui/react\";\n\nexport const convertLangchainMessages: useExternalMessageConverter.Callback<\n  LangChainMessage\n> = (message) => {\n  switch (message.type) {\n    case \"system\":\n      return {\n        role: \"system\",\n        id: message.id,\n        content: [{ type: \"text\", text: message.content }],\n      };\n    case \"human\":\n      return {\n        role: \"user\",\n        id: message.id,\n        content: [{ type: \"text\", text: message.content }],\n      };\n    case \"ai\":\n      return {\n        role: \"assistant\",\n        id: message.id,\n        content: [\n          {\n            type: \"text\",\n            text: message.content,\n          },\n          ...(message.tool_calls?.map(\n            (chunk): ToolCallContentPart => ({\n              type: \"tool-call\",\n              toolCallId: chunk.id,\n              toolName: chunk.name,\n              args: chunk.args,\n              argsText:\n                message.tool_call_chunks?.find((c) => c.id === chunk.id)\n                  ?.args ?? JSON.stringify(chunk.args),\n            }),\n          ) ?? []),\n        ],\n      };\n    case \"tool\":\n      return {\n        role: \"tool\",\n        toolName: message.name,\n        toolCallId: message.tool_call_id,\n        result: message.content,\n      };\n  }\n};\n","import { useState, useCallback } from \"react\";\n\nexport const useLangGraphMessages = <TMessage>({\n  stream,\n}: {\n  stream: (message: TMessage) => Promise<\n    AsyncGenerator<{\n      event: string;\n      data: any;\n    }>\n  >;\n}) => {\n  const [messages, setMessages] = useState<TMessage[]>([]);\n\n  const sendMessage = useCallback(\n    async (message: TMessage) => {\n      if (message !== null) {\n        setMessages((currentMessages) => [...currentMessages, message]);\n      }\n\n      const response = await stream(message);\n\n      const completeMessages: TMessage[] = [];\n      let partialMessages: Map<string, TMessage> = new Map();\n      for await (const chunk of response) {\n        if (chunk.event === \"messages/partial\") {\n          for (const message of chunk.data) {\n            if (!message.id) throw new Error(\"Partial message missing id\");\n\n            partialMessages.set(message.id, message);\n          }\n        } else if (chunk.event === \"messages/complete\") {\n          for (const message of chunk.data) {\n            if (!message.id) continue;\n            partialMessages.delete(message.id);\n          }\n\n          completeMessages.push(...chunk.data);\n        } else {\n          continue;\n        }\n\n        setMessages([...completeMessages, ...partialMessages.values()]);\n      }\n      if (partialMessages.size > 0) {\n        throw new Error(\"A partial message was not marked as complete\");\n      }\n    },\n    [stream],\n  );\n\n  return { messages, sendMessage };\n};\n"],"mappings":"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","names":["useState","message","useState"]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@assistant-ui/react-langgraph",
+  "version": "0.0.1",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  },
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "@assistant-ui/react": "^0.5.45",
+    "@types/react": "*",
+    "react": "^18",
+    "react-hook-form": "^7.x.x"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "eslint-config-next": "14.2.7",
+    "tsup": "8.2.4",
+    "@assistant-ui/tsconfig": "0.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "homepage": "https://assistant-ui.com/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yonom/assistant-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Yonom/assistant-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
+  }
+}