From 8b9382501e3fd07ad19fdbcd2de55980b89676fc Mon Sep 17 00:00:00 2001
From: Sam Crowder <samecrowder@gmail.com>
Date: Mon, 11 Aug 2025 12:29:42 -0700
Subject: [PATCH] feat: make urls clickable in interrupt (#165)

---
 src/components/thread/messages/ai.tsx         |  2 +-
 .../thread/messages/generic-interrupt.tsx     | 47 +++++++++++++++----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/components/thread/messages/ai.tsx b/src/components/thread/messages/ai.tsx
index af5eac2..77e389e 100644
--- a/src/components/thread/messages/ai.tsx
+++ b/src/components/thread/messages/ai.tsx
@@ -86,7 +86,7 @@ function Interrupt({
         )}
       {interruptValue &&
       !isAgentInboxInterruptSchema(interruptValue) &&
-      isLastMessage ? (
+      (isLastMessage || hasNoAIOrToolMessages) ? (
         <GenericInterruptView interrupt={interruptValue} />
       ) : null}
     </>
diff --git a/src/components/thread/messages/generic-interrupt.tsx b/src/components/thread/messages/generic-interrupt.tsx
index 7eb83eb..22b3452 100644
--- a/src/components/thread/messages/generic-interrupt.tsx
+++ b/src/components/thread/messages/generic-interrupt.tsx
@@ -6,6 +6,39 @@ function isComplexValue(value: any): boolean {
   return Array.isArray(value) || (typeof value === "object" && value !== null);
 }
 
+function isUrl(value: any): boolean {
+  if (typeof value !== "string") return false;
+  try {
+    new URL(value);
+    return value.startsWith("http://") || value.startsWith("https://");
+  } catch {
+    return false;
+  }
+}
+
+function renderInterruptStateItem(value: any): React.ReactNode {
+  if (isComplexValue(value)) {
+    return (
+      <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm">
+        {JSON.stringify(value, null, 2)}
+      </code>
+    );
+  } else if (isUrl(value)) {
+    return (
+      <a
+        href={value}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="break-all text-blue-600 underline hover:text-blue-800"
+      >
+        {value}
+      </a>
+    );
+  } else {
+    return String(value);
+  }
+}
+
 export function GenericInterruptView({
   interrupt,
 }: {
@@ -17,9 +50,13 @@ export function GenericInterruptView({
   const contentLines = contentStr.split("\n");
   const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
 
-  // Function to truncate long string values
+  // Function to truncate long string values (but preserve URLs)
   const truncateValue = (value: any): any => {
     if (typeof value === "string" && value.length > 100) {
+      // Don't truncate URLs so they remain clickable
+      if (isUrl(value)) {
+        return value;
+      }
       return value.substring(0, 100) + "...";
     }
 
@@ -95,13 +132,7 @@ export function GenericInterruptView({
                           {key}
                         </td>
                         <td className="px-4 py-2 text-sm text-gray-500">
-                          {isComplexValue(value) ? (
-                            <code className="rounded bg-gray-50 px-2 py-1 font-mono text-sm">
-                              {JSON.stringify(value, null, 2)}
-                            </code>
-                          ) : (
-                            String(value)
-                          )}
+                          {renderInterruptStateItem(value)}
                         </td>
                       </tr>
                     );