87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ));
97 | TableCell.displayName = "TableCell";
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 | (
15 |
98 | );
99 | }
100 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/inbox-view.tsx:
--------------------------------------------------------------------------------
1 | import { useThreadsContext } from "@/components/agent-inbox/contexts/ThreadContext";
2 | import { InboxItem } from "./components/inbox-item";
3 | import React from "react";
4 | import { useQueryParams } from "./hooks/use-query-params";
5 | import { INBOX_PARAM, LIMIT_PARAM, OFFSET_PARAM } from "./constants";
6 | import { ThreadStatusWithAll } from "./types";
7 | import { Pagination } from "./components/pagination";
8 | import { Inbox as InboxIcon, LoaderCircle } from "lucide-react";
9 | import { InboxButtons } from "./components/inbox-buttons";
10 |
11 | export function AgentInboxView<
12 | ThreadValues extends Record = Record,
13 | >() {
14 | const { searchParams, updateQueryParams, getSearchParam } = useQueryParams();
15 | const { loading, threadData } = useThreadsContext();
16 | const selectedInbox = (getSearchParam(INBOX_PARAM) ||
17 | "interrupted") as ThreadStatusWithAll;
18 |
19 | const changeInbox = async (inbox: ThreadStatusWithAll) => {
20 | updateQueryParams(
21 | [INBOX_PARAM, OFFSET_PARAM, LIMIT_PARAM],
22 | [inbox, "0", "10"]
23 | );
24 | };
25 |
26 | React.useEffect(() => {
27 | try {
28 | if (typeof window === "undefined") return;
29 | const offsetQueryParam = getSearchParam(OFFSET_PARAM);
30 | const limitQueryParam = getSearchParam(LIMIT_PARAM);
31 | if (!offsetQueryParam) {
32 | updateQueryParams(OFFSET_PARAM, "0");
33 | }
34 | if (!limitQueryParam) {
35 | updateQueryParams(LIMIT_PARAM, "10");
36 | }
37 | } catch (e) {
38 | console.error("Error updating query params", e);
39 | }
40 | }, [searchParams]);
41 |
42 | const threadDataToRender = React.useMemo(
43 | () =>
44 | threadData.filter((t) => {
45 | if (selectedInbox === "all") return true;
46 | return t.status === selectedInbox;
47 | }),
48 | [selectedInbox, threadData]
49 | );
50 | const noThreadsFound = !threadDataToRender.length;
51 |
52 | return (
53 |
54 |
55 |
57 |
58 | {threadDataToRender.map((threadData, idx) => {
59 | return (
60 |
61 | key={`inbox-item-${threadData.thread.thread_id}`}
62 | threadData={threadData}
63 | isLast={idx === threadDataToRender.length - 1}
64 | />
65 | );
66 | })}
67 | {noThreadsFound && !loading && (
68 |
69 |
70 |
71 |
No threads found
72 |
73 |
84 |
87 |
): string => {
20 | if ("getType" in message && typeof message.getType === "function") {
21 | return message.getType();
22 | } else if ("_getType" in message && typeof message._getType === "function") {
23 | return message._getType();
24 | } else if ("type" in message) {
25 | return message.type as string;
26 | } else {
27 | throw new Error("Unsupported message type");
28 | }
29 | };
30 |
31 | export const convertLangchainMessages: useExternalMessageConverter.Callback<
32 | BaseMessage
33 | > = (message): Message | Message[] => {
34 | if (typeof message?.content !== "string") {
35 | throw new Error("Only text messages are supported");
36 | }
37 |
38 | switch (getMessageType(message)) {
39 | case "system":
40 | return {
41 | role: "system",
42 | id: message.id,
43 | content: [{ type: "text", text: message.content }],
44 | };
45 | case "human":
46 | return {
47 | role: "user",
48 | id: message.id,
49 | content: [{ type: "text", text: message.content }],
50 | };
51 | case "ai":
52 | const aiMsg = message as AIMessage;
53 | const toolCallsContent: ToolCallContentPart[] = aiMsg.tool_calls?.length
54 | ? aiMsg.tool_calls.map((tc) => ({
55 | type: "tool-call" as const,
56 | toolCallId: tc.id ?? "",
57 | toolName: tc.name,
58 | args: tc.args,
59 | argsText: JSON.stringify(tc.args),
60 | }))
61 | : [];
62 | return {
63 | role: "assistant",
64 | id: message.id,
65 | content: [
66 | ...toolCallsContent,
67 | {
68 | type: "text",
69 | text: message.content,
70 | },
71 | ],
72 | };
73 | case "tool":
74 | return {
75 | role: "tool",
76 | toolName: message.name,
77 | toolCallId: (message as ToolMessage).tool_call_id,
78 | result: message.content,
79 | };
80 | default:
81 | throw new Error(`Unsupported message type: ${getMessageType(message)}`);
82 | }
83 | };
84 |
85 | export function convertToOpenAIFormat(message: BaseMessage) {
86 | if (typeof message?.content !== "string") {
87 | throw new Error("Only text messages are supported");
88 | }
89 | switch (getMessageType(message)) {
90 | case "system":
91 | return {
92 | role: "system",
93 | content: message.content,
94 | };
95 | case "human":
96 | return {
97 | role: "user",
98 | content: message.content,
99 | };
100 | case "ai":
101 | return {
102 | role: "assistant",
103 | content: message.content,
104 | };
105 | case "tool":
106 | return {
107 | role: "tool",
108 | toolName: message.name,
109 | result: message.content,
110 | };
111 | default:
112 | throw new Error(`Unsupported message type: ${getMessageType(message)}`);
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/thread-view.tsx:
--------------------------------------------------------------------------------
1 | import { Thread } from "@langchain/langgraph-sdk";
2 | import { StateView } from "./components/state-view";
3 | import { ThreadActionsView } from "./components/thread-actions-view";
4 | import { useThreadsContext } from "./contexts/ThreadContext";
5 | import { HumanInterrupt, ThreadData } from "./types";
6 | import React from "react";
7 | import { cn } from "@/lib/utils";
8 | import { useQueryParams } from "./hooks/use-query-params";
9 | import { VIEW_STATE_THREAD_QUERY_PARAM } from "./constants";
10 |
11 | export function ThreadView<
12 | ThreadValues extends Record = Record,
13 | >({ threadId }: { threadId: string }) {
14 | const { updateQueryParams } = useQueryParams();
15 | const { threadData: threads, loading } = useThreadsContext();
16 | const [threadData, setThreadData] =
17 | React.useState>();
18 | const [showDescription, setShowDescription] = React.useState(true);
19 | const [showState, setShowState] = React.useState(false);
20 | const showSidePanel = showDescription || showState;
21 |
22 | React.useEffect(() => {
23 | try {
24 | if (typeof window === "undefined") return;
25 | if (!threadId || !threads.length || loading) return;
26 | const selectedThread = threads.find(
27 | (t) => t.thread.thread_id === threadId
28 | );
29 | if (selectedThread) {
30 | setThreadData(selectedThread);
31 | return;
32 | } else {
33 | // Route the user back to the inbox view.
34 | updateQueryParams(VIEW_STATE_THREAD_QUERY_PARAM);
35 | }
36 | } catch (e) {
37 | console.error("Error updating query params & setting thread data", e);
38 | }
39 | }, [threads, loading, threadId]);
40 |
41 | const handleShowSidePanel = (
42 | showState: boolean,
43 | showDescription: boolean
44 | ) => {
45 | if (showState && showDescription) {
46 | console.error("Cannot show both state and description");
47 | return;
48 | }
49 | if (showState) {
50 | setShowDescription(false);
51 | setShowState(true);
52 | } else if (showDescription) {
53 | setShowState(false);
54 | setShowDescription(true);
55 | } else {
56 | setShowState(false);
57 | setShowDescription(false);
58 | }
59 | };
60 |
61 | if (
62 | !threadData ||
63 | threadData.status !== "interrupted" ||
64 | !threadData.interrupts ||
65 | threadData.interrupts.length === 0
66 | ) {
67 | return null;
68 | }
69 |
70 | return (
71 |
72 |
78 |
79 | threadData={
80 | threadData as {
81 | thread: Thread;
82 | status: "interrupted";
83 | interrupts: HumanInterrupt[];
84 | }
85 | }
86 | setThreadData={setThreadData}
87 | handleShowSidePanel={handleShowSidePanel}
88 | showState={showState}
89 | showDescription={showDescription}
90 | />
91 |
92 |
98 |
104 |
();
22 | const [selectedInboxLabel, setSelectedInboxLabel] = React.useState();
23 | const [selectedThreadActionLabel, setSelectedThreadActionLabel] =
24 | React.useState();
25 |
26 | React.useEffect(() => {
27 | try {
28 | const selectedAgentInbox = agentInboxes.find((a) => a.selected);
29 | if (selectedAgentInbox) {
30 | const selectedAgentInboxLabel =
31 | selectedAgentInbox.name || prettifyText(selectedAgentInbox.graphId);
32 | setAgentInboxLabel(selectedAgentInboxLabel);
33 | } else {
34 | setAgentInboxLabel(undefined);
35 | }
36 |
37 | const selectedInboxParam = searchParams.get(INBOX_PARAM) as
38 | | ThreadStatusWithAll
39 | | undefined;
40 | if (selectedInboxParam) {
41 | setSelectedInboxLabel(prettifyText(selectedInboxParam));
42 | } else {
43 | setSelectedInboxLabel(undefined);
44 | }
45 |
46 | const selectedThreadIdParam = searchParams.get(
47 | VIEW_STATE_THREAD_QUERY_PARAM
48 | );
49 | const selectedThread = threadData.find(
50 | (t) => t.thread.thread_id === selectedThreadIdParam
51 | );
52 | const selectedThreadAction = (
53 | selectedThread?.interrupts as HumanInterrupt[] | undefined
54 | )?.[0]?.action_request?.action;
55 | if (selectedThreadAction) {
56 | setSelectedThreadActionLabel(prettifyText(selectedThreadAction));
57 | } else {
58 | setSelectedThreadActionLabel(undefined);
59 | }
60 | } catch (e) {
61 | console.error("Error while updating breadcrumb", e);
62 | }
63 | }, [searchParams, agentInboxes, threadData]);
64 |
65 | const constructBaseUrl = () => {
66 | const selectedAgentInbox = agentInboxes.find((a) => a.selected);
67 | if (!selectedAgentInbox) {
68 | return "/";
69 | }
70 | return `/?${AGENT_INBOX_PARAM}=${selectedAgentInbox.id}`;
71 | };
72 |
73 | const constructInboxLink = () => {
74 | const currentUrl = new URL(window.location.href);
75 | currentUrl.searchParams.delete(VIEW_STATE_THREAD_QUERY_PARAM);
76 | return `${currentUrl.pathname}${currentUrl.search}`;
77 | };
78 |
79 | if (!agentInboxLabel) {
80 | return null;
81 | }
82 |
83 | return (
84 |
90 |
91 |
92 | {agentInboxLabel}
93 |
94 |
95 |
96 | {selectedInboxLabel && (
97 | <>
98 |
100 |
101 | {selectedInboxLabel}
102 |
103 |
104 |
105 | )}
106 | {selectedThreadActionLabel && (
107 | <>
108 |
110 |
111 | {selectedThreadActionLabel}
112 |
113 |
114 |
115 | )}
116 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/components/pagination.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Select,
3 | SelectContent,
4 | SelectGroup,
5 | SelectItem,
6 | SelectLabel,
7 | SelectTrigger,
8 | SelectValue,
9 | } from "@/components/ui/select";
10 | import { useThreadsContext } from "../contexts/ThreadContext";
11 | import { Button } from "@/components/ui/button";
12 | import { ChevronLeft, ChevronRight } from "lucide-react";
13 | import { useQueryParams } from "../hooks/use-query-params";
14 | import { ThreadStatusWithAll } from "../types";
15 | import { useToast } from "@/hooks/use-toast";
16 | import { INBOX_PARAM, LIMIT_PARAM, OFFSET_PARAM } from "../constants";
17 |
18 | function DisplayLimitSelect() {
19 | const { searchParams, updateQueryParams } = useQueryParams();
20 | const { loading } = useThreadsContext();
21 | const fetchLimitOptions = ["10", "25", "50", "100"];
22 | const fetchLimitParam = Number(searchParams.get(LIMIT_PARAM) || 10);
23 |
24 | return (
25 | {
29 | updateQueryParams(LIMIT_PARAM, v);
30 | }}
31 | >
32 |
33 | {fetchLimitParam}
34 |
35 |
36 |
37 | Display Limit
38 | {fetchLimitOptions.map((option) => (
39 |
40 | {option}
41 |
42 | ))}
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | export function Pagination() {
50 | const { searchParams, getSearchParam, updateQueryParams } = useQueryParams();
51 | const { toast } = useToast();
52 | const { hasMoreThreads, loading } = useThreadsContext();
53 |
54 | const isPreviousDisabled =
55 | Number(searchParams.get(OFFSET_PARAM) || 0) === 0 || loading;
56 | const isNextDisabled = !hasMoreThreads || loading;
57 |
58 | const handleClickNext = async () => {
59 | const selectedInbox = getSearchParam(INBOX_PARAM) as
60 | | ThreadStatusWithAll
61 | | undefined;
62 | if (!selectedInbox) {
63 | toast({
64 | title: "Error",
65 | description: "No inbox selected",
66 | variant: "destructive",
67 | duration: 3000,
68 | });
69 | return;
70 | }
71 |
72 | const offsetParam = Number(searchParams.get(OFFSET_PARAM) || 0);
73 | const fetchLimitParam = Number(searchParams.get(LIMIT_PARAM) || 10);
74 | const newOffset = offsetParam + fetchLimitParam;
75 | updateQueryParams(OFFSET_PARAM, newOffset.toString());
76 | };
77 |
78 | const handleClickPrevious = async () => {
79 | const selectedInbox = getSearchParam(INBOX_PARAM) as
80 | | ThreadStatusWithAll
81 | | undefined;
82 | if (!selectedInbox) {
83 | toast({
84 | title: "Error",
85 | description: "No inbox selected",
86 | variant: "destructive",
87 | duration: 3000,
88 | });
89 | return;
90 | }
91 |
92 | const offsetParam = Number(getSearchParam(OFFSET_PARAM) || 0);
93 | const fetchLimitParam = Number(getSearchParam(LIMIT_PARAM) || 10);
94 | const newOffset = Math.max(offsetParam - fetchLimitParam, 0);
95 | updateQueryParams(OFFSET_PARAM, newOffset.toString());
96 | };
97 |
98 | return (
99 |
100 |
101 |
102 |
109 | Previous
111 |
112 |
119 | Next
121 |
122 |
123 |
,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 | ,
34 | React.ComponentPropsWithoutRef & {
35 | hideCloseIcon?: boolean;
36 | }
37 | >(({ className, children, hideCloseIcon = false, ...props }, ref) => (
38 |
39 |
48 | {children}
49 | {!hideCloseIcon && (
50 |
51 | Close
53 |
54 | )}
55 |
56 |
57 | ));
58 | DialogContent.displayName = DialogPrimitive.Content.displayName;
59 |
60 | const DialogHeader = ({
61 | className,
62 | ...props
63 | }: React.HTMLAttributes) => (
64 |
71 | );
72 | DialogHeader.displayName = "DialogHeader";
73 |
74 | const DialogFooter = ({
75 | className,
76 | ...props
77 | }: React.HTMLAttributes) => (
78 |
85 | );
86 | DialogFooter.displayName = "DialogFooter";
87 |
88 | const DialogTitle = React.forwardRef<
89 | React.ElementRef,
90 | React.ComponentPropsWithoutRef
91 | >(({ className, ...props }, ref) => (
92 | ,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 | ,
19 | React.ComponentPropsWithoutRef
20 | >(({ className, ...props }, ref) => (
21 | ,
53 | VariantProps {}
54 |
55 | const SheetContent = React.forwardRef<
56 | React.ElementRef,
57 | SheetContentProps
58 | >(({ side = "right", className, children, ...props }, ref) => (
59 |
60 |
66 |
67 | Close
69 |
70 | {children}
71 |
72 |
73 | ));
74 | SheetContent.displayName = SheetPrimitive.Content.displayName;
75 |
76 | const SheetHeader = ({
77 | className,
78 | ...props
79 | }: React.HTMLAttributes) => (
80 |
87 | );
88 | SheetHeader.displayName = "SheetHeader";
89 |
90 | const SheetFooter = ({
91 | className,
92 | ...props
93 | }: React.HTMLAttributes) => (
94 |
101 | );
102 | SheetFooter.displayName = "SheetFooter";
103 |
104 | const SheetTitle = React.forwardRef<
105 | React.ElementRef,
106 | React.ComponentPropsWithoutRef
107 | >(({ className, ...props }, ref) => (
108 | ,
118 | React.ComponentPropsWithoutRef
119 | >(({ className, ...props }, ref) => (
120 | ;
42 | }
43 | | {
44 | type: ActionType["DISMISS_TOAST"];
45 | toastId?: ToasterToast["id"];
46 | }
47 | | {
48 | type: ActionType["REMOVE_TOAST"];
49 | toastId?: ToasterToast["id"];
50 | };
51 |
52 | interface State {
53 | toasts: ToasterToast[];
54 | }
55 |
56 | const toastTimeouts = new Map>();
57 |
58 | const addToRemoveQueue = (toastId: string) => {
59 | if (toastTimeouts.has(toastId)) {
60 | return;
61 | }
62 |
63 | const timeout = setTimeout(() => {
64 | toastTimeouts.delete(toastId);
65 | dispatch({
66 | type: "REMOVE_TOAST",
67 | toastId: toastId,
68 | });
69 | }, TOAST_REMOVE_DELAY);
70 |
71 | toastTimeouts.set(toastId, timeout);
72 | };
73 |
74 | export const reducer = (state: State, action: Action): State => {
75 | switch (action.type) {
76 | case "ADD_TOAST":
77 | return {
78 | ...state,
79 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
80 | };
81 |
82 | case "UPDATE_TOAST":
83 | return {
84 | ...state,
85 | toasts: state.toasts.map((t) =>
86 | t.id === action.toast.id ? { ...t, ...action.toast } : t
87 | ),
88 | };
89 |
90 | case "DISMISS_TOAST": {
91 | const { toastId } = action;
92 |
93 | // ! Side effects ! - This could be extracted into a dismissToast() action,
94 | // but I'll keep it here for simplicity
95 | if (toastId) {
96 | addToRemoveQueue(toastId);
97 | } else {
98 | state.toasts.forEach((toast) => {
99 | addToRemoveQueue(toast.id);
100 | });
101 | }
102 |
103 | return {
104 | ...state,
105 | toasts: state.toasts.map((t) =>
106 | t.id === toastId || toastId === undefined
107 | ? {
108 | ...t,
109 | open: false,
110 | }
111 | : t
112 | ),
113 | };
114 | }
115 | case "REMOVE_TOAST":
116 | if (action.toastId === undefined) {
117 | return {
118 | ...state,
119 | toasts: [],
120 | };
121 | }
122 | return {
123 | ...state,
124 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
125 | };
126 | }
127 | };
128 |
129 | const listeners: Array<(state: State) => void> = [];
130 |
131 | let memoryState: State = { toasts: [] };
132 |
133 | function dispatch(action: Action) {
134 | memoryState = reducer(memoryState, action);
135 | listeners.forEach((listener) => {
136 | listener(memoryState);
137 | });
138 | }
139 |
140 | type Toast = Omit;
141 | export type ToastInput = Toast;
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId();
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: "UPDATE_TOAST",
149 | toast: { ...props, id },
150 | });
151 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
152 |
153 | dispatch({
154 | type: "ADD_TOAST",
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open) dismiss();
161 | },
162 | },
163 | });
164 |
165 | return {
166 | id: id,
167 | dismiss,
168 | update,
169 | };
170 | }
171 |
172 | function useToast() {
173 | const [state, setState] = React.useState(memoryState);
174 |
175 | React.useEffect(() => {
176 | listeners.push(setState);
177 | return () => {
178 | const index = listeners.indexOf(setState);
179 | if (index > -1) {
180 | listeners.splice(index, 1);
181 | }
182 | };
183 | }, [state]);
184 |
185 | return {
186 | ...state,
187 | toast,
188 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 | };
190 | }
191 |
192 | export { useToast, toast };
193 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/components/settings-popover.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | Popover,
5 | PopoverContent,
6 | PopoverTrigger,
7 | } from "@/components/ui/popover";
8 | import { Settings } from "lucide-react";
9 | import React from "react";
10 | import { PillButton } from "@/components/ui/pill-button";
11 | import { AddAgentInboxDialog } from "./add-agent-inbox-dialog";
12 | import { Label } from "@/components/ui/label";
13 | import { useLocalStorage } from "../hooks/use-local-storage";
14 | import { INBOX_PARAM, LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY } from "../constants";
15 | import { useThreadsContext } from "../contexts/ThreadContext";
16 | import { useQueryParams } from "../hooks/use-query-params";
17 | import { ThreadStatusWithAll } from "../types";
18 | import { PasswordInput } from "@/components/ui/password-input";
19 |
20 | export function SettingsPopover() {
21 | const langchainApiKeyNotSet = React.useRef(true);
22 | const [open, setOpen] = React.useState(false);
23 | const [langchainApiKey, setLangchainApiKey] = React.useState("");
24 | const { getItem, setItem } = useLocalStorage();
25 | const { getSearchParam } = useQueryParams();
26 | const { fetchThreads } = useThreadsContext();
27 |
28 | React.useEffect(() => {
29 | try {
30 | if (typeof window === "undefined") {
31 | return;
32 | }
33 | if (langchainApiKey) return;
34 |
35 | const langchainApiKeyLS = getItem(LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY);
36 | if (langchainApiKeyLS) {
37 | // If the key already exists in local storage, then it's already been set.
38 | langchainApiKeyNotSet.current = false;
39 | setLangchainApiKey(langchainApiKeyLS);
40 | }
41 | } catch (e) {
42 | console.error("Error getting/setting LangChain API key", e);
43 | }
44 | }, [langchainApiKey]);
45 |
46 | const handleChangeLangChainApiKey = (
47 | e: React.ChangeEvent
48 | ) => {
49 | setLangchainApiKey(e.target.value);
50 | setItem(LANGCHAIN_API_KEY_LOCAL_STORAGE_KEY, e.target.value);
51 | };
52 |
53 | return (
54 | <>
55 | {
58 | if (!c && langchainApiKey && langchainApiKeyNotSet.current) {
59 | // Try to fetch threads if the key was set for the first time.
60 | langchainApiKeyNotSet.current = false;
61 | const inboxParam = getSearchParam(INBOX_PARAM) as
62 | | ThreadStatusWithAll
63 | | undefined;
64 | if (inboxParam) {
65 | // Void and not await to avoid blocking the UI.
66 | void fetchThreads(inboxParam);
67 | }
68 | }
69 | setOpen(c);
70 | }}
71 | >
72 |
73 |
78 | Settings
80 |
81 |
82 |
83 |
84 |
85 |
Settings
86 |
87 | Configuration settings for Agent Inbox
88 |
89 |
90 |
91 |
92 |
93 |
94 | LangChain API Key *
95 |
96 |
97 | This value is stored in your browser's local storage
98 | and is only used to authenticate requests sent to your
99 | LangGraph server.
100 |
101 |
102 |
110 |
111 |
setOpen(false)}
113 | />
114 |
115 |
117 |
118 | setOpen(false)}
120 | hideTrigger
121 | langchainApiKey={langchainApiKey}
122 | handleChangeLangChainApiKey={handleChangeLangChainApiKey}
123 | />
124 |
125 | );
126 | }
127 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700&display=swap");
2 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | :root {
8 | --foreground-rgb: 0, 0, 0;
9 | --background-start-rgb: 214, 219, 220;
10 | --background-end-rgb: 255, 255, 255;
11 | --row-height: 53px;
12 | }
13 |
14 | @media (prefers-color-scheme: dark) {
15 | :root {
16 | --foreground-rgb: 255, 255, 255;
17 | --background-start-rgb: 0, 0, 0;
18 | --background-end-rgb: 0, 0, 0;
19 | }
20 | }
21 | *::-webkit-scrollbar {
22 | display: none;
23 | }
24 |
25 | a {
26 | color: rgb(33, 118, 246);
27 | }
28 |
29 | @layer utilities {
30 | .text-balance {
31 | text-wrap: balance;
32 | }
33 | .no-scrollbar::-webkit-scrollbar {
34 | display: none;
35 | }
36 |
37 | .no-scrollbar {
38 | -ms-overflow-style: none; /* IE and Edge */
39 | scrollbar-width: none; /* Firefox */
40 | }
41 |
42 | .shadow-inner-right {
43 | box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
44 | }
45 |
46 | .shadow-inner-left {
47 | box-shadow: inset 9px 0 6px -1px rgb(0 0 0 / 0.02);
48 | }
49 | }
50 |
51 | @keyframes glow {
52 | 0%,
53 | 100% {
54 | box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
55 | }
56 | 50% {
57 | box-shadow: 0 0 24px rgba(34, 197, 94, 1);
58 | }
59 | }
60 |
61 | @layer base {
62 | :root {
63 | --background: 220 14% 98%;
64 | --foreground: 0 0% 3.9%;
65 | --card: 0 0% 100%;
66 | --card-foreground: 0 0% 3.9%;
67 | --popover: 0 0% 100%;
68 | --popover-foreground: 0 0% 3.9%;
69 | --primary: 0 0% 9%;
70 | --primary-foreground: 0 0% 98%;
71 | --secondary: 0 0% 96.1%;
72 | --secondary-foreground: 0 0% 9%;
73 | --muted: 0 0% 96.1%;
74 | --muted-foreground: 0 0% 45.1%;
75 | --accent: 0 0% 96.1%;
76 | --accent-foreground: 0 0% 9%;
77 | --destructive: 0 84.2% 60.2%;
78 | --destructive-foreground: 0 0% 98%;
79 | --border: 0 0% 89.8%;
80 | --input: 0 0% 89.8%;
81 | --ring: 0 0% 3.9%;
82 | --chart-1: 12 76% 61%;
83 | --chart-2: 173 58% 39%;
84 | --chart-3: 197 37% 24%;
85 | --chart-4: 43 74% 66%;
86 | --chart-5: 27 87% 67%;
87 | --radius: 0.5rem;
88 | --sidebar-background: 0 0% 98%;
89 | --sidebar-foreground: 240 5.3% 26.1%;
90 | --sidebar-primary: 240 5.9% 10%;
91 | --sidebar-primary-foreground: 0 0% 98%;
92 | --sidebar-accent: 240 4.8% 95.9%;
93 | --sidebar-accent-foreground: 240 5.9% 10%;
94 | --sidebar-border: 220 13% 91%;
95 | --sidebar-ring: 217.2 91.2% 59.8%;
96 | }
97 | .dark {
98 | --background: 0 0% 3.9%;
99 | --foreground: 0 0% 98%;
100 | --card: 0 0% 3.9%;
101 | --card-foreground: 0 0% 98%;
102 | --popover: 0 0% 3.9%;
103 | --popover-foreground: 0 0% 98%;
104 | --primary: 0 0% 98%;
105 | --primary-foreground: 0 0% 9%;
106 | --secondary: 0 0% 14.9%;
107 | --secondary-foreground: 0 0% 98%;
108 | --muted: 0 0% 14.9%;
109 | --muted-foreground: 0 0% 63.9%;
110 | --accent: 0 0% 14.9%;
111 | --accent-foreground: 0 0% 98%;
112 | --destructive: 0 62.8% 30.6%;
113 | --destructive-foreground: 0 0% 98%;
114 | --border: 0 0% 14.9%;
115 | --input: 0 0% 14.9%;
116 | --ring: 0 0% 83.1%;
117 | --chart-1: 220 70% 50%;
118 | --chart-2: 160 60% 45%;
119 | --chart-3: 30 80% 55%;
120 | --chart-4: 280 65% 60%;
121 | --chart-5: 340 75% 55%;
122 | --sidebar-background: 240 5.9% 10%;
123 | --sidebar-foreground: 240 4.8% 95.9%;
124 | --sidebar-primary: 224.3 76.3% 48%;
125 | --sidebar-primary-foreground: 0 0% 100%;
126 | --sidebar-accent: 240 3.7% 15.9%;
127 | --sidebar-accent-foreground: 240 4.8% 95.9%;
128 | --sidebar-border: 240 3.7% 15.9%;
129 | --sidebar-ring: 217.2 91.2% 59.8%;
130 | }
131 | html {
132 | font-family:
133 | "Inter",
134 | -apple-system,
135 | BlinkMacSystemFont,
136 | "Segoe UI",
137 | Roboto,
138 | Helvetica,
139 | Arial,
140 | sans-serif,
141 | "Apple Color Emoji",
142 | "Segoe UI Emoji",
143 | "Segoe UI Symbol";
144 | }
145 | }
146 |
147 | @layer base {
148 | * {
149 | @apply border-border;
150 | }
151 | body {
152 | @apply bg-background text-foreground;
153 | }
154 | }
155 |
156 | /* Change highlight color */
157 | ::selection {
158 | background-color: rgba(53, 151, 147, 0.3);
159 | }
160 |
161 | ::-moz-selection {
162 | background-color: rgba(53, 151, 147, 0.3);
163 | }
164 |
165 | @layer utilities {
166 | .shadow-inner-right {
167 | box-shadow: inset -9px 0 6px -1px rgb(0 0 0 / 0.02);
168 | }
169 | }
170 |
171 | .artifact-content {
172 | line-height: calc(
173 | 1.625em + 2px
174 | ); /* Adjust the base value (1.625em) if needed */
175 | }
176 |
177 | .inline-code {
178 | font-family: monospace;
179 | background-color: #f0f0f0;
180 | padding: 2px 4px;
181 | border-radius: 4px;
182 | font-size: 0.9em;
183 | }
184 |
185 | tr {
186 | height: var(--row-height);
187 | }
188 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { Cross2Icon } from "@radix-ui/react-icons";
5 | import * as ToastPrimitives from "@radix-ui/react-toast";
6 | import { cva, type VariantProps } from "class-variance-authority";
7 |
8 | import { cn } from "@/lib/utils";
9 |
10 | const ToastProvider = ToastPrimitives.Provider;
11 |
12 | const ToastViewport = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, ...props }, ref) => (
16 | ,
45 | React.ComponentPropsWithoutRef &
46 | VariantProps
47 | >(({ className, variant, ...props }, ref) => {
48 | return (
49 | ,
60 | React.ComponentPropsWithoutRef
61 | >(({ className, ...props }, ref) => (
62 | ,
75 | React.ComponentPropsWithoutRef
76 | >(({ className, ...props }, ref) => (
77 |
86 |
88 | ));
89 | ToastClose.displayName = ToastPrimitives.Close.displayName;
90 |
91 | const ToastTitle = React.forwardRef<
92 | React.ElementRef,
93 | React.ComponentPropsWithoutRef
94 | >(({ className, ...props }, ref) => (
95 | ,
105 | React.ComponentPropsWithoutRef
106 | >(({ className, ...props }, ref) => (
107 | ;
116 |
117 | type ToastActionElement = React.ReactElement;
118 |
119 | export {
120 | type ToastProps,
121 | type ToastActionElement,
122 | ToastProvider,
123 | ToastViewport,
124 | Toast,
125 | ToastTitle,
126 | ToastDescription,
127 | ToastClose,
128 | ToastAction,
129 | };
130 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import {
5 | CaretSortIcon,
6 | CheckIcon,
7 | ChevronDownIcon,
8 | ChevronUpIcon,
9 | } from "@radix-ui/react-icons";
10 | import * as SelectPrimitive from "@radix-ui/react-select";
11 |
12 | import { cn } from "@/lib/utils";
13 |
14 | const Select = SelectPrimitive.Root;
15 |
16 | const SelectGroup = SelectPrimitive.Group;
17 |
18 | const SelectValue = SelectPrimitive.Value;
19 |
20 | const SelectTrigger = React.forwardRef<
21 | React.ElementRef,
22 | React.ComponentPropsWithoutRef
23 | >(({ className, children, ...props }, ref) => (
24 | span]:line-clamp-1",
28 | className
29 | )}
30 | {...props}
31 | >
32 | {children}
33 |
34 |
36 |
37 | ));
38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
39 |
40 | const SelectScrollUpButton = React.forwardRef<
41 | React.ElementRef,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 |
52 |
54 | ));
55 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
56 |
57 | const SelectScrollDownButton = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
69 |
71 | ));
72 | SelectScrollDownButton.displayName =
73 | SelectPrimitive.ScrollDownButton.displayName;
74 |
75 | const SelectContent = React.forwardRef<
76 | React.ElementRef,
77 | React.ComponentPropsWithoutRef
78 | >(({ className, children, position = "popper", ...props }, ref) => (
79 |
80 |
91 |
99 | {children}
100 |
101 |
103 |
104 | ));
105 | SelectContent.displayName = SelectPrimitive.Content.displayName;
106 |
107 | const SelectLabel = React.forwardRef<
108 | React.ElementRef,
109 | React.ComponentPropsWithoutRef
110 | >(({ className, ...props }, ref) => (
111 | ,
121 | React.ComponentPropsWithoutRef
122 | >(({ className, children, ...props }, ref) => (
123 |
131 |
132 |
133 |
135 |
136 | {children}
137 |
138 | ));
139 | SelectItem.displayName = SelectPrimitive.Item.displayName;
140 |
141 | const SelectSeparator = React.forwardRef<
142 | React.ElementRef,
143 | React.ComponentPropsWithoutRef
144 | >(({ className, ...props }, ref) => (
145 | = Record,
18 | > {
19 | threadData: {
20 | thread: Thread;
21 | status: "interrupted";
22 | interrupts: HumanInterrupt[];
23 | };
24 | setThreadData: React.Dispatch<
25 | React.SetStateAction | undefined>
26 | >;
27 | handleShowSidePanel: (showState: boolean, showDescription: boolean) => void;
28 | showState: boolean;
29 | showDescription: boolean;
30 | }
31 |
32 | function ButtonGroup({
33 | handleShowState,
34 | handleShowDescription,
35 | showingState,
36 | showingDescription,
37 | }: {
38 | handleShowState: () => void;
39 | handleShowDescription: () => void;
40 | showingState: boolean;
41 | showingDescription: boolean;
42 | }) {
43 | return (
44 |
45 |
54 | State
55 |
56 |
65 | Description
66 |
67 |
68 | );
69 | }
70 |
71 | export function ThreadActionsView<
72 | ThreadValues extends Record = Record,
73 | >({
74 | threadData,
75 | setThreadData,
76 | handleShowSidePanel,
77 | showDescription,
78 | showState,
79 | }: ThreadActionsViewProps) {
80 | const {
81 | acceptAllowed,
82 | hasEdited,
83 | hasAddedResponse,
84 | streaming,
85 | supportsMultipleMethods,
86 | streamFinished,
87 | currentNode,
88 | loading,
89 | handleSubmit,
90 | handleIgnore,
91 | handleResolve,
92 | setSelectedSubmitType,
93 | setHasAddedResponse,
94 | setHasEdited,
95 | humanResponse,
96 | setHumanResponse,
97 | initialHumanInterruptEditValue,
98 | } = useInterruptedActions({
99 | threadData,
100 | setThreadData,
101 | });
102 | const { agentInboxes } = useThreadsContext();
103 | const { toast } = useToast();
104 | const { updateQueryParams } = useQueryParams();
105 |
106 | const deploymentUrl = agentInboxes.find((i) => i.selected)?.deploymentUrl;
107 |
108 | const handleOpenInStudio = () => {
109 | if (!deploymentUrl) {
110 | toast({
111 | title: "Error",
112 | description: "Please set the LangGraph deployment URL in settings.",
113 | duration: 5000,
114 | });
115 | return;
116 | }
117 |
118 | const studioUrl = constructOpenInStudioURL(
119 | deploymentUrl,
120 | threadData.thread.thread_id
121 | );
122 | window.open(studioUrl, "_blank");
123 | };
124 |
125 | const threadTitle =
126 | threadData.interrupts[0].action_request.action || "Unknown";
127 | const actionsDisabled = loading || streaming;
128 |
129 | return (
130 |
131 | {/* Header */}
132 |
133 |
134 |
updateQueryParams(VIEW_STATE_THREAD_QUERY_PARAM)}
137 | tooltip="Back"
138 | >
139 |
141 |
{threadTitle}
142 |
143 |
144 |
145 | {deploymentUrl && (
146 |
152 | Studio
153 |
154 | )}
155 | handleShowSidePanel(true, false)}
157 | handleShowDescription={() => handleShowSidePanel(false, true)}
158 | showingState={showState}
159 | showingDescription={showDescription}
160 | />
161 |
162 |
163 |
164 |
165 |
171 | Mark as Resolved
172 |
173 |
179 | Ignore
180 |
181 |
182 |
183 | {/* Actions */}
184 |
201 |
[]
12 | ): value is BaseMessage[] {
13 | if (
14 | value.every(isBaseMessage) ||
15 | (Array.isArray(value) &&
16 | value.every(
17 | (v) =>
18 | typeof v === "object" &&
19 | "id" in v &&
20 | "type" in v &&
21 | "content" in v &&
22 | "additional_kwargs" in v
23 | ))
24 | ) {
25 | return true;
26 | }
27 | return false;
28 | }
29 |
30 | export function baseMessageObject(item: unknown): string {
31 | if (isBaseMessage(item)) {
32 | const contentText =
33 | typeof item.content === "string"
34 | ? item.content
35 | : JSON.stringify(item.content, null);
36 | let toolCallText = "";
37 | if ("tool_calls" in item) {
38 | toolCallText = JSON.stringify(item.tool_calls, null);
39 | }
40 | if ("type" in item) {
41 | return `${item.type}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
42 | } else if ("_getType" in item) {
43 | return `${item._getType()}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
44 | }
45 | } else if (
46 | typeof item === "object" &&
47 | item &&
48 | "type" in item &&
49 | "content" in item
50 | ) {
51 | const contentText =
52 | typeof item.content === "string"
53 | ? item.content
54 | : JSON.stringify(item.content, null);
55 | let toolCallText = "";
56 | if ("tool_calls" in item) {
57 | toolCallText = JSON.stringify(item.tool_calls, null);
58 | }
59 | return `${item.type}:${contentText ? ` ${contentText}` : ""}${toolCallText ? ` - Tool calls: ${toolCallText}` : ""}`;
60 | }
61 |
62 | if (typeof item === "object") {
63 | return JSON.stringify(item, null);
64 | } else {
65 | return item as string;
66 | }
67 | }
68 |
69 | export function unknownToPrettyDate(input: unknown): string | undefined {
70 | try {
71 | if (
72 | Object.prototype.toString.call(input) === "[object Date]" ||
73 | new Date(input as string)
74 | ) {
75 | return format(new Date(input as string), "MM/dd/yyyy hh:mm a");
76 | }
77 | } catch (_) {
78 | // failed to parse date. no-op
79 | }
80 | return undefined;
81 | }
82 |
83 | export function constructOpenInStudioURL(
84 | deploymentUrl: string,
85 | threadId?: string
86 | ) {
87 | const smithStudioURL = new URL("https://smith.langchain.com/studio/thread");
88 | // trim the trailing slash from deploymentUrl
89 | const trimmedDeploymentUrl = deploymentUrl.replace(/\/$/, "");
90 |
91 | if (threadId) {
92 | smithStudioURL.pathname += `/${threadId}`;
93 | }
94 |
95 | smithStudioURL.searchParams.append("baseUrl", trimmedDeploymentUrl);
96 |
97 | return smithStudioURL.toString();
98 | }
99 |
100 | export function createDefaultHumanResponse(
101 | interrupts: HumanInterrupt[],
102 | initialHumanInterruptEditValue: React.MutableRefObject>
103 | ): {
104 | responses: HumanResponseWithEdits[];
105 | defaultSubmitType: SubmitType | undefined;
106 | hasAccept: boolean;
107 | } {
108 | const interrupt = interrupts[0];
109 |
110 | const responses: HumanResponseWithEdits[] = [];
111 | if (interrupt.config.allow_edit) {
112 | if (interrupt.config.allow_accept) {
113 | Object.entries(interrupt.action_request.args).forEach(([k, v]) => {
114 | let stringValue = "";
115 | if (typeof v === "string") {
116 | stringValue = v;
117 | } else {
118 | stringValue = JSON.stringify(v, null);
119 | }
120 |
121 | if (
122 | !initialHumanInterruptEditValue.current ||
123 | !(k in initialHumanInterruptEditValue.current)
124 | ) {
125 | initialHumanInterruptEditValue.current = {
126 | ...initialHumanInterruptEditValue.current,
127 | [k]: stringValue,
128 | };
129 | } else if (
130 | k in initialHumanInterruptEditValue.current &&
131 | initialHumanInterruptEditValue.current[k] !== stringValue
132 | ) {
133 | console.error(
134 | "KEY AND VALUE FOUND IN initialHumanInterruptEditValue.current THAT DOES NOT MATCH THE ACTION REQUEST",
135 | {
136 | key: k,
137 | value: stringValue,
138 | expectedValue: initialHumanInterruptEditValue.current[k],
139 | }
140 | );
141 | }
142 | });
143 | responses.push({
144 | type: "edit",
145 | args: interrupt.action_request,
146 | acceptAllowed: true,
147 | editsMade: false,
148 | });
149 | } else {
150 | responses.push({
151 | type: "edit",
152 | args: interrupt.action_request,
153 | acceptAllowed: false,
154 | });
155 | }
156 | }
157 | if (interrupt.config.allow_respond) {
158 | responses.push({
159 | type: "response",
160 | args: "",
161 | });
162 | }
163 |
164 | if (interrupt.config.allow_ignore) {
165 | responses.push({
166 | type: "ignore",
167 | args: null,
168 | });
169 | }
170 |
171 | // Set the submit type.
172 | // Priority: accept > response > edit
173 | const acceptAllowedConfig = interrupts.find((i) => i.config.allow_accept);
174 | const ignoreAllowedConfig = interrupts.find((i) => i.config.allow_ignore);
175 |
176 | const hasResponse = responses.find((r) => r.type === "response");
177 | const hasAccept =
178 | responses.find((r) => r.acceptAllowed) || acceptAllowedConfig;
179 | const hasEdit = responses.find((r) => r.type === "edit");
180 |
181 | let defaultSubmitType: SubmitType | undefined;
182 | if (hasAccept) {
183 | defaultSubmitType = "accept";
184 | } else if (hasResponse) {
185 | defaultSubmitType = "response";
186 | } else if (hasEdit) {
187 | defaultSubmitType = "edit";
188 | }
189 |
190 | if (acceptAllowedConfig && !responses.find((r) => r.type === "accept")) {
191 | responses.push({
192 | type: "accept",
193 | args: null,
194 | });
195 | }
196 | if (ignoreAllowedConfig && !responses.find((r) => r.type === "ignore")) {
197 | responses.push({
198 | type: "ignore",
199 | args: null,
200 | });
201 | }
202 |
203 | return { responses, defaultSubmitType, hasAccept: !!hasAccept };
204 | }
205 |
206 | export function haveArgsChanged(
207 | args: unknown,
208 | initialValues: Record
209 | ): boolean {
210 | if (typeof args !== "object" || !args) {
211 | return false;
212 | }
213 |
214 | const currentValues = args as Record;
215 |
216 | return Object.entries(currentValues).some(([key, value]) => {
217 | const valueString = ["string", "number"].includes(typeof value)
218 | ? value.toString()
219 | : JSON.stringify(value, null);
220 | return initialValues[key] !== valueString;
221 | });
222 | }
223 |
--------------------------------------------------------------------------------
/src/components/ui/assistant-ui/markdown-text.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import {
4 | CodeHeaderProps,
5 | MarkdownTextPrimitive,
6 | useIsMarkdownCodeBlock,
7 | } from "@assistant-ui/react-markdown";
8 | import remarkGfm from "remark-gfm";
9 | import rehypeKatex from "rehype-katex";
10 | import remarkMath from "remark-math";
11 | import { FC, memo, useState } from "react";
12 | import { CheckIcon, CopyIcon } from "lucide-react";
13 |
14 | import { TooltipIconButton } from "@/components/ui/assistant-ui/tooltip-icon-button";
15 | import { SyntaxHighlighter } from "@/components/ui/assistant-ui/syntax-highlighter";
16 | import { cn } from "@/lib/utils";
17 |
18 | import "katex/dist/katex.min.css";
19 |
20 | const MarkdownTextImpl = () => {
21 | return (
22 | (
27 |
85 | ),
86 | a: ({ node: _node, className, ...props }) => (
87 | li]:mt-2", className)}
105 | {...props}
106 | />
107 | ),
108 | ol: ({ node: _node, className, ...props }) => (
109 | li]:mt-2", className)}
111 | {...props}
112 | />
113 | ),
114 | hr: ({ node: _node, className, ...props }) => (
115 | td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
148 | className
149 | )}
150 | {...props}
151 | />
152 | ),
153 | sup: ({ node: _node, className, ...props }) => (
154 | a]:text-xs [&>a]:no-underline", className)}
156 | {...props}
157 | />
158 | ),
159 | pre: ({ node: _node, className, ...props }) => (
160 | = ({ language, code }) => {
190 | const { isCopied, copyToClipboard } = useCopyToClipboard();
191 | const onCopy = () => {
192 | if (!code || isCopied) return;
193 | copyToClipboard(code);
194 | };
195 |
196 | return (
197 |
198 | {language}
199 |
200 | {!isCopied &&
203 |
204 | );
205 | };
206 |
207 | const useCopyToClipboard = ({
208 | copiedDuration = 3000,
209 | }: {
210 | copiedDuration?: number;
211 | } = {}) => {
212 | const [isCopied, setIsCopied] = useState(false);
213 |
214 | const copyToClipboard = (value: string) => {
215 | if (!value) return;
216 |
217 | navigator.clipboard.writeText(value).then(() => {
218 | setIsCopied(true);
219 | setTimeout(() => setIsCopied(false), copiedDuration);
220 | });
221 | };
222 |
223 | return { isCopied, copyToClipboard };
224 | };
225 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/components/add-agent-inbox-dialog.tsx:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from "uuid";
2 | import { Button } from "@/components/ui/button";
3 | import {
4 | Dialog,
5 | DialogContent,
6 | DialogDescription,
7 | DialogHeader,
8 | DialogTitle,
9 | DialogTrigger,
10 | } from "@/components/ui/dialog";
11 | import { Input } from "@/components/ui/input";
12 | import { Label } from "@/components/ui/label";
13 | import React from "react";
14 | import { useThreadsContext } from "../contexts/ThreadContext";
15 | import { useToast } from "@/hooks/use-toast";
16 | import { useQueryParams } from "../hooks/use-query-params";
17 | import {
18 | AGENT_INBOX_GITHUB_README_URL,
19 | NO_INBOXES_FOUND_PARAM,
20 | } from "../constants";
21 | import { PasswordInput } from "@/components/ui/password-input";
22 |
23 | export function AddAgentInboxDialog({
24 | closeSettingsPopover,
25 | hideTrigger,
26 | langchainApiKey,
27 | handleChangeLangChainApiKey,
28 | }: {
29 | closeSettingsPopover: () => void;
30 | hideTrigger?: boolean;
31 | langchainApiKey?: string;
32 | handleChangeLangChainApiKey?: (
33 | e: React.ChangeEvent
34 | ) => void;
35 | }) {
36 | const { searchParams, updateQueryParams } = useQueryParams();
37 | const { toast } = useToast();
38 | const { addAgentInbox } = useThreadsContext();
39 | const [open, setOpen] = React.useState(false);
40 | const [graphId, setGraphId] = React.useState("");
41 | const [deploymentUrl, setDeploymentUrl] = React.useState("");
42 | const [name, setName] = React.useState("");
43 |
44 | const noInboxesFoundParam = searchParams.get(NO_INBOXES_FOUND_PARAM);
45 |
46 | React.useEffect(() => {
47 | try {
48 | if (typeof window === "undefined") {
49 | return;
50 | }
51 | if (noInboxesFoundParam === "true") {
52 | setOpen(true);
53 | }
54 | } catch (e) {
55 | console.error("Error getting/setting no inboxes found param", e);
56 | }
57 | }, [noInboxesFoundParam]);
58 |
59 | const handleSubmit = (event: React.FormEvent) => {
60 | event.preventDefault();
61 | addAgentInbox({
62 | id: uuidv4(),
63 | graphId,
64 | deploymentUrl,
65 | name,
66 | selected: true,
67 | });
68 | toast({
69 | title: "Success",
70 | description: "Agent inbox added successfully",
71 | duration: 3000,
72 | });
73 | closeSettingsPopover();
74 | updateQueryParams(NO_INBOXES_FOUND_PARAM);
75 | setOpen(false);
76 | };
77 |
78 | const isDeployedGraph = deploymentUrl.includes("default.us.langgraph.app");
79 | const showLangChainApiKeyField =
80 | noInboxesFoundParam === "true" &&
81 | langchainApiKey !== undefined &&
82 | handleChangeLangChainApiKey &&
83 | isDeployedGraph;
84 |
85 | return (
86 | {
89 | if (!c) {
90 | updateQueryParams(NO_INBOXES_FOUND_PARAM);
91 | }
92 | setOpen(c);
93 | }}
94 | >
95 | {!hideTrigger && (
96 |
97 | Add Inbox
98 |
99 | )}
100 |
101 | {noInboxesFoundParam === "true" ? (
102 |
103 | Welcome to the Agent Inbox!
104 |
105 | To get started, please add an inbox below.
106 |
107 | Not sure where to start? Check out our docs
108 |
114 | here
115 |
116 | .
117 |
118 |
119 |
120 | ) : (
121 |
122 | Add Inbox
123 | Add a new agent inbox.
124 |
125 | )}
126 |
214 |
215 |
216 | );
217 | }
218 |
--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
5 | import {
6 | CheckIcon,
7 | ChevronRightIcon,
8 | DotFilledIcon,
9 | } from "@radix-ui/react-icons";
10 |
11 | import { cn } from "@/lib/utils";
12 |
13 | const DropdownMenu = DropdownMenuPrimitive.Root;
14 |
15 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
16 |
17 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
18 |
19 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
20 |
21 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
22 |
23 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
24 |
25 | const DropdownMenuSubTrigger = React.forwardRef<
26 | React.ElementRef,
27 | React.ComponentPropsWithoutRef & {
28 | inset?: boolean;
29 | }
30 | >(({ className, inset, children, ...props }, ref) => (
31 |
40 | {children}
41 |
43 | ));
44 | DropdownMenuSubTrigger.displayName =
45 | DropdownMenuPrimitive.SubTrigger.displayName;
46 |
47 | const DropdownMenuSubContent = React.forwardRef<
48 | React.ElementRef,
49 | React.ComponentPropsWithoutRef
50 | >(({ className, ...props }, ref) => (
51 | ,
65 | React.ComponentPropsWithoutRef
66 | >(({ className, sideOffset = 4, ...props }, ref) => (
67 |
68 |
79 | ));
80 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
81 |
82 | const DropdownMenuItem = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef & {
85 | inset?: boolean;
86 | }
87 | >(({ className, inset, ...props }, ref) => (
88 | svg]:size-4 [&>svg]:shrink-0",
92 | inset && "pl-8",
93 | className
94 | )}
95 | {...props}
96 | />
97 | ));
98 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
99 |
100 | const DropdownMenuCheckboxItem = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, children, checked, ...props }, ref) => (
104 |
113 |
114 |
115 |
117 |
118 | {children}
119 |
120 | ));
121 | DropdownMenuCheckboxItem.displayName =
122 | DropdownMenuPrimitive.CheckboxItem.displayName;
123 |
124 | const DropdownMenuRadioItem = React.forwardRef<
125 | React.ElementRef,
126 | React.ComponentPropsWithoutRef
127 | >(({ className, children, ...props }, ref) => (
128 |
136 |
137 |
138 |
140 |
141 | {children}
142 |
143 | ));
144 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
145 |
146 | const DropdownMenuLabel = React.forwardRef<
147 | React.ElementRef,
148 | React.ComponentPropsWithoutRef & {
149 | inset?: boolean;
150 | }
151 | >(({ className, inset, ...props }, ref) => (
152 | ,
166 | React.ComponentPropsWithoutRef
167 | >(({ className, ...props }, ref) => (
168 | ) => {
180 | return (
181 |
69 |
70 |
71 |
72 | {agentInboxSvg}
73 |
74 |
75 |
77 |
78 |
79 |
80 | {agentInboxes.map((item, idx) => {
81 | const label = item.name || prettifyText(item.graphId);
82 | return (
83 |
90 |
91 |
92 |
93 | changeAgentInbox(item.id, true)}
95 | >
96 |
106 | {label.slice(0, 1).toUpperCase()}
107 |
108 |
114 | {label}
115 |
116 |
117 |
118 | {label}
119 |
120 |
121 | {
127 | e.stopPropagation();
128 | deleteAgentInbox(item.id);
129 | }}
130 | >
131 |
133 |
134 | );
135 | })}
136 |
139 |
140 |
145 |
150 | Documentation
152 |
153 |
154 |
156 |
157 |
158 |
159 |
160 | );
161 | }
162 |
163 | const sidebarTriggerSVG = (
164 |
171 |
179 | );
180 |
181 | export function AppSidebarTrigger({
182 | isOutside,
183 | className,
184 | }: {
185 | isOutside: boolean;
186 | className?: string;
187 | }) {
188 | const { toggleSidebar, open } = useSidebar();
189 |
190 | if (isOutside && open) {
191 | // If this component is being rendered outside the sidebar view, then do not render if open.
192 | // This way we can render the trigger inside the main view when open.
193 | return null;
194 | }
195 |
196 | return (
197 |
202 | {sidebarTriggerSVG}
203 |
204 | );
205 | }
206 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Agent Inbox
2 |
3 | 
4 |
5 | > [!NOTE]
6 | > Want to use the Agent Inbox without deploying it yourself? Check out the hosted version here: [dev.agentinbox.ai](https://dev.agentinbox.ai/)
7 |
8 | ## Prerequisites
9 |
10 | Before getting started, ensure you have:
11 | - Node.js, and yarn installed
12 | - A LangGraph deployment set up and running (locally, or in production through LangGraph Platform)
13 | - Your LangGraph API key
14 |
15 | ## Setup
16 |
17 | > [!NOTE]
18 | > 🎥 Prefer a video walkthrough? Checkout [this video](https://youtu.be/gF341XMN8cY) for a step-by-step guide.
19 |
20 | To start running the Agent Inbox, first clone the repository and install dependencies:
21 |
22 | ```bash
23 | git clone https://github.com/langchain-ai/agent-inbox.git
24 | cd agent-inbox
25 | yarn install
26 | ```
27 |
28 | ## Configuration
29 |
30 | Once up and running, you'll need to take two actions so that the Agent Inbox can connect to your LangGraph deployment.
31 |
32 | 1. Add your LangSmith API key: Click the "Settings" button in the sidebar, and enter your LangSmith API key.
33 |
34 | 2. Create your first inbox by opening the settings popover (bottom left, inside the sidebar), and clicking "Add Inbox". This will open a dialog with three fields:
35 | > - **Assistant/Graph ID**: (required) The name of your LangGraph graph, or an assistant ID. This will be used when sending human responses to your graph.
36 | > - **Deployment URL**: (required) The URL of your LangGraph deployment. This is how the Agent Inbox will connect to your LangGraph deployment for fetching interrupts, and sending human responses.
37 | > - **Name**: (optional) A name for your inbox. This will be used as a label for the inbox.
38 |
39 | These values are stored in your browser's local storage, and are only used to connect & authenticate requests to the LangGraph deployment.
40 |
41 | ## Interrupts
42 |
43 | In order to use the Agent Inbox with your LangGraph project, you'll need to update all instances of where interrupts are used in your codebase (where you want them to be compatible with the Agent Inbox).
44 |
45 | Below, you'll find the interrupt input & output schemas for both Python and TypeScript.
46 |
47 |
48 | Python Interrupt Schema
49 |
50 | ```python
51 | class HumanInterruptConfig(TypedDict):
52 | allow_ignore: bool
53 | allow_respond: bool
54 | allow_edit: bool
55 | allow_accept: bool
56 |
57 |
58 | class ActionRequest(TypedDict):
59 | action: str
60 | args: dict
61 |
62 | class HumanInterrupt(TypedDict):
63 | action_request: ActionRequest
64 | config: HumanInterruptConfig
65 | description: Optional[str]
66 |
67 |
68 | class HumanResponse(TypedDict):
69 | type: Literal['accept', 'ignore', 'response', 'edit']
70 | args: Union[None, str, ActionRequest]
71 | ```
72 |
73 |
74 |
75 | TypeScript Interrupt Schema
76 |
77 | ```typescript
78 | export interface HumanInterruptConfig {
79 | allow_ignore: boolean;
80 | allow_respond: boolean;
81 | allow_edit: boolean;
82 | allow_accept: boolean;
83 | }
84 |
85 | export interface ActionRequest {
86 | action: string;
87 | args: Record;
88 | }
89 |
90 | export interface HumanInterrupt {
91 | action_request: ActionRequest;
92 | config: HumanInterruptConfig;
93 | description?: string;
94 | }
95 |
96 | export type HumanResponse = {
97 | type: "accept" | "ignore" | "response" | "edit";
98 | args: null | string | ActionRequest;
99 | };
100 | ```
101 |
102 |
103 | ### Schema Usage
104 |
105 | The human interrupt schema is used to define the types of interrupts, and what actions can be taken in response to each interrupt. We've landed on four types of actions:
106 |
107 | - `accept`: Accept the interrupt's arguments, or action. Will send an `ActionRequest` in the `args` field on `HumanResponse`. This `ActionRequest` will be the exact same as the `action_request` field on `HumanInterrupt`, but with all keys of the `args` field on `ActionRequest` converted to strings.
108 | - `edit`: Edit the interrupt's arguments. Sends an instance of `ActionRequest` in the `args` field on `HumanResponse`. The `args` field on `ActionRequest` will have the same structure as the `args` field on `HumanInterrupt`, but the values of the keys will be strings, and will contain any edits the user has made.
109 | - `response`: Send a response to the interrupt. Does not require any arguments. Will always send back a single string in the `args` field on `HumanResponse`.
110 | - `ignore`: Ignore the interrupt's arguments, or action. Returns `null` for the `args` field on `HumanResponse`.
111 |
112 | You can set any combination of these actions in the `config` field on `HumanInterrupt`.
113 |
114 | At the moment, you're required to pass a list of `HumanInterrupt` objects in the `interrupt` function, however the UI is currently limited to rendering only the first object in the list. (We are open to suggestions for how to improve this schema, so if you have feedback, please reach out to discuss!). The same goes for the `HumanResponse`, which the Agent Inbox will always send back as a list with a single `HumanResponse` object in it.
115 |
116 | #### What do the fields mean?
117 |
118 | - `action_request`: The action and arguments for the interrupt
119 | - `action`: The name, or title of the action. This is rendered in the Agent Inbox as the main header for the interrupt event.
120 | - `args`: The arguments for the action. E.g tool call arguments.
121 | - `config`: The configuration for the interrupt
122 | - `allow_ignore`: Whether the user can ignore the interrupt
123 | - `allow_respond`: Whether the user can respond to the interrupt
124 | - `allow_edit`: Whether the user can edit the interrupt
125 | - `allow_accept`: Whether the user can accept the interrupt
126 | - `description`: A description of the interrupt
127 | - Should be detailed, and may be markdown. This will be rendered in the Agent Inbox as the description, and is commonly used to include additional context about the interrupt, and/or instructions on how to respond to the interrupt.
128 |
129 | ### How to use
130 |
131 | To use the Agent Inbox, you'll have to use the `interrupt` function, instead of raising a `NodeInterrupt` exception in your codebase. To read more about how the `interrupt` function works, see the LangGraph documentation: [conceptual guide](https://langchain-ai.github.io/langgraph/concepts/human_in_the_loop/#interrupt) [how-to guide](https://langchain-ai.github.io/langgraph/how-tos/human_in_the_loop/wait-user-input/) (TypeScript docs coming soon, but the concepts & implementation are the same).
132 |
133 | Then, when calling the `interrupt` function, you should pass an instance of `HumanInterrupt` as the `interrupt` argument. Then, when the user sends a response to the interrupt, you should expect the return value of the `interrupt` function to be an instance of `HumanResponse`.
134 |
135 | ### Examples
136 |
137 | Here's a simple example of using the interrupt function in your LangGraph project:
138 |
139 | ```python
140 | from typing import TypedDict, Literal, Optional, Union
141 | from langgraph.types import interrupt
142 |
143 | def my_graph_function():
144 | # Extract the last tool call from the `messages` field in the state
145 | tool_call = state["messages"][-1].tool_calls[0]
146 | # Create an interrupt
147 | request: HumanInterrupt = {
148 | "action_request": {
149 | "action": tool_call['name'],
150 | "args": tool_call['args']
151 | },
152 | "config": {
153 | "allow_ignore": True,
154 | "allow_respond": True,
155 | "allow_edit": False,
156 | "allow_accept": False
157 | },
158 | "description": _generate_email_markdown(state) # Generate a detailed markdown description.
159 | }
160 | # Send the interrupt request inside a list, and extract the first response
161 | response = interrupt([request])[0]
162 | if response['type'] == "response":
163 | # Do something with the response
164 | ```
165 |
166 | ## Troubleshooting
167 |
168 | Common issues and solutions:
169 |
170 | 1. **Connection Issues**
171 | - Verify your `LANGSMITH_API_KEY` is set correctly
172 | - Ensure your Deployment URL is accessible
173 | - Check if your LangGraph deployment is running
174 |
175 | 2. **Schema Validation Errors**
176 | - Ensure all required fields are present in your interrupt objects
177 | - Verify the types of all fields match the schema
178 | - Check that response handling matches expected types
179 | - Check you're sending a single `HumanInterrupt` object inside a list to the `interrupt` function
180 | - Check you're extracting the first object from the response list returned by the `interrupt` function
181 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/components/agent-inbox-logo.tsx:
--------------------------------------------------------------------------------
1 | export const agentInboxSvg = (
2 |
9 |
24 | );
25 |
--------------------------------------------------------------------------------
/src/components/agent-inbox/components/state-view.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronRight, X, ChevronsDownUp, ChevronsUpDown } from "lucide-react";
2 | import { useEffect, useState } from "react";
3 | import {
4 | baseMessageObject,
5 | isArrayOfMessages,
6 | prettifyText,
7 | unknownToPrettyDate,
8 | } from "../utils";
9 | import { motion } from "framer-motion";
10 | import { cn } from "@/lib/utils";
11 | import { BaseMessage } from "@langchain/core/messages";
12 | import { ToolCall } from "@langchain/core/messages/tool";
13 | import React from "react";
14 | import { Button } from "../../ui/button";
15 | import { ToolCallTable } from "./tool-call-table";
16 | import { MarkdownText } from "@/components/ui/markdown-text";
17 | import { ThreadData } from "../types";
18 |
19 | interface StateViewRecursiveProps {
20 | value: unknown;
21 | expanded?: boolean;
22 | }
23 |
24 | const messageTypeToLabel = (message: BaseMessage) => {
25 | let type = "";
26 | if ("type" in message) {
27 | type = message.type as string;
28 | } else {
29 | type = message._getType();
30 | }
31 |
32 | switch (type) {
33 | case "human":
34 | return "User";
35 | case "ai":
36 | return "Assistant";
37 | case "tool":
38 | return "Tool";
39 | case "System":
40 | return "System";
41 | default:
42 | return "";
43 | }
44 | };
45 |
46 | function MessagesRenderer({ messages }: { messages: BaseMessage[] }) {
47 | return (
48 |
49 | {messages.map((msg, idx) => {
50 | const messageTypeLabel = messageTypeToLabel(msg);
51 | const content =
52 | typeof msg.content === "string"
53 | ? msg.content
54 | : JSON.stringify(msg.content, null);
55 | return (
56 |
60 |
{messageTypeLabel}:
61 | {content && (
62 |
{content}
63 | )}
64 | {"tool_calls" in msg && msg.tool_calls ? (
65 |
66 | {(msg.tool_calls as ToolCall[]).map((tc, idx) => (
67 |
73 | ) : null}
74 |
75 | );
76 | })}
77 |
{date}
;
85 | }
86 |
87 | if (["string", "number"].includes(typeof props.value)) {
88 | return (
89 |
90 | {props.value as string}
91 |
92 | );
93 | }
94 |
95 | if (typeof props.value === "boolean") {
96 | return (
97 |
98 | {JSON.stringify(props.value)}
99 |
100 | );
101 | }
102 |
103 | if (props.value == null) {
104 | return null
;
105 | }
106 |
107 | if (Array.isArray(props.value)) {
108 | if (props.value.length > 0 && isArrayOfMessages(props.value)) {
109 | return
115 |
[
116 | {valueArray.map((item, idx) => {
117 | const itemRenderValue = baseMessageObject(item);
118 | return (
119 |
123 | ,
126 | )}
127 |
128 | );
129 | })}
130 |
]
131 |
{"{}"}
;
138 | }
139 | return (
140 |
141 | {/* Vertical line */}
142 |
143 |
144 | {Object.entries(props.value).map(([key, value], idx) => (
145 |
149 | {/* Horizontal connector line */}
150 |
151 |
156 |
157 | ))}
158 |
174 | {"{...}"}
175 |
176 | );
177 | }
178 |
179 | interface StateViewProps {
180 | keyName: string;
181 | value: unknown;
182 | /**
183 | * Whether or not to expand or collapse the view
184 | * @default true
185 | */
186 | expanded?: boolean;
187 | }
188 |
189 | export function StateViewObject(props: StateViewProps) {
190 | const [expanded, setExpanded] = useState(false);
191 |
192 | useEffect(() => {
193 | if (props.expanded != null) {
194 | setExpanded(props.expanded);
195 | }
196 | }, [props.expanded]);
197 |
198 | return (
199 |
200 |
205 | setExpanded((prev) => !prev)}
207 | className="w-5 h-5 flex items-center justify-center hover:bg-gray-100 text-gray-500 hover:text-black rounded-md transition-colors ease-in-out cursor-pointer"
208 | >
209 |
211 |
212 |
213 |
214 | {prettifyText(props.keyName)}{" "}
215 | {!expanded && (
216 | setExpanded((prev) => !prev)} />
217 | )}
218 |
219 |
232 |
234 |
235 |
>;
241 | handleShowSidePanel: (showState: boolean, showDescription: boolean) => void;
242 | view: "description" | "state";
243 | }
244 |
245 | export function StateView({
246 | threadData,
247 | handleShowSidePanel,
248 | view,
249 | }: StateViewComponentProps) {
250 | const [expanded, setExpanded] = useState(false);
251 |
252 | const threadValues = threadData.thread.values;
253 | const description = threadData.interrupts?.[0].description;
254 |
255 | if (!threadValues) {
256 | return No state found
;
257 | }
258 |
259 | return (
260 |
261 | {view === "description" && (
262 |
263 |
264 | {description || "No description provided"}
265 |
266 |
267 | )}
268 | {view === "state" && (
269 |
270 | {Object.entries(threadValues).map(([k, v], idx) => (
271 |
279 | )}
280 |
281 | {view === "state" && (
282 | setExpanded((prev) => !prev)}
284 | variant="ghost"
285 | className="text-gray-600"
286 | size="sm"
287 | >
288 | {expanded ? (
289 |
294 | )}
295 |
296 | handleShowSidePanel(false, false)}
298 | variant="ghost"
299 | className="text-gray-600"
300 | size="sm"
301 | >
302 |
304 |
305 |