link to docs in toast and use validate for uuid

Author: bracesproul

src/components/agent-inbox/components/generic-inbox-item.tsx

@@ -9,7 +9,10 @@ import { constructOpenInStudioURL } from "../utils";
 import { Button } from "@/components/ui/button";
 import { useThreadsContext } from "../contexts/ThreadContext";
 import { useQueryParams } from "../hooks/use-query-params";
-import { VIEW_STATE_THREAD_QUERY_PARAM } from "../constants";
+import {
+  STUDIO_NOT_WORKING_TROUBLESHOOTING_URL,
+  VIEW_STATE_THREAD_QUERY_PARAM,
+} from "../constants";
 
 interface GenericInboxItemProps<
   ThreadValues extends Record<string, any> = Record<string, any>,
@@ -50,10 +53,26 @@ export function GenericInboxItem<
     if (studioUrl === "#") {
       toast({
         title: "Error",
-        description:
-          "Could not construct Studio URL. Check if inbox has necessary details (Project ID, Tenant ID).",
+        description: (
+          <>
+            <p>
+              Could not construct Studio URL. Check if inbox has necessary
+              details (Project ID, Tenant ID).
+            </p>
+            <p>
+              If the issue persists, see the{" "}
+              <a
+                href={STUDIO_NOT_WORKING_TROUBLESHOOTING_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                troubleshooting section
+              </a>
+            </p>
+          </>
+        ),
         variant: "destructive",
-        duration: 5000,
+        duration: 10000,
       });
     } else {
       window.open(studioUrl, "_blank");

src/components/agent-inbox/components/thread-actions-view.tsx

@@ -6,7 +6,10 @@ import { ThreadIdCopyable } from "./thread-id";
 import { InboxItemInput } from "./inbox-item-input";
 import useInterruptedActions from "../hooks/use-interrupted-actions";
 import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
-import { VIEW_STATE_THREAD_QUERY_PARAM } from "../constants";
+import {
+  STUDIO_NOT_WORKING_TROUBLESHOOTING_URL,
+  VIEW_STATE_THREAD_QUERY_PARAM,
+} from "../constants";
 import { useToast } from "@/hooks/use-toast";
 import { cn } from "@/lib/utils";
 import { useQueryParams } from "../hooks/use-query-params";
@@ -122,10 +125,26 @@ export function ThreadActionsView<
       // Handle case where URL construction failed (e.g., missing data)
       toast({
         title: "Error",
-        description:
-          "Could not construct Studio URL. Check if inbox has necessary details (Project ID, Tenant ID).",
+        description: (
+          <>
+            <p>
+              Could not construct Studio URL. Check if inbox has necessary
+              details (Project ID, Tenant ID).
+            </p>
+            <p>
+              If the issue persists, see the{" "}
+              <a
+                href={STUDIO_NOT_WORKING_TROUBLESHOOTING_URL}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                troubleshooting section
+              </a>
+            </p>
+          </>
+        ),
         variant: "destructive",
-        duration: 5000,
+        duration: 10000,
       });
     } else {
       window.open(studioUrl, "_blank");

src/components/agent-inbox/constants.ts

@@ -8,3 +8,4 @@ export const AGENT_INBOX_PARAM = "agent_inbox";
 export const NO_INBOXES_FOUND_PARAM = "no_inboxes_found";
 export const AGENT_INBOX_GITHUB_README_URL =
   "https://github.com/langchain-ai/agent-inbox/blob/main/README.md";
+export const STUDIO_NOT_WORKING_TROUBLESHOOTING_URL = `${AGENT_INBOX_GITHUB_README_URL}#the-open-in-studio-button-doesnt-work-for-my-deployed-graphs`;

src/components/agent-inbox/utils.ts

@@ -8,6 +8,7 @@ import {
   AgentInbox,
 } from "./types";
 import { logger } from "./utils/logger";
+import { validate } from "uuid";
 
 export function prettifyText(action: string) {
   return startCase(action.replace(/_/g, " "));
@@ -329,10 +330,8 @@ export function extractProjectId(inboxId: string): string | null {
   }
   const parts = inboxId.split(":");
   if (parts.length === 2) {
-    // Basic check if the first part looks like a UUID v4
-    const uuidV4Regex =
-      /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-    if (uuidV4Regex.test(parts[0])) {
+    // Ensure the first part is a valid UUID
+    if (validate(parts[0])) {
       return parts[0];
     }
   }