langgraph-ui-components 0.0.24 → 0.0.27

package/src/components/messages/AgentMessage.tsx

@@ -1,12 +1,20 @@
 import { cn } from "@/utils/tailwindUtil";
 import { getContentString } from "@/utils/utils";
 import type { Message } from "@langchain/langgraph-sdk";
-import { BotMessageSquare, ChevronRight, Loader2, LoaderCircle, Sparkles } from "lucide-react";
+import { BotMessageSquare, ChevronRight, LoaderCircle, Sparkles, Wrench } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { AgentMarkdown } from "../ui/AgentMarkdown";
 import { BranchSwitcher } from "./BranchSwitcher";
 import { MessageActions, type MessageFeedback } from "./MessageActions";
 
+type ToolStatusEntry = {
+  id?: string;
+  name?: string;
+  label?: string;
+  event?: string;
+  visible?: boolean;
+};
+
 function getReasoningFromKwargs(message: Message | undefined): string | null {
   if (!message) return null;
   const ak = (message as Record<string, unknown>).additional_kwargs as
@@ -22,13 +30,28 @@ function getReasoningFromKwargs(message: Message | undefined): string | null {
   return null;
 }
 
-function InlineThinking({ text, isStreaming, fontSize }: { text: string; isStreaming?: boolean; fontSize?: string }) {
+function AgentActivity({
+  reasoningText,
+  toolStatuses,
+  isStreaming,
+  fontSize,
+}: {
+  reasoningText?: string;
+  toolStatuses?: Array<{ key: string; label: string; isCompleted: boolean }>;
+  isStreaming?: boolean;
+  fontSize?: string;
+}) {
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
     setExpanded(!!isStreaming);
   }, [isStreaming]);
 
+  const hasTools = toolStatuses && toolStatuses.length > 0;
+  const hasReasoning = !!reasoningText && reasoningText.length > 0;
+
+  if (!hasTools && !hasReasoning && !isStreaming) return null;
+
   return (
     <div className="my-1">
       <button
@@ -50,95 +73,284 @@ function InlineThinking({ text, isStreaming, fontSize }: { text: string; isStrea
         />
       </button>
       {expanded && (
-        <div className="mt-1.5 border-l-2 border-white/10 pl-4 text-sm text-zinc-300">
-          <AgentMarkdown fontSize={fontSize}>{text}</AgentMarkdown>
+        <div className="mt-1.5 border-l-2 border-white/10 pl-4 space-y-1">
+          {hasTools && toolStatuses!.map((ts) => (
+            <div key={ts.key} className="flex items-center gap-2 text-sm text-zinc-300 py-0.5">
+              {!ts.isCompleted && (
+                <LoaderCircle className="size-3.5 animate-spin text-zinc-400" />
+              )}
+              <Wrench className="size-3.5 text-zinc-500" />
+              <span>{ts.label}</span>
+            </div>
+          ))}
+          {hasReasoning && (
+            <div className="text-sm text-zinc-300">
+              <AgentMarkdown fontSize={fontSize}>{reasoningText!}</AgentMarkdown>
+            </div>
+          )}
         </div>
       )}
     </div>
   );
 }
 
-function renderContentInline(message: Message | undefined, isActivelyStreaming?: boolean, fontSize?: string) {
-  if (!message) return null;
-  const content = message.content;
-  const parts: React.ReactNode[] = [];
+function toToolStatusEntry(value: unknown): ToolStatusEntry | null {
+  if (!value || typeof value !== "object") return null;
+  const v = value as Record<string, unknown>;
 
-  const kwargsReasoning = getReasoningFromKwargs(message);
-  if (kwargsReasoning) {
-    const hasTextContent =
-      typeof content === "string"
-        ? content.length > 0
-        : Array.isArray(content) &&
-          (content as Record<string, unknown>[]).some(
-            (b) =>
-              b.type === "text" &&
-              typeof b.text === "string" &&
-              (b.text as string).length > 0,
-          );
-    parts.push(
-      <InlineThinking
-        key="kwargs-reasoning"
-        text={kwargsReasoning}
-        isStreaming={isActivelyStreaming && !hasTextContent}
-        fontSize={fontSize}
-      />,
-    );
-  }
+  const visible =
+    typeof v.visible === "boolean"
+      ? v.visible
+      : typeof v.show === "boolean"
+        ? v.show
+        : typeof v.display === "boolean"
+          ? v.display
+          : typeof v.hidden === "boolean"
+            ? !v.hidden
+            : true;
+
+  return {
+    id: typeof v.id === "string" ? v.id : undefined,
+    name: typeof v.name === "string" ? v.name : undefined,
+    label: typeof v.label === "string" ? v.label : undefined,
+    event: typeof v.event === "string" ? v.event : undefined,
+    visible,
+  };
+}
+
+function getToolStatusFromKwargs(message: Message | undefined): ToolStatusEntry[] {
+  if (!message) return [];
+  const ak = (message as Record<string, unknown>).additional_kwargs as
+    | Record<string, unknown>
+    | undefined;
+
+  if (!ak || !Array.isArray(ak.tool_status)) return [];
+
+  return (ak.tool_status as unknown[])
+    .map(toToolStatusEntry)
+    .filter((s): s is ToolStatusEntry => s !== null);
+}
+
+function hasToolStatusFieldInKwargs(message: Message | undefined): boolean {
+  if (!message) return false;
+  const ak = (message as Record<string, unknown>).additional_kwargs as
+    | Record<string, unknown>
+    | undefined;
+  if (!ak) return false;
+  return Object.prototype.hasOwnProperty.call(ak, "tool_status");
+}
+
+function normalizeSemanticKey(value: string | undefined): string {
+  if (!value) return "";
+  return value
+    .toLowerCase()
+    .replace(/\s+/g, " ")
+    .replace(/\s*event:\s*metadata\s*$/i, "")
+    .trim();
+}
+
+function shouldRenderToolStatus(status: ToolStatusEntry): boolean {
+  if (status.visible === false) return false;
+
+  const labelKey = normalizeSemanticKey(status.label);
+  if (labelKey.length === 0) return false;
 
-  if (typeof content === "string") {
-    if (content.length > 0) {
-      parts.push(
-        <div key="text-content" className="py-1">
-          <AgentMarkdown fontSize={fontSize}>{content}</AgentMarkdown>
-        </div>,
-      );
+  // Filter transport/debug noise like "event: metadata".
+  if (status.event?.toLowerCase() === "metadata") return false;
+  if (/\bevent:\s*metadata\b/i.test(status.label ?? "")) return false;
+
+  return true;
+}
+
+function normalizeToolLabel(name: string, input: unknown): string {
+  if (!input) return name;
+  if (typeof input === "string") {
+    const trimmed = input.trim();
+    if (trimmed.length === 0) return name;
+    return `${name} ${trimmed.slice(0, 80)}${trimmed.length > 80 ? "..." : ""}`;
+  }
+  if (typeof input === "object") {
+    try {
+      const json = JSON.stringify(input);
+      return `${name} ${json.length > 80 ? `${json.slice(0, 80)}...` : json}`;
+    } catch {
+      return name;
     }
-    return parts.length > 0 ? <>{parts}</> : null;
   }
+  return name;
+}
 
-  if (!Array.isArray(content)) return null;
+function renderContentInline(
+  groupedMessages: Message[] | undefined,
+  showToolActivity: boolean,
+  isActivelyStreaming?: boolean,
+  fontSize?: string,
+) {
+  if (!groupedMessages || groupedMessages.length === 0) return null;
 
-  const blocks = content as Record<string, unknown>[];
-  let textAccum = "";
-  let idx = 0;
+  const timeline = groupedMessages;
+  const toolMessages = timeline.filter((m) => m.type === "tool");
+  const hasBackendToolStatus = timeline.some((m) => hasToolStatusFieldInKwargs(m));
 
-  const flushText = () => {
-    if (textAccum.length > 0) {
-      parts.push(
-        <div key={`text-${idx}`} className="py-1">
-          <AgentMarkdown fontSize={fontSize}>{textAccum}</AgentMarkdown>
-        </div>,
-      );
-      textAccum = "";
-      idx++;
+  const completedToolIds = new Set(
+    toolMessages
+      .map((m) => (m as Record<string, unknown>).tool_call_id)
+      .filter((id): id is string => typeof id === "string" && id.length > 0),
+  );
+  const completedToolNames = new Set(
+    toolMessages
+      .map((m) => (m as Record<string, unknown>).name)
+      .filter((name): name is string => typeof name === "string" && name.length > 0),
+  );
+
+  // ── Collect activity (reasoning + tool statuses) and text content separately ──
+  const collectedToolStatuses: Array<{ key: string; label: string; isCompleted: boolean }> = [];
+  const reasoningTexts: string[] = [];
+  const textParts: React.ReactNode[] = [];
+  const renderedToolKeys = new Set<string>();
+  let textIdx = 0;
+
+  const collectToolStatusFromKwargs = (message: Message) => {
+    if (!showToolActivity) return;
+    for (const status of getToolStatusFromKwargs(message)) {
+      if (!shouldRenderToolStatus(status)) continue;
+      const semanticKey =
+        normalizeSemanticKey(status.label) || normalizeSemanticKey(status.name) || "tool";
+      if (renderedToolKeys.has(semanticKey)) continue;
+      renderedToolKeys.add(semanticKey);
+      const label = status.label ?? status.name ?? "Running tool";
+      const isCompleted =
+        (status.id ? completedToolIds.has(status.id) : false) ||
+        (status.name ? completedToolNames.has(status.name) : false) ||
+        !isActivelyStreaming;
+      collectedToolStatuses.push({ key: semanticKey, label, isCompleted });
     }
   };
 
-  for (let i = 0; i < blocks.length; i++) {
-    const block = blocks[i];
-    if (block.type === "text" && typeof block.text === "string") {
-      textAccum += block.text;
-    } else if (
-      (block.type === "reasoning" && typeof block.reasoning === "string") ||
-      (block.type === "thinking" && typeof block.thinking === "string")
-    ) {
+  for (const message of timeline) {
+    if (message.type !== "ai") continue;
+
+    const content = message.content;
+    const kwargsReasoning = getReasoningFromKwargs(message);
+
+    // Collect tool statuses from kwargs
+    collectToolStatusFromKwargs(message);
+
+    if (typeof content === "string") {
+      if (kwargsReasoning) {
+        // When reasoning_content exists in kwargs, the string content is the
+        // same thinking text (set by messages-tuple before wrapModelCall clears
+        // it). Capture it only as reasoning to avoid duplication.
+        reasoningTexts.push(kwargsReasoning);
+      } else if (content.length > 0) {
+        textParts.push(
+          <div key={`text-content-${message.id ?? textIdx}`} className="py-1">
+            <AgentMarkdown fontSize={fontSize}>{content}</AgentMarkdown>
+          </div>,
+        );
+        textIdx++;
+      }
+      continue;
+    }
+
+    if (!Array.isArray(content)) {
+      if (kwargsReasoning) reasoningTexts.push(kwargsReasoning);
+      continue;
+    }
+
+    const blocks = content as Record<string, unknown>[];
+    let textAccum = "";
+    let hasReasoningBlock = false;
+
+    const flushText = () => {
+      if (textAccum.length > 0) {
+        textParts.push(
+          <div key={`text-${message.id ?? textIdx}-${textIdx}`} className="py-1">
+            <AgentMarkdown fontSize={fontSize}>{textAccum}</AgentMarkdown>
+          </div>,
+        );
+        textAccum = "";
+        textIdx++;
+      }
+    };
+
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (block.type === "text" && typeof block.text === "string") {
+        textAccum += block.text;
+        continue;
+      }
+
+      if (
+        (block.type === "reasoning" && typeof block.reasoning === "string") ||
+        (block.type === "thinking" && typeof block.thinking === "string")
+      ) {
+        flushText();
+        hasReasoningBlock = true;
+        const text = (block.reasoning ?? block.thinking) as string;
+        reasoningTexts.push(text);
+        continue;
+      }
+
+      if (showToolActivity && !hasBackendToolStatus && block.type === "tool_use") {
+        flushText();
+        const toolId = typeof block.id === "string" ? block.id : undefined;
+        const toolName = typeof block.name === "string" ? block.name : "tool";
+        const semanticKey = normalizeSemanticKey(toolName) || `tool-${i}`;
+        if (!renderedToolKeys.has(semanticKey)) {
+          renderedToolKeys.add(semanticKey);
+          const label = normalizeToolLabel(toolName, (block as Record<string, unknown>).input);
+          const isCompleted = toolId ? completedToolIds.has(toolId) : !isActivelyStreaming;
+          collectedToolStatuses.push({ key: semanticKey, label, isCompleted });
+        }
+      }
+    }
+
+    if (!hasReasoningBlock && kwargsReasoning) {
+      // Same as the string-content case: kwargs reasoning duplicates the
+      // text blocks, so discard accumulated text and capture as reasoning only.
+      textAccum = "";
+      reasoningTexts.push(kwargsReasoning);
+    } else {
       flushText();
-      const text = (block.reasoning ?? block.thinking) as string;
-      const hasTextAfter = blocks.slice(i + 1).some(
-        (b) =>
-          b.type === "text" &&
-          typeof b.text === "string" &&
-          (b.text as string).length > 0,
-      );
-      const isThisBlockStreaming = isActivelyStreaming && !hasTextAfter;
-      parts.push(
-        <InlineThinking key={`thinking-${idx}`} text={text} isStreaming={isThisBlockStreaming} fontSize={fontSize} />,
-      );
-      idx++;
     }
   }
 
-  flushText();
+  // Fallback for legacy payloads without backend tool_status (only after streaming completes)
+  if (showToolActivity && !isActivelyStreaming && !hasBackendToolStatus && collectedToolStatuses.length === 0 && textParts.length === 0 && toolMessages.length > 0) {
+    for (const toolMessage of toolMessages) {
+      collectedToolStatuses.push({
+        key: `tool-msg-${toolMessage.id ?? textIdx}`,
+        label: "Tool call completed",
+        isCompleted: true,
+      });
+      textIdx++;
+    }
+  }
+
+  // ── Assemble output: AgentActivity block first, then text content ──
+  const parts: React.ReactNode[] = [];
+  const hasTextContent = textParts.length > 0;
+  const combinedReasoning = reasoningTexts.join("\n\n");
+  const hasActivity =
+    (showToolActivity && collectedToolStatuses.length > 0) ||
+    combinedReasoning.length > 0;
+  const activityIsStreaming = !!isActivelyStreaming && !hasTextContent;
+
+  if (hasActivity || activityIsStreaming) {
+    parts.push(
+      <AgentActivity
+        key="agent-activity"
+        reasoningText={combinedReasoning || undefined}
+        toolStatuses={showToolActivity ? collectedToolStatuses : undefined}
+        isStreaming={activityIsStreaming}
+        fontSize={fontSize}
+      />,
+    );
+  }
+
+  parts.push(...textParts);
+
   return parts.length > 0 ? <>{parts}</> : null;
 }
 
@@ -146,6 +358,8 @@ function AgentMessage({
   agentName,
   fontSize,
   message,
+  groupedMessages,
+  showToolActivity = true,
   isStreaming = false,
   onRegenerate,
   feedback,
@@ -157,6 +371,8 @@ function AgentMessage({
   agentName?: string;
   fontSize?: string;
   message: Message;
+  groupedMessages?: Message[];
+  showToolActivity?: boolean;
   isStreaming?: boolean;
   onRegenerate?: (parentCheckpoint: any | null | undefined, messageId: string, currentMessage: any) => void;
   feedback?: MessageFeedback;
@@ -166,7 +382,7 @@ function AgentMessage({
   onBranchSelect?: (branch: string) => void;
 }) {
   const content = getContentString(message?.content);
-  const inlineContent = renderContentInline(message, isStreaming, fontSize);
+  const inlineContent = renderContentInline(groupedMessages ?? [message], showToolActivity, isStreaming, fontSize);
 
   return (
     <div className="agent-message flex flex-col gap-1 w-full group">
@@ -186,7 +402,7 @@ function AgentMessage({
           ) : (
             <>
               <div className="flex items-center gap-2 text-zinc-500">
-                <Loader2 className="animate-spin" size={16} />
+                {/* <Loader2 className="animate-spin" size={16} /> */}
                 <span>Thinking...</span>
               </div>
               {isStreaming && content && (
@@ -231,6 +447,8 @@ export default React.memo(AgentMessage, (prevProps, nextProps) => {
   // Otherwise, only re-render if the message ID, feedback, branch, or callbacks changed
   return (
     prevProps.message.id === nextProps.message.id &&
+    prevProps.groupedMessages?.length === nextProps.groupedMessages?.length &&
+    prevProps.showToolActivity === nextProps.showToolActivity &&
     prevProps.isStreaming === nextProps.isStreaming &&
     prevProps.feedback === nextProps.feedback &&
     prevProps.onRegenerate === nextProps.onRegenerate &&

package/src/components/sidebar/ChatInput.tsx

@@ -344,7 +344,7 @@ function DropdownSelector<T extends { id: string; label: string }>({
         ref={buttonRef}
         type="button"
         onClick={() => setOpen((p) => !p)}
-        className="flex items-center gap-1.5 rounded-lg border border-border/50 bg-background px-3 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        className="flex items-center gap-1.5 rounded-lg border border-zinc-700 bg-zinc-800 px-3 py-1.5 text-xs text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white"
       >
         <span className="truncate" style={{ maxWidth }} title={fullLabel}>
           {displayLabel}
@@ -355,7 +355,7 @@ function DropdownSelector<T extends { id: string; label: string }>({
         <div
           ref={menuRef}
           style={menuStyle}
-          className="z-9999 min-w-55 max-h-77 overflow-y-auto rounded-xl border bg-popover p-1 shadow-lg [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-track]:bg-transparent"
+          className="z-[9999] min-w-[14rem] max-h-[19rem] overflow-y-auto rounded-xl border border-zinc-700 bg-zinc-900 text-white p-1 shadow-lg [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-600 [&::-webkit-scrollbar-track]:bg-transparent"
         >
           {items.map((item) => (
             <button
@@ -366,12 +366,12 @@ function DropdownSelector<T extends { id: string; label: string }>({
                 setOpen(false);
               }}
               className={cn(
-                "flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-accent",
-                item.id === selected && "bg-accent/50 font-medium",
+                "flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-sm text-zinc-300 transition-colors hover:bg-zinc-800 hover:text-white",
+                item.id === selected && "bg-zinc-800 font-medium text-white",
               )}
             >
               <span className="truncate">{item.label}</span>
-              {item.id === selected && <Check className="size-4 shrink-0 text-primary" />}
+              {item.id === selected && <Check className="size-4 shrink-0 text-zinc-300" />}
             </button>
           ))}
         </div>,

package/src/entries/providers.ts

@@ -5,7 +5,7 @@ export { ThreadProvider } from "../providers/Thread";
 export { StreamProvider } from "../providers/Stream";
 export { FileProvider } from "../providers/FileProvider";
 export { CustomComponentProvider } from "../providers/CustomComponentProvider";
-export type { CustomComponentContextValue } from "../providers/CustomComponentProvider";
+export type { CustomComponentContextValue, InterruptComponentProps } from "../providers/CustomComponentProvider";
 
 // ─── Provider hooks ───────────────────────────────────────────────────────────
 export { useThread } from "../providers/Thread";

package/src/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/theme" layer(theme);
+@import "tailwindcss/utilities" layer(utilities);
+@plugin "tailwindcss-animate";

package/src/index.ts

@@ -9,7 +9,7 @@ export { ThreadProvider } from "./providers/Thread";
 export { StreamProvider } from "./providers/Stream";
 export { FileProvider } from "./providers/FileProvider";
 export { CustomComponentProvider } from "./providers/CustomComponentProvider";
-export type { CustomComponentContextValue } from "./providers/CustomComponentProvider";
+export type { CustomComponentContextValue, InterruptComponentProps } from "./providers/CustomComponentProvider";
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────
 export { useTools } from "./hooks/useTools";

package/src/pages/Sidebar/sidebar.tsx

@@ -316,7 +316,7 @@ export default function Sidebar(props: ChatSidebarProps) {
                     setInput={setInput}
                     textToSpeechVoice={textToSpeechVoice}
                     handleSubmit={defaultHandleSubmit}
-                    isLoading={isLoading}
+                    isLoading={isLoading || !!preventSubmit}
                     fileInput={fileInput}
                     handleFileSelect={onFileSelect}
                     setFileInput={setFileInput}

package/src/providers/ChatProvider.tsx

@@ -26,6 +26,11 @@ interface ChatProviderProps {
    * Defaults to a plain `<div>Loading chat...</div>` if not provided.
    */
   suspenseFallback?: React.ReactNode;
+  /**
+   * Initial thread mode. Use `"multi"` to enable thread history and switching.
+   * Defaults to `"single"` (one conversation, no history panel).
+   */
+  initialMode?: "single" | "multi";
 }
 
 /**
@@ -35,10 +40,21 @@ interface ChatProviderProps {
  * 
  * @example
  * ```tsx
+ * // Single-thread mode (default)
+ * <ChatProvider
+ *   apiUrl="https://api.example.com"
+ *   assistantId="my-assistant"
+ *   identity={{ user_id: "user123", org_id: "org456" }}
+ * >
+ *   <YourChatUI />
+ * </ChatProvider>
+ *
+ * // Multi-thread mode (enables thread history)
  * <ChatProvider
  *   apiUrl="https://api.example.com"
  *   assistantId="my-assistant"
  *   identity={{ user_id: "user123", org_id: "org456" }}
+ *   initialMode="multi"
  * >
  *   <YourChatUI />
  * </ChatProvider>
@@ -51,6 +67,7 @@ export function ChatProvider({
   children,
   customComponents,
   suspenseFallback = <div>Loading chat...</div>,
+  initialMode = "single",
 }: ChatProviderProps) {
   return (
     <React.Suspense fallback={suspenseFallback}>
@@ -59,7 +76,7 @@ export function ChatProvider({
         assistantId={assistantId}
         identity={identity}
       >
-        <ThreadProvider>
+        <ThreadProvider initialMode={initialMode}>
           <StreamProvider>
             <SuggestionProvider>
               <CustomComponentProvider initialComponents={customComponents}>

package/src/providers/CustomComponentProvider.tsx

@@ -1,5 +1,14 @@
 import React, { createContext, useCallback, useContext, useState } from "react";
 
+export interface InterruptComponentProps {
+  interrupt: any;
+  actions: {
+    approve: () => void;
+    reject: (reason?: string) => void;
+    edit: (editedArgs: Record<string, unknown>) => void;
+  };
+}
+
 export interface CustomComponentContextValue {
   components: Record<string, React.FunctionComponent | React.ComponentClass>;
   registerComponent: (
@@ -10,6 +19,12 @@ export interface CustomComponentContextValue {
     components: Record<string, React.FunctionComponent | React.ComponentClass>
   ) => void;
   unregisterComponent: (name: string) => void;
+  interruptComponents: Record<string, React.ComponentType<InterruptComponentProps>>;
+  registerInterruptComponent: (
+    toolName: string,
+    component: React.ComponentType<InterruptComponentProps>
+  ) => void;
+  unregisterInterruptComponent: (toolName: string) => void;
 }
 
 const CustomComponentContext = createContext<
@@ -33,6 +48,9 @@ export function CustomComponentProvider({
       initialComponents
     );
 
+  const [interruptComponents, setInterruptComponents] =
+    useState<Record<string, React.ComponentType<InterruptComponentProps>>>({});
+
   const registerComponent = useCallback(
     (
       name: string,
@@ -68,6 +86,26 @@ export function CustomComponentProvider({
     });
   }, []);
 
+  const registerInterruptComponent = useCallback(
+    (
+      toolName: string,
+      component: React.ComponentType<InterruptComponentProps>
+    ) => {
+      setInterruptComponents((prev) => ({
+        ...prev,
+        [toolName]: component,
+      }));
+    },
+    []
+  );
+
+  const unregisterInterruptComponent = useCallback((toolName: string) => {
+    setInterruptComponents((prev) => {
+      const { [toolName]: _, ...rest } = prev;
+      return rest;
+    });
+  }, []);
+
   return (
     <CustomComponentContext.Provider
       value={{
@@ -75,6 +113,9 @@ export function CustomComponentProvider({
         registerComponent,
         registerComponents,
         unregisterComponent,
+        interruptComponents,
+        registerInterruptComponent,
+        unregisterInterruptComponent,
       }}
     >
       {children}