@assistant-ui/react-langgraph 0.4.5 → 0.5.1

package/src/useLangGraphMessages.ts

@@ -0,0 +1,102 @@
+import { useState, useCallback, useRef } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { LangGraphMessageAccumulator } from "./LangGraphMessageAccumulator";
+
+export type LangGraphCommand = {
+  resume: string;
+};
+
+export type LangGraphSendMessageConfig = {
+  command?: LangGraphCommand;
+  runConfig?: unknown;
+};
+
+export type LangGraphMessagesEvent<TMessage> = {
+  event:
+    | "messages"
+    | "messages/partial"
+    | "messages/complete"
+    | "metadata"
+    | "updates"
+    | string;
+  data: TMessage[] | any;
+};
+export type LangGraphStreamCallback<TMessage> = (
+  messages: TMessage[],
+  config: LangGraphSendMessageConfig & { abortSignal: AbortSignal },
+) =>
+  | Promise<AsyncGenerator<LangGraphMessagesEvent<TMessage>>>
+  | AsyncGenerator<LangGraphMessagesEvent<TMessage>>;
+
+export type LangGraphInterruptState = {
+  value?: any;
+  resumable?: boolean;
+  when: string;
+  ns?: string[];
+};
+
+const DEFAULT_APPEND_MESSAGE = <TMessage>(
+  _: TMessage | undefined,
+  curr: TMessage,
+) => curr;
+
+export const useLangGraphMessages = <TMessage extends { id?: string }>({
+  stream,
+  appendMessage = DEFAULT_APPEND_MESSAGE,
+}: {
+  stream: LangGraphStreamCallback<TMessage>;
+  appendMessage?: (prev: TMessage | undefined, curr: TMessage) => TMessage;
+}) => {
+  const [interrupt, setInterrupt] = useState<
+    LangGraphInterruptState | undefined
+  >();
+  const [messages, setMessages] = useState<TMessage[]>([]);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const sendMessage = useCallback(
+    async (newMessages: TMessage[], config: LangGraphSendMessageConfig) => {
+      // ensure all messages have an ID
+      newMessages = newMessages.map((m) => (m.id ? m : { ...m, id: uuidv4() }));
+
+      const accumulator = new LangGraphMessageAccumulator({
+        initialMessages: messages,
+        appendMessage,
+      });
+      setMessages(accumulator.addMessages(newMessages));
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      const response = await stream(newMessages, {
+        ...config,
+        abortSignal: abortController.signal,
+      });
+
+      for await (const chunk of response) {
+        if (
+          chunk.event === "messages/partial" ||
+          chunk.event === "messages/complete"
+        ) {
+          setMessages(accumulator.addMessages(chunk.data));
+        } else if (chunk.event === "updates") {
+          setInterrupt(chunk.data.__interrupt__?.[0]);
+        }
+      }
+    },
+    [messages, stream, appendMessage],
+  );
+
+  const cancel = useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+  }, [abortControllerRef]);
+
+  return {
+    interrupt,
+    messages,
+    sendMessage,
+    cancel,
+    setInterrupt,
+    setMessages,
+  };
+};

package/src/useLangGraphRuntime.ts

@@ -0,0 +1,273 @@
+import { useEffect, useRef, useState } from "react";
+import { LangChainMessage, LangChainToolCall } from "./types";
+import {
+  useExternalMessageConverter,
+  useExternalStoreRuntime,
+  useThread,
+  useThreadListItemRuntime,
+} from "@assistant-ui/react";
+import { convertLangChainMessages } from "./convertLangChainMessages";
+import {
+  LangGraphCommand,
+  LangGraphInterruptState,
+  LangGraphSendMessageConfig,
+  LangGraphStreamCallback,
+  useLangGraphMessages,
+} from "./useLangGraphMessages";
+import { AttachmentAdapter } from "@assistant-ui/react";
+import { AppendMessage } from "@assistant-ui/react";
+import { ExternalStoreAdapter } from "@assistant-ui/react";
+import { FeedbackAdapter } from "@assistant-ui/react";
+import { SpeechSynthesisAdapter } from "@assistant-ui/react";
+import { appendLangChainChunk } from "./appendLangChainChunk";
+
+const getPendingToolCalls = (messages: LangChainMessage[]) => {
+  const pendingToolCalls = new Map<string, LangChainToolCall>();
+  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: AppendMessage) => {
+  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" as const, text: part.text };
+      case "image":
+        return { type: "image_url" as const, image_url: { url: part.image } };
+
+      case "tool-call":
+        throw new Error("Tool call appends are not supported.");
+
+      default:
+        const _exhaustiveCheck: "reasoning" | "source" | "file" | "audio" =
+          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");
+type LangGraphRuntimeExtras = {
+  [symbolLangGraphRuntimeExtras]: true;
+  send: (
+    messages: LangChainMessage[],
+    config: LangGraphSendMessageConfig,
+  ) => Promise<void>;
+  interrupt: LangGraphInterruptState | undefined;
+};
+
+const asLangGraphRuntimeExtras = (extras: unknown): LangGraphRuntimeExtras => {
+  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 as LangGraphRuntimeExtras;
+};
+
+export const useLangGraphInterruptState = () => {
+  const { interrupt } = useThread((t) => asLangGraphRuntimeExtras(t.extras));
+  return interrupt;
+};
+
+export const useLangGraphSend = () => {
+  const { send } = useThread((t) => asLangGraphRuntimeExtras(t.extras));
+  return send;
+};
+
+export const useLangGraphSendCommand = () => {
+  const send = useLangGraphSend();
+  return (command: LangGraphCommand) => send([], { command });
+};
+
+export const useLangGraphRuntime = ({
+  autoCancelPendingToolCalls,
+  adapters: { attachments, feedback, speech } = {},
+  unstable_allowCancellation,
+  stream,
+  threadId,
+  onSwitchToNewThread,
+  onSwitchToThread,
+}: {
+  /**
+   * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.
+   */
+  threadId?: string | undefined;
+  autoCancelPendingToolCalls?: boolean | undefined;
+  unstable_allowCancellation?: boolean | undefined;
+  stream: LangGraphStreamCallback<LangChainMessage>;
+  /**
+   * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.
+   */
+  onSwitchToNewThread?: () => Promise<void> | void;
+  onSwitchToThread?: (threadId: string) => Promise<{
+    messages: LangChainMessage[];
+    interrupts?: LangGraphInterruptState[];
+  }>;
+  adapters?:
+    | {
+        attachments?: AttachmentAdapter;
+        speech?: SpeechSynthesisAdapter;
+        feedback?: FeedbackAdapter;
+      }
+    | undefined;
+}) => {
+  const {
+    interrupt,
+    setInterrupt,
+    messages,
+    sendMessage,
+    cancel,
+    setMessages,
+  } = useLangGraphMessages({
+    appendMessage: appendLangChainChunk,
+    stream,
+  });
+
+  const [isRunning, setIsRunning] = useState(false);
+  const handleSendMessage = async (
+    messages: LangChainMessage[],
+    config: LangGraphSendMessageConfig,
+  ) => {
+    try {
+      setIsRunning(true);
+      await sendMessage(messages, config);
+    } catch (error) {
+      console.error("Error streaming messages:", error);
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  const threadMessages = useExternalMessageConverter({
+    callback: convertLangChainMessages,
+    messages,
+    isRunning,
+  });
+
+  const switchToThread = !onSwitchToThread
+    ? undefined
+    : async (externalId: string) => {
+        const { messages, interrupts } = await onSwitchToThread(externalId);
+        setMessages(messages);
+        setInterrupt(interrupts?.[0]);
+      };
+
+  const threadList: NonNullable<
+    ExternalStoreAdapter["adapters"]
+  >["threadList"] = {
+    threadId,
+    onSwitchToNewThread: !onSwitchToNewThread
+      ? undefined
+      : 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;
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return useExternalStoreRuntime({
+    isRunning,
+    messages: threadMessages,
+    adapters: {
+      attachments,
+      feedback,
+      speech,
+      threadList,
+    },
+    extras: {
+      [symbolLangGraphRuntimeExtras]: true,
+      interrupt,
+      send: handleSendMessage,
+    } satisfies LangGraphRuntimeExtras,
+    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 }),
+                }) satisfies LangChainMessage & { type: "tool" },
+            )
+          : [];
+
+      return handleSendMessage(
+        [
+          ...cancellations,
+          {
+            type: "human",
+            content: getMessageContent(msg),
+          },
+        ],
+        {
+          runConfig: msg.runConfig,
+        },
+      );
+    },
+    onAddToolResult: async ({ toolCallId, toolName, result }) => {
+      // TODO parallel human in the loop calls
+      await handleSendMessage(
+        [
+          {
+            type: "tool",
+            name: toolName,
+            tool_call_id: toolCallId,
+            content: JSON.stringify(result),
+          },
+        ],
+        // TODO reuse runconfig here!
+        {},
+      );
+    },
+    onCancel: unstable_allowCancellation
+      ? async () => {
+          cancel();
+        }
+      : undefined,
+  });
+};

package/dist/index.d.mts

@@ -1,150 +0,0 @@
-import * as _assistant_ui_react_internal from '@assistant-ui/react/internal';
-import { ReadonlyJSONObject } from 'assistant-stream/utils';
-import * as react from 'react';
-import { AttachmentAdapter, SpeechSynthesisAdapter, FeedbackAdapter, useExternalMessageConverter } from '@assistant-ui/react';
-
-type LangChainToolCallChunk = {
-    index: number;
-    id: string;
-    name: string;
-    args: string;
-};
-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[];
-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[];
-};
-type LangChainMessageChunk = {
-    id: string;
-    type: "AIMessageChunk";
-    content: (AssistantMessageContentComplex & {
-        index: number;
-    })[];
-    tool_call_chunks: LangChainToolCallChunk[];
-};
-type LangChainEvent = {
-    event: "messages/partial" | "messages/complete";
-    data: LangChainMessage[];
-};
-
-type LangGraphCommand = {
-    resume: string;
-};
-type LangGraphSendMessageConfig = {
-    command?: LangGraphCommand;
-    runConfig?: unknown;
-};
-type LangGraphMessagesEvent<TMessage> = {
-    event: "messages" | "messages/partial" | "messages/complete" | "metadata" | "updates" | string;
-    data: TMessage[] | any;
-};
-type LangGraphStreamCallback<TMessage> = (messages: TMessage[], config: LangGraphSendMessageConfig & {
-    abortSignal: AbortSignal;
-}) => Promise<AsyncGenerator<LangGraphMessagesEvent<TMessage>>> | AsyncGenerator<LangGraphMessagesEvent<TMessage>>;
-type LangGraphInterruptState = {
-    value?: any;
-    resumable?: boolean;
-    when: string;
-    ns?: string[];
-};
-declare const useLangGraphMessages: <TMessage extends {
-    id?: string;
-}>({ stream, appendMessage, }: {
-    stream: LangGraphStreamCallback<TMessage>;
-    appendMessage?: (prev: TMessage | undefined, curr: TMessage) => TMessage;
-}) => {
-    interrupt: LangGraphInterruptState | undefined;
-    messages: TMessage[];
-    sendMessage: (newMessages: TMessage[], config: LangGraphSendMessageConfig) => Promise<void>;
-    cancel: () => void;
-    setInterrupt: react.Dispatch<react.SetStateAction<LangGraphInterruptState | undefined>>;
-    setMessages: react.Dispatch<react.SetStateAction<TMessage[]>>;
-};
-
-declare const useLangGraphInterruptState: () => LangGraphInterruptState | undefined;
-declare const useLangGraphSend: () => (messages: LangChainMessage[], config: LangGraphSendMessageConfig) => Promise<void>;
-declare const useLangGraphSendCommand: () => (command: LangGraphCommand) => Promise<void>;
-declare const useLangGraphRuntime: ({ autoCancelPendingToolCalls, adapters: { attachments, feedback, speech }, unstable_allowCancellation, stream, threadId, onSwitchToNewThread, onSwitchToThread, }: {
-    /**
-     * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.
-     */
-    threadId?: string | undefined;
-    autoCancelPendingToolCalls?: boolean | undefined;
-    unstable_allowCancellation?: boolean | undefined;
-    stream: LangGraphStreamCallback<LangChainMessage>;
-    /**
-     * @deprecated For thread management use `useCloudThreadListRuntime` instead. This option will be removed in a future version.
-     */
-    onSwitchToNewThread?: () => Promise<void> | void;
-    onSwitchToThread?: (threadId: string) => Promise<{
-        messages: LangChainMessage[];
-        interrupts?: LangGraphInterruptState[];
-    }>;
-    adapters?: {
-        attachments?: AttachmentAdapter;
-        speech?: SpeechSynthesisAdapter;
-        feedback?: FeedbackAdapter;
-    } | undefined;
-}) => _assistant_ui_react_internal.AssistantRuntimeImpl;
-
-declare const convertLangChainMessages: useExternalMessageConverter.Callback<LangChainMessage>;
-
-type LangGraphStateAccumulatorConfig<TMessage> = {
-    initialMessages?: TMessage[];
-    appendMessage?: (prev: TMessage | undefined, curr: TMessage) => TMessage;
-};
-declare class LangGraphMessageAccumulator<TMessage extends {
-    id?: string;
-}> {
-    private messagesMap;
-    private appendMessage;
-    constructor({ initialMessages, appendMessage, }?: LangGraphStateAccumulatorConfig<TMessage>);
-    private ensureMessageId;
-    addMessages(newMessages: TMessage[]): TMessage[];
-    getMessages(): TMessage[];
-    clear(): void;
-}
-
-declare const appendLangChainChunk: (prev: LangChainMessage | undefined, curr: LangChainMessage | LangChainMessageChunk) => LangChainMessage;
-
-export { type LangChainEvent, type LangChainMessage, type LangChainToolCall, type LangChainToolCallChunk, type LangGraphCommand, type LangGraphInterruptState, LangGraphMessageAccumulator, type LangGraphSendMessageConfig, type LangGraphStreamCallback, appendLangChainChunk, convertLangChainMessages, convertLangChainMessages as convertLangchainMessages, useLangGraphInterruptState, useLangGraphMessages, useLangGraphRuntime, useLangGraphSend, useLangGraphSendCommand };