{contentString.length > 0 && (
@@ -133,19 +148,11 @@ export function AssistantMessage({
thread={thread}
/>
)}
- {/**
- * TODO: Support rendering interrupts.
- * Tracking issue: https://github.com/langchain-ai/open-agent-platform/issues/22
- */}
- {/* {isAgentInboxInterruptSchema(threadInterrupt?.value) &&
- (isLastMessage || hasNoAIOrToolMessages) && (
-
- )}
- {threadInterrupt?.value &&
- !isAgentInboxInterruptSchema(threadInterrupt.value) &&
- isLastMessage ? (
-
- ) : null} */}
+
| Record
[];
+}) {
+ 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 (
+
+
+
+
+
+
+
+
+ {displayEntries.map((item, argIdx) => {
+ const [key, value] = Array.isArray(interrupt)
+ ? [argIdx.toString(), item]
+ : (item as [string, any]);
+ return (
+
+ |
+ {key}
+ |
+
+ {isComplexValue(value) ? (
+
+ {JSON.stringify(value, null, 2)}
+
+ ) : (
+ String(value)
+ )}
+ |
+
+ );
+ })}
+
+
+
+
+
+
+ {showSidePanel ? (
+
+ ) : (
+
+ )}
+
+ );
+}
diff --git a/apps/web/src/components/agent-inbox/contexts/ThreadContext.tsx b/apps/web/src/providers/Thread/index.tsx
similarity index 88%
rename from apps/web/src/components/agent-inbox/contexts/ThreadContext.tsx
rename to apps/web/src/providers/Thread/index.tsx
index 780bdf21..37ca21a9 100644
--- a/apps/web/src/components/agent-inbox/contexts/ThreadContext.tsx
+++ b/apps/web/src/providers/Thread/index.tsx
@@ -10,13 +10,13 @@ import { createClient } from "@/lib/client";
import { Run, Thread, ThreadStatus } from "@langchain/langgraph-sdk";
import React, { Dispatch, SetStateAction, useTransition } from "react";
import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
-import { IMPROPER_SCHEMA } from "../constants";
import {
getInterruptFromThread,
processInterruptedThread,
processThreadWithoutInterrupts,
} from "./utils";
-import { logger } from "../utils/logger";
+import { IMPROPER_SCHEMA } from "@/constants";
+import { useAgentsContext } from "../Agents";
type ThreadContentType<
ThreadValues extends Record = Record,
@@ -55,9 +55,29 @@ const ThreadsContext = React.createContext(
function ThreadsProviderInternal<
ThreadValues extends Record = Record,
>({ children }: { children: React.ReactNode }): React.ReactElement {
+ const { agents } = useAgentsContext();
const [agentInboxId] = useQueryState("agentInbox");
+ // Need to track agent ID too since this context is used in the chat page which doesn't follow the agent inbox pattern
+ const [agentId_] = useQueryState("agentId");
const [isPending] = useTransition();
+ const getAgentInboxIds = (): [string, string] | undefined => {
+ if (agentInboxId) {
+ const [assistantId, deploymentId] = agentInboxId.split(":");
+ return [assistantId, deploymentId];
+ }
+ if (!agentId_) {
+ return undefined;
+ }
+ const deploymentId = agents.find(
+ (a) => a.assistant_id === agentId_,
+ )?.deploymentId;
+ if (!deploymentId) {
+ return undefined;
+ }
+ return [agentId_, deploymentId];
+ };
+
// Get thread filter query params using the custom hook
const [inboxParam] = useQueryState(
"inbox",
@@ -74,13 +94,6 @@ function ThreadsProviderInternal<
const fetchThreads = React.useCallback(
async (agentId: string, deploymentId: string) => {
- if (!agentInboxId) {
- toast.error("No agent inbox ID found", {
- richColors: true,
- });
- return;
- }
-
setLoading(true);
const client = createClient(deploymentId);
@@ -215,8 +228,7 @@ function ThreadsProviderInternal<
setThreadData(sortedData);
setHasMoreThreads(threads.length === limit);
- } catch (e) {
- logger.error("Failed to fetch threads", e);
+ } catch (_) {
toast.error("Failed to load threads. Please try again.");
} finally {
// Always reset loading state, even after errors
@@ -240,8 +252,7 @@ function ThreadsProviderInternal<
try {
// Fetch threads
fetchThreads(assistantId, deploymentId);
- } catch (e) {
- logger.error("Error occurred while fetching threads", e);
+ } catch (_) {
toast.error("Failed to load threads. Please try again.");
// Always reset loading state in case of error
setLoading(false);
@@ -250,14 +261,11 @@ function ThreadsProviderInternal<
const fetchSingleThread = React.useCallback(
async (threadId: string): Promise | undefined> => {
- if (!agentInboxId) {
- toast.error("No agent inbox ID found when fetching thread.", {
- richColors: true,
- });
+ const agentInboxIds = getAgentInboxIds() ?? [];
+ if (!agentInboxIds.length) {
return;
}
-
- const [_, deploymentId] = agentInboxId.split(":");
+ const [_, deploymentId] = agentInboxIds;
const client = createClient(deploymentId);
try {
@@ -315,8 +323,7 @@ function ThreadsProviderInternal<
interrupts: undefined,
invalidSchema: undefined,
};
- } catch (error) {
- logger.error("Error fetching single thread", error);
+ } catch (_) {
toast.error("Failed to load thread details. Please try again.");
return undefined;
}
@@ -325,14 +332,11 @@ function ThreadsProviderInternal<
);
const ignoreThread = async (threadId: string) => {
- if (!agentInboxId) {
- toast.error("No agent inbox ID found when fetching thread.", {
- richColors: true,
- });
+ const agentInboxIds = getAgentInboxIds() ?? [];
+ if (!agentInboxIds.length) {
return;
}
-
- const [_, deploymentId] = agentInboxId.split(":");
+ const [_, deploymentId] = agentInboxIds;
const client = createClient(deploymentId);
try {
@@ -349,8 +353,7 @@ function ThreadsProviderInternal<
description: "Ignored thread",
duration: 3000,
});
- } catch (e) {
- logger.error("Error ignoring thread", e);
+ } catch (_) {
toast.error("Failed to ignore thread. Please try again.", {
duration: 3000,
});
@@ -373,34 +376,26 @@ function ThreadsProviderInternal<
}>
| undefined
: Promise | undefined => {
- if (!agentInboxId) {
- toast.error("No agent inbox ID found when fetching thread.", {
- richColors: true,
- });
+ const agentInboxIds = getAgentInboxIds() ?? [];
+ if (!agentInboxIds.length) {
return;
}
-
- const [assistantId, deploymentId] = agentInboxId.split(":");
+ const [assistantId, deploymentId] = agentInboxIds;
const client = createClient(deploymentId);
- try {
- if (options?.stream) {
- return client.runs.stream(threadId, assistantId, {
- command: {
- resume: response,
- },
- streamMode: "events",
- }) as any; // Type assertion needed due to conditional return type
- }
- return client.runs.create(threadId, assistantId, {
+ if (options?.stream) {
+ return client.runs.stream(threadId, assistantId, {
command: {
resume: response,
},
+ streamMode: "events",
}) as any; // Type assertion needed due to conditional return type
- } catch (e: any) {
- logger.error("Error sending human response", e);
- throw e;
}
+ return client.runs.create(threadId, assistantId, {
+ command: {
+ resume: response,
+ },
+ }) as any; // Type assertion needed due to conditional return type
};
const contextValue: ThreadContentType = {
diff --git a/apps/web/src/components/agent-inbox/contexts/utils.ts b/apps/web/src/providers/Thread/utils.ts
similarity index 98%
rename from apps/web/src/components/agent-inbox/contexts/utils.ts
rename to apps/web/src/providers/Thread/utils.ts
index a10f57bd..80f3cdeb 100644
--- a/apps/web/src/components/agent-inbox/contexts/utils.ts
+++ b/apps/web/src/providers/Thread/utils.ts
@@ -1,6 +1,6 @@
import { Thread, ThreadState } from "@langchain/langgraph-sdk";
-import { HumanInterrupt, ThreadData } from "../types";
-import { IMPROPER_SCHEMA } from "../constants";
+import { IMPROPER_SCHEMA } from "@/constants";
+import { HumanInterrupt, ThreadData } from "@/components/agent-inbox/types";
// TODO: Delete this once interrupt issue fixed.
export const tmpCleanInterrupts = (interrupts: Record) => {