Merge pull request #75 from langchain-ai/brace/generic-interrupt

feat: Add generic interrupt renderer

src/components/thread/messages/ai.tsx

@@ -12,6 +12,7 @@ import { Fragment } from "react/jsx-runtime";
 import { isAgentInboxInterruptSchema } from "@/lib/agent-inbox-interrupt";
 import { ThreadView } from "../agent-inbox";
 import { useQueryState, parseAsBoolean } from "nuqs";
+import { GenericInterruptView } from "./generic-interrupt";
 
 function CustomComponent({
   message,
@@ -133,6 +134,11 @@ export function AssistantMessage({
           {isAgentInboxInterruptSchema(interrupt?.value) && isLastMessage && (
             <ThreadView interrupt={interrupt.value} />
           )}
+          {interrupt?.value &&
+          !isAgentInboxInterruptSchema(interrupt.value) &&
+          isLastMessage ? (
+            <GenericInterruptView interrupt={interrupt.value} />
+          ) : null}
           <div
             className={cn(
               "flex gap-2 items-center mr-auto transition-opacity",

src/components/thread/messages/generic-interrupt.tsx

@@ -0,0 +1,126 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+function isComplexValue(value: any): boolean {
+  return Array.isArray(value) || (typeof value === "object" && value !== null);
+}
+
+export function GenericInterruptView({
+  interrupt,
+}: {
+  interrupt: Record<string, any> | Record<string, any>[];
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const contentStr = JSON.stringify(interrupt, null, 2);
+  const contentLines = contentStr.split("\n");
+  const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
+
+  // Function to truncate long string values
+  const truncateValue = (value: any): any => {
+    if (typeof value === "string" && value.length > 100) {
+      return value.substring(0, 100) + "...";
+    }
+
+    if (Array.isArray(value) && !isExpanded) {
+      return value.slice(0, 2).map(truncateValue);
+    }
+
+    if (isComplexValue(value) && !isExpanded) {
+      const strValue = JSON.stringify(value, null, 2);
+      if (strValue.length > 100) {
+        // Return plain text for truncated content instead of a JSON object
+        return `Truncated ${strValue.length} characters...`;
+      }
+    }
+
+    return value;
+  };
+
+  // Process entries based on expanded state
+  const processEntries = () => {
+    if (Array.isArray(interrupt)) {
+      return isExpanded ? interrupt : interrupt.slice(0, 5);
+    } else {
+      const entries = Object.entries(interrupt);
+      if (!isExpanded && shouldTruncate) {
+        // When collapsed, process each value to potentially truncate it
+        return entries.map(([key, value]) => [key, truncateValue(value)]);
+      }
+      return entries;
+    }
+  };
+
+  const displayEntries = processEntries();
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          <h3 className="font-medium text-gray-900">Human Interrupt</h3>
+        </div>
+      </div>
+      <motion.div
+        className="min-w-full bg-gray-100"
+        initial={false}
+        animate={{ height: "auto" }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="p-3">
+          <AnimatePresence mode="wait" initial={false}>
+            <motion.div
+              key={isExpanded ? "expanded" : "collapsed"}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.2 }}
+              style={{
+                maxHeight: isExpanded ? "none" : "500px",
+                overflow: "auto",
+              }}
+            >
+              <table className="min-w-full divide-y divide-gray-200">
+                <tbody className="divide-y divide-gray-200">
+                  {displayEntries.map((item, argIdx) => {
+                    const [key, value] = Array.isArray(interrupt)
+                      ? [argIdx.toString(), item]
+                      : (item as [string, any]);
+                    return (
+                      <tr key={argIdx}>
+                        <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                          {key}
+                        </td>
+                        <td className="px-4 py-2 text-sm text-gray-500">
+                          {isComplexValue(value) ? (
+                            <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                              {JSON.stringify(value, null, 2)}
+                            </code>
+                          ) : (
+                            String(value)
+                          )}
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+        {(shouldTruncate ||
+          (Array.isArray(interrupt) && interrupt.length > 5)) && (
+          <motion.button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="w-full py-2 flex items-center justify-center border-t-[1px] border-gray-200 text-gray-500 hover:text-gray-600 hover:bg-gray-50 transition-all ease-in-out duration-200 cursor-pointer"
+            initial={{ scale: 1 }}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            {isExpanded ? <ChevronUp /> : <ChevronDown />}
+          </motion.button>
+        )}
+      </motion.div>
+    </div>
+  );
+}