@assistant-ui/react-langgraph 0.4.5 → 0.5.1

package/dist/useLangGraphMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useLangGraphMessages.ts"],"sourcesContent":["import { useState, useCallback, useRef } from \"react\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { LangGraphMessageAccumulator } from \"./LangGraphMessageAccumulator\";\n\nexport type LangGraphCommand = {\n  resume: string;\n};\n\nexport type LangGraphSendMessageConfig = {\n  command?: LangGraphCommand;\n  runConfig?: unknown;\n};\n\nexport type LangGraphMessagesEvent<TMessage> = {\n  event:\n    | \"messages\"\n    | \"messages/partial\"\n    | \"messages/complete\"\n    | \"metadata\"\n    | \"updates\"\n    | string;\n  data: TMessage[] | any;\n};\nexport type LangGraphStreamCallback<TMessage> = (\n  messages: TMessage[],\n  config: LangGraphSendMessageConfig & { abortSignal: AbortSignal },\n) =>\n  | Promise<AsyncGenerator<LangGraphMessagesEvent<TMessage>>>\n  | AsyncGenerator<LangGraphMessagesEvent<TMessage>>;\n\nexport type LangGraphInterruptState = {\n  value?: any;\n  resumable?: boolean;\n  when: string;\n  ns?: string[];\n};\n\nconst DEFAULT_APPEND_MESSAGE = <TMessage>(\n  _: TMessage | undefined,\n  curr: TMessage,\n) => curr;\n\nexport const useLangGraphMessages = <TMessage extends { id?: string }>({\n  stream,\n  appendMessage = DEFAULT_APPEND_MESSAGE,\n}: {\n  stream: LangGraphStreamCallback<TMessage>;\n  appendMessage?: (prev: TMessage | undefined, curr: TMessage) => TMessage;\n}) => {\n  const [interrupt, setInterrupt] = useState<\n    LangGraphInterruptState | undefined\n  >();\n  const [messages, setMessages] = useState<TMessage[]>([]);\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const sendMessage = useCallback(\n    async (newMessages: TMessage[], config: LangGraphSendMessageConfig) => {\n      // ensure all messages have an ID\n      newMessages = newMessages.map((m) => (m.id ? m : { ...m, id: uuidv4() }));\n\n      const accumulator = new LangGraphMessageAccumulator({\n        initialMessages: messages,\n        appendMessage,\n      });\n      setMessages(accumulator.addMessages(newMessages));\n\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n      const response = await stream(newMessages, {\n        ...config,\n        abortSignal: abortController.signal,\n      });\n\n      for await (const chunk of response) {\n        if (\n          chunk.event === \"messages/partial\" ||\n          chunk.event === \"messages/complete\"\n        ) {\n          setMessages(accumulator.addMessages(chunk.data));\n        } else if (chunk.event === \"updates\") {\n          setInterrupt(chunk.data.__interrupt__?.[0]);\n        }\n      }\n    },\n    [messages, stream, appendMessage],\n  );\n\n  const cancel = useCallback(() => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort();\n    }\n  }, [abortControllerRef]);\n\n  return {\n    interrupt,\n    messages,\n    sendMessage,\n    cancel,\n    setInterrupt,\n    setMessages,\n  };\n};\n"],"mappings":"AAAA,SAAS,UAAU,aAAa,cAAc;AAC9C,SAAS,MAAM,cAAc;AAC7B,SAAS,mCAAmC;AAmC5C,MAAM,yBAAyB,CAC7B,GACA,SACG;AAEE,MAAM,uBAAuB,CAAmC;AAAA,EACrE;AAAA,EACA,gBAAgB;AAClB,MAGM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAEhC;AACF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAqB,CAAC,CAAC;AACvD,QAAM,qBAAqB,OAA+B,IAAI;AAE9D,QAAM,cAAc;AAAA,IAClB,OAAO,aAAyB,WAAuC;AAErE,oBAAc,YAAY,IAAI,CAAC,MAAO,EAAE,KAAK,IAAI,EAAE,GAAG,GAAG,IAAI,OAAO,EAAE,CAAE;AAExE,YAAM,cAAc,IAAI,4BAA4B;AAAA,QAClD,iBAAiB;AAAA,QACjB;AAAA,MACF,CAAC;AACD,kBAAY,YAAY,YAAY,WAAW,CAAC;AAEhD,YAAM,kBAAkB,IAAI,gBAAgB;AAC5C,yBAAmB,UAAU;AAC7B,YAAM,WAAW,MAAM,OAAO,aAAa;AAAA,QACzC,GAAG;AAAA,QACH,aAAa,gBAAgB;AAAA,MAC/B,CAAC;AAED,uBAAiB,SAAS,UAAU;AAClC,YACE,MAAM,UAAU,sBAChB,MAAM,UAAU,qBAChB;AACA,sBAAY,YAAY,YAAY,MAAM,IAAI,CAAC;AAAA,QACjD,WAAW,MAAM,UAAU,WAAW;AACpC,uBAAa,MAAM,KAAK,gBAAgB,CAAC,CAAC;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,QAAQ,aAAa;AAAA,EAClC;AAEA,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,mBAAmB,SAAS;AAC9B,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/useLangGraphRuntime.js

@@ -0,0 +1,195 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  useExternalMessageConverter,
+  useExternalStoreRuntime,
+  useThread,
+  useThreadListItemRuntime
+} from "@assistant-ui/react";
+import { convertLangChainMessages } from "./convertLangChainMessages";
+import {
+  useLangGraphMessages
+} from "./useLangGraphMessages";
+import { appendLangChainChunk } from "./appendLangChainChunk";
+const getPendingToolCalls = (messages) => {
+  const pendingToolCalls = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    if (message.type === "ai") {
+      for (const toolCall of message.tool_calls ?? []) {
+        pendingToolCalls.set(toolCall.id, toolCall);
+      }
+    }
+    if (message.type === "tool") {
+      pendingToolCalls.delete(message.tool_call_id);
+    }
+  }
+  return [...pendingToolCalls.values()];
+};
+const getMessageContent = (msg) => {
+  const allContent = [
+    ...msg.content,
+    ...msg.attachments?.flatMap((a) => a.content) ?? []
+  ];
+  const content = allContent.map((part) => {
+    const type = part.type;
+    switch (type) {
+      case "text":
+        return { type: "text", text: part.text };
+      case "image":
+        return { type: "image_url", image_url: { url: part.image } };
+      case "tool-call":
+        throw new Error("Tool call appends are not supported.");
+      default:
+        const _exhaustiveCheck = type;
+        throw new Error(
+          `Unsupported append content part type: ${_exhaustiveCheck}`
+        );
+    }
+  });
+  if (content.length === 1 && content[0]?.type === "text") {
+    return content[0].text ?? "";
+  }
+  return content;
+};
+const symbolLangGraphRuntimeExtras = Symbol("langgraph-runtime-extras");
+const asLangGraphRuntimeExtras = (extras) => {
+  if (typeof extras !== "object" || extras == null || !(symbolLangGraphRuntimeExtras in extras))
+    throw new Error(
+      "This method can only be called when you are using useLangGraphRuntime"
+    );
+  return extras;
+};
+const useLangGraphInterruptState = () => {
+  const { interrupt } = useThread((t) => asLangGraphRuntimeExtras(t.extras));
+  return interrupt;
+};
+const useLangGraphSend = () => {
+  const { send } = useThread((t) => asLangGraphRuntimeExtras(t.extras));
+  return send;
+};
+const useLangGraphSendCommand = () => {
+  const send = useLangGraphSend();
+  return (command) => send([], { command });
+};
+const useLangGraphRuntime = ({
+  autoCancelPendingToolCalls,
+  adapters: { attachments, feedback, speech } = {},
+  unstable_allowCancellation,
+  stream,
+  threadId,
+  onSwitchToNewThread,
+  onSwitchToThread
+}) => {
+  const {
+    interrupt,
+    setInterrupt,
+    messages,
+    sendMessage,
+    cancel,
+    setMessages
+  } = useLangGraphMessages({
+    appendMessage: appendLangChainChunk,
+    stream
+  });
+  const [isRunning, setIsRunning] = useState(false);
+  const handleSendMessage = async (messages2, config) => {
+    try {
+      setIsRunning(true);
+      await sendMessage(messages2, config);
+    } catch (error) {
+      console.error("Error streaming messages:", error);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+  const threadMessages = useExternalMessageConverter({
+    callback: convertLangChainMessages,
+    messages,
+    isRunning
+  });
+  const switchToThread = !onSwitchToThread ? void 0 : async (externalId) => {
+    const { messages: messages2, interrupts } = await onSwitchToThread(externalId);
+    setMessages(messages2);
+    setInterrupt(interrupts?.[0]);
+  };
+  const threadList = {
+    threadId,
+    onSwitchToNewThread: !onSwitchToNewThread ? void 0 : async () => {
+      await onSwitchToNewThread();
+      setMessages([]);
+    },
+    onSwitchToThread: switchToThread
+  };
+  const loadingRef = useRef(false);
+  const threadListItemRuntime = useThreadListItemRuntime({ optional: true });
+  useEffect(() => {
+    if (!threadListItemRuntime || !switchToThread || loadingRef.current) return;
+    const externalId = threadListItemRuntime.getState().externalId;
+    if (externalId) {
+      loadingRef.current = true;
+      switchToThread(externalId).finally(() => {
+        loadingRef.current = false;
+      });
+    }
+  }, []);
+  return useExternalStoreRuntime({
+    isRunning,
+    messages: threadMessages,
+    adapters: {
+      attachments,
+      feedback,
+      speech,
+      threadList
+    },
+    extras: {
+      [symbolLangGraphRuntimeExtras]: true,
+      interrupt,
+      send: handleSendMessage
+    },
+    onNew: (msg) => {
+      const cancellations = autoCancelPendingToolCalls !== false ? getPendingToolCalls(messages).map(
+        (t) => ({
+          type: "tool",
+          name: t.name,
+          tool_call_id: t.id,
+          content: JSON.stringify({ cancelled: true })
+        })
+      ) : [];
+      return handleSendMessage(
+        [
+          ...cancellations,
+          {
+            type: "human",
+            content: getMessageContent(msg)
+          }
+        ],
+        {
+          runConfig: msg.runConfig
+        }
+      );
+    },
+    onAddToolResult: async ({ toolCallId, toolName, result }) => {
+      await handleSendMessage(
+        [
+          {
+            type: "tool",
+            name: toolName,
+            tool_call_id: toolCallId,
+            content: JSON.stringify(result)
+          }
+        ],
+        // TODO reuse runconfig here!
+        {}
+      );
+    },
+    onCancel: unstable_allowCancellation ? async () => {
+      cancel();
+    } : void 0
+  });
+};
+export {
+  useLangGraphInterruptState,
+  useLangGraphRuntime,
+  useLangGraphSend,
+  useLangGraphSendCommand
+};
+//# sourceMappingURL=useLangGraphRuntime.js.map

package/dist/useLangGraphRuntime.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useLangGraphRuntime.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { LangChainMessage, LangChainToolCall } from \"./types\";\nimport {\n  useExternalMessageConverter,\n  useExternalStoreRuntime,\n  useThread,\n  useThreadListItemRuntime,\n} from \"@assistant-ui/react\";\nimport { convertLangChainMessages } from \"./convertLangChainMessages\";\nimport {\n  LangGraphCommand,\n  LangGraphInterruptState,\n  LangGraphSendMessageConfig,\n  LangGraphStreamCallback,\n  useLangGraphMessages,\n} from \"./useLangGraphMessages\";\nimport { AttachmentAdapter } from \"@assistant-ui/react\";\nimport { AppendMessage } from \"@assistant-ui/react\";\nimport { ExternalStoreAdapter } from \"@assistant-ui/react\";\nimport { FeedbackAdapter } from \"@assistant-ui/react\";\nimport { SpeechSynthesisAdapter } from \"@assistant-ui/react\";\nimport { appendLangChainChunk } from \"./appendLangChainChunk\";\n\nconst getPendingToolCalls = (messages: LangChainMessage[]) => {\n  const pendingToolCalls = new Map<string, LangChainToolCall>();\n  for (const message of messages) {\n    if (message.type === \"ai\") {\n      for (const toolCall of message.tool_calls ?? []) {\n        pendingToolCalls.set(toolCall.id, toolCall);\n      }\n    }\n    if (message.type === \"tool\") {\n      pendingToolCalls.delete(message.tool_call_id);\n    }\n  }\n\n  return [...pendingToolCalls.values()];\n};\n\nconst getMessageContent = (msg: AppendMessage) => {\n  const allContent = [\n    ...msg.content,\n    ...(msg.attachments?.flatMap((a) => a.content) ?? []),\n  ];\n  const content = allContent.map((part) => {\n    const type = part.type;\n    switch (type) {\n      case \"text\":\n        return { type: \"text\" as const, text: part.text };\n      case \"image\":\n        return { type: \"image_url\" as const, image_url: { url: part.image } };\n\n      case \"tool-call\":\n        throw new Error(\"Tool call appends are not supported.\");\n\n      default:\n        const _exhaustiveCheck: \"reasoning\" | \"source\" | \"file\" | \"audio\" =\n          type;\n        throw new Error(\n          `Unsupported append content part type: ${_exhaustiveCheck}`,\n        );\n    }\n  });\n\n  if (content.length === 1 && content[0]?.type === \"text\") {\n    return content[0].text ?? \"\";\n  }\n\n  return content;\n};\n\nconst symbolLangGraphRuntimeExtras = Symbol(\"langgraph-runtime-extras\");\ntype LangGraphRuntimeExtras = {\n  [symbolLangGraphRuntimeExtras]: true;\n  send: (\n    messages: LangChainMessage[],\n    config: LangGraphSendMessageConfig,\n  ) => Promise<void>;\n  interrupt: LangGraphInterruptState | undefined;\n};\n\nconst asLangGraphRuntimeExtras = (extras: unknown): LangGraphRuntimeExtras => {\n  if (\n    typeof extras !== \"object\" ||\n    extras == null ||\n    !(symbolLangGraphRuntimeExtras in extras)\n  )\n    throw new Error(\n      \"This method can only be called when you are using useLangGraphRuntime\",\n    );\n\n  return extras as LangGraphRuntimeExtras;\n};\n\nexport const useLangGraphInterruptState = () => {\n  const { interrupt } = useThread((t) => asLangGraphRuntimeExtras(t.extras));\n  return interrupt;\n};\n\nexport const useLangGraphSend = () => {\n  const { send } = useThread((t) => asLangGraphRuntimeExtras(t.extras));\n  return send;\n};\n\nexport const useLangGraphSendCommand = () => {\n  const send = useLangGraphSend();\n  return (command: LangGraphCommand) => send([], { command });\n};\n\nexport const useLangGraphRuntime = ({\n  autoCancelPendingToolCalls,\n  adapters: { attachments, feedback, speech } = {},\n  unstable_allowCancellation,\n  stream,\n  threadId,\n  onSwitchToNewThread,\n  onSwitchToThread,\n}: {\n  /**\n   * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.\n   */\n  threadId?: string | undefined;\n  autoCancelPendingToolCalls?: boolean | undefined;\n  unstable_allowCancellation?: boolean | undefined;\n  stream: LangGraphStreamCallback<LangChainMessage>;\n  /**\n   * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.\n   */\n  onSwitchToNewThread?: () => Promise<void> | void;\n  onSwitchToThread?: (threadId: string) => Promise<{\n    messages: LangChainMessage[];\n    interrupts?: LangGraphInterruptState[];\n  }>;\n  adapters?:\n    | {\n        attachments?: AttachmentAdapter;\n        speech?: SpeechSynthesisAdapter;\n        feedback?: FeedbackAdapter;\n      }\n    | undefined;\n}) => {\n  const {\n    interrupt,\n    setInterrupt,\n    messages,\n    sendMessage,\n    cancel,\n    setMessages,\n  } = useLangGraphMessages({\n    appendMessage: appendLangChainChunk,\n    stream,\n  });\n\n  const [isRunning, setIsRunning] = useState(false);\n  const handleSendMessage = async (\n    messages: LangChainMessage[],\n    config: LangGraphSendMessageConfig,\n  ) => {\n    try {\n      setIsRunning(true);\n      await sendMessage(messages, config);\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  const switchToThread = !onSwitchToThread\n    ? undefined\n    : async (externalId: string) => {\n        const { messages, interrupts } = await onSwitchToThread(externalId);\n        setMessages(messages);\n        setInterrupt(interrupts?.[0]);\n      };\n\n  const threadList: NonNullable<\n    ExternalStoreAdapter[\"adapters\"]\n  >[\"threadList\"] = {\n    threadId,\n    onSwitchToNewThread: !onSwitchToNewThread\n      ? undefined\n      : async () => {\n          await onSwitchToNewThread();\n          setMessages([]);\n        },\n    onSwitchToThread: switchToThread,\n  };\n\n  const loadingRef = useRef(false);\n  const threadListItemRuntime = useThreadListItemRuntime({ optional: true });\n  useEffect(() => {\n    if (!threadListItemRuntime || !switchToThread || loadingRef.current) return;\n\n    const externalId = threadListItemRuntime.getState().externalId;\n    if (externalId) {\n      loadingRef.current = true;\n      switchToThread(externalId).finally(() => {\n        loadingRef.current = false;\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useExternalStoreRuntime({\n    isRunning,\n    messages: threadMessages,\n    adapters: {\n      attachments,\n      feedback,\n      speech,\n      threadList,\n    },\n    extras: {\n      [symbolLangGraphRuntimeExtras]: true,\n      interrupt,\n      send: handleSendMessage,\n    } satisfies LangGraphRuntimeExtras,\n    onNew: (msg) => {\n      const cancellations =\n        autoCancelPendingToolCalls !== false\n          ? getPendingToolCalls(messages).map(\n              (t) =>\n                ({\n                  type: \"tool\",\n                  name: t.name,\n                  tool_call_id: t.id,\n                  content: JSON.stringify({ cancelled: true }),\n                }) satisfies LangChainMessage & { type: \"tool\" },\n            )\n          : [];\n\n      return handleSendMessage(\n        [\n          ...cancellations,\n          {\n            type: \"human\",\n            content: getMessageContent(msg),\n          },\n        ],\n        {\n          runConfig: msg.runConfig,\n        },\n      );\n    },\n    onAddToolResult: async ({ toolCallId, toolName, result }) => {\n      // TODO parallel human in the loop calls\n      await handleSendMessage(\n        [\n          {\n            type: \"tool\",\n            name: toolName,\n            tool_call_id: toolCallId,\n            content: JSON.stringify(result),\n          },\n        ],\n        // TODO reuse runconfig here!\n        {},\n      );\n    },\n    onCancel: unstable_allowCancellation\n      ? async () => {\n          cancel();\n        }\n      : undefined,\n  });\n};\n"],"mappings":"AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC;AAAA,EAKE;AAAA,OACK;AAMP,SAAS,4BAA4B;AAErC,MAAM,sBAAsB,CAAC,aAAiC;AAC5D,QAAM,mBAAmB,oBAAI,IAA+B;AAC5D,aAAW,WAAW,UAAU;AAC9B,QAAI,QAAQ,SAAS,MAAM;AACzB,iBAAW,YAAY,QAAQ,cAAc,CAAC,GAAG;AAC/C,yBAAiB,IAAI,SAAS,IAAI,QAAQ;AAAA,MAC5C;AAAA,IACF;AACA,QAAI,QAAQ,SAAS,QAAQ;AAC3B,uBAAiB,OAAO,QAAQ,YAAY;AAAA,IAC9C;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,iBAAiB,OAAO,CAAC;AACtC;AAEA,MAAM,oBAAoB,CAAC,QAAuB;AAChD,QAAM,aAAa;AAAA,IACjB,GAAG,IAAI;AAAA,IACP,GAAI,IAAI,aAAa,QAAQ,CAAC,MAAM,EAAE,OAAO,KAAK,CAAC;AAAA,EACrD;AACA,QAAM,UAAU,WAAW,IAAI,CAAC,SAAS;AACvC,UAAM,OAAO,KAAK;AAClB,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO,EAAE,MAAM,QAAiB,MAAM,KAAK,KAAK;AAAA,MAClD,KAAK;AACH,eAAO,EAAE,MAAM,aAAsB,WAAW,EAAE,KAAK,KAAK,MAAM,EAAE;AAAA,MAEtE,KAAK;AACH,cAAM,IAAI,MAAM,sCAAsC;AAAA,MAExD;AACE,cAAM,mBACJ;AACF,cAAM,IAAI;AAAA,UACR,yCAAyC,gBAAgB;AAAA,QAC3D;AAAA,IACJ;AAAA,EACF,CAAC;AAED,MAAI,QAAQ,WAAW,KAAK,QAAQ,CAAC,GAAG,SAAS,QAAQ;AACvD,WAAO,QAAQ,CAAC,EAAE,QAAQ;AAAA,EAC5B;AAEA,SAAO;AACT;AAEA,MAAM,+BAA+B,OAAO,0BAA0B;AAUtE,MAAM,2BAA2B,CAAC,WAA4C;AAC5E,MACE,OAAO,WAAW,YAClB,UAAU,QACV,EAAE,gCAAgC;AAElC,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAEF,SAAO;AACT;AAEO,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,UAAU,IAAI,UAAU,CAAC,MAAM,yBAAyB,EAAE,MAAM,CAAC;AACzE,SAAO;AACT;AAEO,MAAM,mBAAmB,MAAM;AACpC,QAAM,EAAE,KAAK,IAAI,UAAU,CAAC,MAAM,yBAAyB,EAAE,MAAM,CAAC;AACpE,SAAO;AACT;AAEO,MAAM,0BAA0B,MAAM;AAC3C,QAAM,OAAO,iBAAiB;AAC9B,SAAO,CAAC,YAA8B,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC;AAC5D;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA,UAAU,EAAE,aAAa,UAAU,OAAO,IAAI,CAAC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAuBM;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,qBAAqB;AAAA,IACvB,eAAe;AAAA,IACf;AAAA,EACF,CAAC;AAED,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,oBAAoB,OACxBA,WACA,WACG;AACH,QAAI;AACF,mBAAa,IAAI;AACjB,YAAM,YAAYA,WAAU,MAAM;AAAA,IACpC,SAAS,OAAO;AACd,cAAQ,MAAM,6BAA6B,KAAK;AAAA,IAClD,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,iBAAiB,4BAA4B;AAAA,IACjD,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB,CAAC,mBACpB,SACA,OAAO,eAAuB;AAC5B,UAAM,EAAE,UAAAA,WAAU,WAAW,IAAI,MAAM,iBAAiB,UAAU;AAClE,gBAAYA,SAAQ;AACpB,iBAAa,aAAa,CAAC,CAAC;AAAA,EAC9B;AAEJ,QAAM,aAEY;AAAA,IAChB;AAAA,IACA,qBAAqB,CAAC,sBAClB,SACA,YAAY;AACV,YAAM,oBAAoB;AAC1B,kBAAY,CAAC,CAAC;AAAA,IAChB;AAAA,IACJ,kBAAkB;AAAA,EACpB;AAEA,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,wBAAwB,yBAAyB,EAAE,UAAU,KAAK,CAAC;AACzE,YAAU,MAAM;AACd,QAAI,CAAC,yBAAyB,CAAC,kBAAkB,WAAW,QAAS;AAErE,UAAM,aAAa,sBAAsB,SAAS,EAAE;AACpD,QAAI,YAAY;AACd,iBAAW,UAAU;AACrB,qBAAe,UAAU,EAAE,QAAQ,MAAM;AACvC,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SAAO,wBAAwB;AAAA,IAC7B;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,CAAC,4BAA4B,GAAG;AAAA,MAChC;AAAA,MACA,MAAM;AAAA,IACR;AAAA,IACA,OAAO,CAAC,QAAQ;AACd,YAAM,gBACJ,+BAA+B,QAC3B,oBAAoB,QAAQ,EAAE;AAAA,QAC5B,CAAC,OACE;AAAA,UACC,MAAM;AAAA,UACN,MAAM,EAAE;AAAA,UACR,cAAc,EAAE;AAAA,UAChB,SAAS,KAAK,UAAU,EAAE,WAAW,KAAK,CAAC;AAAA,QAC7C;AAAA,MACJ,IACA,CAAC;AAEP,aAAO;AAAA,QACL;AAAA,UACE,GAAG;AAAA,UACH;AAAA,YACE,MAAM;AAAA,YACN,SAAS,kBAAkB,GAAG;AAAA,UAChC;AAAA,QACF;AAAA,QACA;AAAA,UACE,WAAW,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB,OAAO,EAAE,YAAY,UAAU,OAAO,MAAM;AAE3D,YAAM;AAAA,QACJ;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,MAAM;AAAA,YACN,cAAc;AAAA,YACd,SAAS,KAAK,UAAU,MAAM;AAAA,UAChC;AAAA,QACF;AAAA;AAAA,QAEA,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,UAAU,6BACN,YAAY;AACV,aAAO;AAAA,IACT,IACA;AAAA,EACN,CAAC;AACH;","names":["messages"]}

package/package.json

@@ -1,36 +1,31 @@
 {
   "name": "@assistant-ui/react-langgraph",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.mjs"
-      },
-      "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
+      "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",
+    "src",
     "README.md"
   ],
   "sideEffects": false,
   "dependencies": {
-    "assistant-stream": "^0.1.7",
+    "assistant-stream": "^0.2.0",
     "uuid": "^11.1.0",
     "zod": "^3.24.3"
   },
   "peerDependencies": {
-    "@assistant-ui/react": "^0.9.6",
+    "@assistant-ui/react": "^0.10.1",
     "@types/react": "*",
+    "assistant-stream": "^0.2.1",
     "react": "^18 || ^19 || ^19.0.0-rc"
   },
   "peerDependenciesMeta": {
@@ -39,9 +34,14 @@
     }
   },
   "devDependencies": {
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/uuid": "^10.0.0",
+    "eslint": "^9",
     "eslint-config-next": "15.3.1",
-    "tsup": "8.4.0",
-    "@assistant-ui/react": "0.9.6",
+    "react": "^19.1.0",
+    "tsx": "^4.19.3",
+    "@assistant-ui/tsbuildutils": "0.0.1",
     "@assistant-ui/tsconfig": "0.0.0"
   },
   "publishConfig": {
@@ -51,12 +51,12 @@
   "homepage": "https://www.assistant-ui.com/",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/assistant-ui/assistant-ui.git"
+    "url": "https://github.com/assistant-ui/assistant-ui/tree/main/packages/react-langgraph"
   },
   "bugs": {
     "url": "https://github.com/assistant-ui/assistant-ui/issues"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --sourcemap --clean"
+    "build": "tsx scripts/build.mts"
   }
 }

package/src/LangGraphMessageAccumulator.ts

@@ -0,0 +1,63 @@
+import { v4 as uuidv4 } from "uuid";
+
+export type LangGraphMessagesEvent<TMessage> = {
+  event:
+    | "messages"
+    | "messages/partial"
+    | "messages/complete"
+    | "metadata"
+    | "updates"
+    | string;
+  data: TMessage[] | any;
+};
+
+export type LangGraphStateAccumulatorConfig<TMessage> = {
+  initialMessages?: TMessage[];
+  appendMessage?: (prev: TMessage | undefined, curr: TMessage) => TMessage;
+};
+
+export class LangGraphMessageAccumulator<TMessage extends { id?: string }> {
+  private messagesMap = new Map<string, TMessage>();
+  private appendMessage: (
+    prev: TMessage | undefined,
+    curr: TMessage,
+  ) => TMessage;
+
+  constructor({
+    initialMessages = [],
+    appendMessage = ((_: TMessage | undefined, curr: TMessage) => curr) as (
+      prev: TMessage | undefined,
+      curr: TMessage,
+    ) => TMessage,
+  }: LangGraphStateAccumulatorConfig<TMessage> = {}) {
+    this.appendMessage = appendMessage;
+    this.addMessages(initialMessages);
+  }
+
+  private ensureMessageId(message: TMessage): TMessage {
+    return message.id ? message : { ...message, id: uuidv4() };
+  }
+
+  public addMessages(newMessages: TMessage[]) {
+    if (newMessages.length === 0) return this.getMessages();
+
+    for (const message of newMessages.map(this.ensureMessageId)) {
+      const previous = message.id
+        ? this.messagesMap.get(message.id)
+        : undefined;
+      this.messagesMap.set(
+        message.id ?? uuidv4(),
+        this.appendMessage(previous, message),
+      );
+    }
+    return this.getMessages();
+  }
+
+  public getMessages(): TMessage[] {
+    return [...this.messagesMap.values()];
+  }
+
+  public clear() {
+    this.messagesMap.clear();
+  }
+}

package/src/appendLangChainChunk.ts

@@ -0,0 +1,55 @@
+import { LangChainMessage, LangChainMessageChunk } from "./types";
+import { parsePartialJsonObject } from "assistant-stream/utils";
+
+export const appendLangChainChunk = (
+  prev: LangChainMessage | undefined,
+  curr: LangChainMessage | LangChainMessageChunk,
+): LangChainMessage => {
+  if (curr.type !== "AIMessageChunk") {
+    return curr;
+  }
+
+  if (!prev || prev.type !== "ai") {
+    return {
+      ...curr,
+      type: curr.type.replace("MessageChunk", "").toLowerCase(),
+    } as LangChainMessage;
+  }
+
+  const newContent =
+    typeof prev.content === "string"
+      ? [{ type: "text" as const, text: prev.content }]
+      : [...prev.content];
+
+  for (const chunk of curr.content) {
+    if (chunk.type === "text") {
+      const existing = newContent[chunk.index] ?? { type: "text", text: "" };
+      if (existing.type !== "text") throw new Error("");
+      newContent[chunk.index] = {
+        ...existing,
+        ...chunk,
+        text: existing.text + chunk.text,
+      };
+    }
+  }
+
+  const newToolCalls = [...(prev.tool_calls ?? [])];
+  for (const chunk of curr.tool_call_chunks) {
+    const existing = newToolCalls[chunk.index - 1] ?? { argsText: "" };
+    const newArgsText = existing.argsText + chunk.args;
+    newToolCalls[chunk.index - 1] = {
+      ...chunk,
+      ...existing,
+      argsText: newArgsText,
+      args:
+        parsePartialJsonObject(newArgsText) ??
+        ("args" in existing ? existing.args : {}),
+    };
+  }
+
+  return {
+    ...prev,
+    content: newContent,
+    tool_calls: newToolCalls,
+  };
+};

package/src/convertLangChainMessages.ts

@@ -0,0 +1,81 @@
+"use client";
+
+import { useExternalMessageConverter } from "@assistant-ui/react";
+import { LangChainMessage } from "./types";
+import { ToolCallContentPart } from "@assistant-ui/react";
+import { ThreadUserMessage } from "@assistant-ui/react";
+
+const contentToParts = (content: LangChainMessage["content"]) => {
+  if (typeof content === "string")
+    return [{ type: "text" as const, text: content }];
+  return content
+    .map((part): ThreadUserMessage["content"][number] | null => {
+      const type = part.type;
+      switch (type) {
+        case "text":
+          return { type: "text", text: part.text };
+        case "image_url":
+          if (typeof part.image_url === "string") {
+            return { type: "image", image: part.image_url };
+          } else {
+            return {
+              type: "image",
+              image: part.image_url.url,
+            };
+          }
+
+        case "tool_use":
+          return null;
+        default:
+          const _exhaustiveCheck: never = type;
+          throw new Error(`Unknown content part type: ${_exhaustiveCheck}`);
+      }
+    })
+    .filter((a) => a !== null);
+};
+
+export const convertLangChainMessages: useExternalMessageConverter.Callback<
+  LangChainMessage
+> = (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: contentToParts(message.content),
+      };
+    case "ai":
+      return {
+        role: "assistant",
+        id: message.id,
+        content: [
+          ...contentToParts(message.content),
+          ...(message.tool_calls?.map(
+            (chunk): ToolCallContentPart => ({
+              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,
+        artifact: message.artifact,
+      };
+  }
+};

package/src/index.ts

@@ -0,0 +1,31 @@
+export {
+  useLangGraphRuntime,
+  useLangGraphSend,
+  useLangGraphSendCommand,
+  useLangGraphInterruptState,
+} from "./useLangGraphRuntime";
+
+export {
+  useLangGraphMessages,
+  type LangGraphInterruptState,
+  type LangGraphCommand,
+  type LangGraphSendMessageConfig,
+  type LangGraphStreamCallback,
+  type LangGraphMessagesEvent,
+} from "./useLangGraphMessages";
+export { convertLangChainMessages } from "./convertLangChainMessages";
+
+/**
+ * @deprecated Use `convertLangChainMessages` instead.
+ */
+export { convertLangChainMessages as convertLangchainMessages } from "./convertLangChainMessages";
+
+export type {
+  LangChainMessage,
+  LangChainEvent,
+  LangChainToolCall,
+  LangChainToolCallChunk,
+} from "./types";
+
+export { LangGraphMessageAccumulator } from "./LangGraphMessageAccumulator";
+export { appendLangChainChunk } from "./appendLangChainChunk";

package/src/types.ts

@@ -0,0 +1,76 @@
+import { ReadonlyJSONObject } from "assistant-stream/utils";
+
+export type LangChainToolCallChunk = {
+  index: number;
+  id: string;
+  name: string;
+  args: string;
+};
+
+export type LangChainToolCall = {
+  id: string;
+  name: string;
+  argsText: string;
+  args: ReadonlyJSONObject;
+};
+
+type MessageContentText = {
+  type: "text";
+  text: string;
+};
+
+type MessageContentImageUrl = {
+  type: "image_url";
+  image_url: string | { url: string };
+};
+
+type MessageContentToolUse = {
+  type: "tool_use";
+};
+
+type UserMessageContentComplex = MessageContentText | MessageContentImageUrl;
+type AssistantMessageContentComplex =
+  | MessageContentText
+  | MessageContentToolUse;
+
+type UserMessageContent = string | UserMessageContentComplex[];
+type AssistantMessageContent = string | AssistantMessageContentComplex[];
+
+export type LangChainMessage =
+  | {
+      id?: string;
+      type: "system";
+      content: string;
+    }
+  | {
+      id?: string;
+      type: "human";
+      content: UserMessageContent;
+    }
+  | {
+      id?: string;
+      type: "tool";
+      content: string;
+      tool_call_id: string;
+      name: string;
+      artifact?: any;
+    }
+  | {
+      id?: string;
+      type: "ai";
+      content: AssistantMessageContent;
+      tool_call_chunks?: LangChainToolCallChunk[];
+      tool_calls?: LangChainToolCall[];
+    };
+
+export type LangChainMessageChunk = {
+  id: string;
+  type: "AIMessageChunk";
+  content: (AssistantMessageContentComplex & { index: number })[];
+  tool_call_chunks: LangChainToolCallChunk[];
+};
+
+export type LangChainEvent = {
+  event: "messages/partial" | "messages/complete";
+  data: LangChainMessage[];
+};