Merge pull request #25 from langchain-ai/vic/fix-react-warning-and-default-interrupts

feat: default interrupt handling, maintain gen ui interrupt support, and add general gen ui support

Author: nhuang-lc

MIGRATION_ANALYSIS.md

@@ -1,47 +1,47 @@
 "use client";
 
 import React, { useMemo, useState, useCallback } from "react";
-import { RotateCcw } from "lucide-react";
 import { SubAgentIndicator } from "@/app/components/SubAgentIndicator";
 import { ToolCallBox } from "@/app/components/ToolCallBox";
 import { MarkdownContent } from "@/app/components/MarkdownContent";
-import type { SubAgent, ToolCall } from "@/app/types/types";
-import { Interrupt, Message } from "@langchain/langgraph-sdk";
+import type {
+  SubAgent,
+  ToolCall,
+  ActionRequest,
+  ReviewConfig,
+} from "@/app/types/types";
+import { Message } from "@langchain/langgraph-sdk";
 import {
   extractSubAgentContent,
   extractStringFromMessageContent,
-  getInterruptTitle,
 } from "@/app/utils/utils";
 import { cn } from "@/lib/utils";
 
 interface ChatMessageProps {
   message: Message;
   toolCalls: ToolCall[];
-  onRestartFromAIMessage: (message: Message) => void;
-  onRestartFromSubTask: (toolCallId: string) => void;
-  debugMode?: boolean;
-  isLastMessage?: boolean;
   isLoading?: boolean;
-  interrupt?: Interrupt;
+  actionRequestsMap?: Map<string, ActionRequest>;
+  reviewConfigsMap?: Map<string, ReviewConfig>;
   ui?: any[];
   stream?: any;
+  onResumeInterrupt?: (value: any) => void;
+  graphId?: string;
 }
 
 export const ChatMessage = React.memo<ChatMessageProps>(
   ({
     message,
     toolCalls,
-    onRestartFromAIMessage,
-    onRestartFromSubTask,
-    debugMode,
-    isLastMessage,
     isLoading,
-    interrupt,
+    actionRequestsMap,
+    reviewConfigsMap,
     ui,
     stream,
+    onResumeInterrupt,
+    graphId,
   }) => {
     const isUser = message.type === "human";
-    const isAIMessage = message.type === "ai";
     const messageContent = extractStringFromMessageContent(message);
     const hasContent = messageContent && messageContent.trim() !== "";
     const hasToolCalls = toolCalls.length > 0;
@@ -56,10 +56,13 @@ export const ChatMessage = React.memo<ChatMessageProps>(
           );
         })
         .map((toolCall: ToolCall) => {
+          const subagentType = (toolCall.args as Record<string, unknown>)[
+            "subagent_type"
+          ] as string;
           return {
             id: toolCall.id,
             name: toolCall.name,
-            subAgentName: String(toolCall.args["subagent_type"] || ""),
+            subAgentName: subagentType,
             input: toolCall.args,
             output: toolCall.result ? { result: toolCall.result } : undefined,
             status: toolCall.status,
@@ -81,8 +84,6 @@ export const ChatMessage = React.memo<ChatMessageProps>(
       }));
     }, []);
 
-    const interruptTitle = interrupt ? getInterruptTitle(interrupt) : "";
-
     return (
       <div
         className={cn(
@@ -96,7 +97,7 @@ export const ChatMessage = React.memo<ChatMessageProps>(
             isUser ? "max-w-[70%]" : "w-full"
           )}
         >
-          {(hasContent || debugMode) && (
+          {hasContent && (
             <div className={cn("relative flex items-end gap-0")}>
               <div
                 className={cn(
@@ -117,40 +118,30 @@ export const ChatMessage = React.memo<ChatMessageProps>(
                   </p>
                 ) : hasContent ? (
                   <MarkdownContent content={messageContent} />
-                ) : debugMode ? (
-                  <p className="m-0 whitespace-nowrap text-xs italic">
-                    Empty Message
-                  </p>
                 ) : null}
               </div>
-              {debugMode && isAIMessage && !(isLastMessage && isLoading) && (
-                <button
-                  onClick={() => onRestartFromAIMessage(message)}
-                  className="absolute bottom-1 right-1 -scale-x-100 rounded-full bg-black/10 p-1 transition-colors duration-200 hover:bg-black/20"
-                >
-                  <RotateCcw className="h-3 w-3 text-gray-600" />
-                </button>
-              )}
             </div>
           )}
           {hasToolCalls && (
             <div className="mt-4 flex w-full flex-col">
-              {toolCalls.map((toolCall: ToolCall, idx, arr) => {
+              {toolCalls.map((toolCall: ToolCall) => {
                 if (toolCall.name === "task") return null;
-                const uiComponent = ui?.find(
+                const toolCallGenUiComponent = ui?.find(
                   (u) => u.metadata?.tool_call_id === toolCall.id
                 );
-                const isInterrupted =
-                  idx === arr.length - 1 &&
-                  toolCall.name === interruptTitle &&
-                  isLastMessage;
+                const actionRequest = actionRequestsMap?.get(toolCall.name);
+                const reviewConfig = reviewConfigsMap?.get(toolCall.name);
                 return (
                   <ToolCallBox
                     key={toolCall.id}
                     toolCall={toolCall}
-                    uiComponent={uiComponent}
+                    uiComponent={toolCallGenUiComponent}
                     stream={stream}
-                    isInterrupted={isInterrupted}
+                    graphId={graphId}
+                    actionRequest={actionRequest}
+                    reviewConfig={reviewConfig}
+                    onResume={onResumeInterrupt}
+                    isLoading={isLoading}
                   />
                 );
               })}
@@ -171,16 +162,6 @@ export const ChatMessage = React.memo<ChatMessageProps>(
                         isExpanded={isSubAgentExpanded(subAgent.id)}
                       />
                     </div>
-                    <div className="relative h-full min-h-[40px] w-[72px] flex-shrink-0">
-                      {debugMode && subAgent.status === "completed" && (
-                        <button
-                          onClick={() => onRestartFromSubTask(subAgent.id)}
-                          className="absolute bottom-1 right-1 -scale-x-100 rounded-full bg-black/10 p-1 transition-colors duration-200 hover:bg-black/20"
-                        >
-                          <RotateCcw className="h-3 w-3 text-gray-600" />
-                        </button>
-                      )}
-                    </div>
                   </div>
                   {isSubAgentExpanded(subAgent.id) && (
                     <div className="w-full max-w-full">