langgraph-ui-components 0.0.25 → 0.0.28

package/src/components/messages/AgentMessage.tsx

@@ -1,12 +1,22 @@
 import { cn } from "@/utils/tailwindUtil";
+import type { TodoItem } from "@/providers/Stream";
 import { getContentString } from "@/utils/utils";
 import type { Message } from "@langchain/langgraph-sdk";
-import { BotMessageSquare, ChevronRight, LoaderCircle, Sparkles } from "lucide-react";
+import { BotMessageSquare, ChevronRight, LoaderCircle, Sparkles, Wrench } from "lucide-react";
 import React, { useEffect, useState } from "react";
+import TodoList from "../TodoList";
 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,12 +32,14 @@ function getReasoningFromKwargs(message: Message | undefined): string | null {
   return null;
 }
 
-function InlineThinking({
-  text,
+function AgentActivity({
+  reasoningText,
+  toolStatuses,
   isStreaming,
   fontSize,
 }: {
-  text: string;
+  reasoningText?: string;
+  toolStatuses?: Array<{ key: string; label: string; isCompleted: boolean }>;
   isStreaming?: boolean;
   fontSize?: string;
 }) {
@@ -37,6 +49,11 @@ function InlineThinking({
     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
@@ -58,105 +75,284 @@ function InlineThinking({
         />
       </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 toToolStatusEntry(value: unknown): ToolStatusEntry | null {
+  if (!value || typeof value !== "object") return null;
+  const v = value as Record<string, unknown>;
+
+  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;
+
+  // 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 name;
+}
+
 function renderContentInline(
-  message: Message | undefined,
+  groupedMessages: Message[] | undefined,
+  showToolActivity: boolean,
   isActivelyStreaming?: boolean,
   fontSize?: string,
 ) {
-  if (!message) return null;
-  const content = message.content;
-  const parts: React.ReactNode[] = [];
+  if (!groupedMessages || groupedMessages.length === 0) return null;
 
-  const kwargsReasoning = getReasoningFromKwargs(message);
-  if (kwargsReasoning) {
-    const hasTextContent =
-      typeof content === "string"
-        ? content.length > 0
-        : Array.isArray(content) &&
-          (content as Record<string, unknown>[]).some(
-            (block) =>
-              block.type === "text" &&
-              typeof block.text === "string" &&
-              (block.text as string).length > 0,
-          );
+  const timeline = groupedMessages;
+  const toolMessages = timeline.filter((m) => m.type === "tool");
+  const hasBackendToolStatus = timeline.some((m) => hasToolStatusFieldInKwargs(m));
 
-    parts.push(
-      <InlineThinking
-        key="kwargs-reasoning"
-        text={kwargsReasoning}
-        isStreaming={isActivelyStreaming && !hasTextContent}
-        fontSize={fontSize}
-      />,
-    );
-  }
+  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;
 
-  if (typeof content === "string") {
-    if (content.length > 0) {
-      parts.push(
-        <div key="text-content" className="py-1">
-          <AgentMarkdown fontSize={fontSize}>{content}</AgentMarkdown>
-        </div>,
-      );
+  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 });
     }
-    return parts.length > 0 ? <>{parts}</> : null;
-  }
+  };
 
-  if (!Array.isArray(content)) return null;
+  for (const message of timeline) {
+    if (message.type !== "ai") continue;
 
-  const blocks = content as Record<string, unknown>[];
-  let textAccum = "";
-  let idx = 0;
+    const content = message.content;
+    const kwargsReasoning = getReasoningFromKwargs(message);
 
-  const flushText = () => {
-    if (textAccum.length > 0) {
-      parts.push(
-        <div key={`text-${idx}`} className="py-1">
-          <AgentMarkdown fontSize={fontSize}>{textAccum}</AgentMarkdown>
-        </div>,
-      );
-      textAccum = "";
-      idx++;
+    // 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;
     }
-  };
 
-  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")
-    ) {
+    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;
 }
 
@@ -164,6 +360,8 @@ function AgentMessage({
   agentName,
   fontSize,
   message,
+  groupedMessages,
+  showToolActivity = true,
   isStreaming = false,
   onRegenerate,
   feedback,
@@ -171,10 +369,13 @@ function AgentMessage({
   branch,
   branchOptions,
   onBranchSelect,
+  todos,
 }: {
   agentName?: string;
   fontSize?: string;
   message: Message;
+  groupedMessages?: Message[];
+  showToolActivity?: boolean;
   isStreaming?: boolean;
   onRegenerate?: (parentCheckpoint: any | null | undefined, messageId: string, currentMessage: any) => void;
   feedback?: MessageFeedback;
@@ -182,9 +383,10 @@ function AgentMessage({
   branch?: string;
   branchOptions?: string[];
   onBranchSelect?: (branch: string) => void;
+  todos?: TodoItem[];
 }) {
   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">
@@ -198,6 +400,7 @@ function AgentMessage({
         <span className="text-zinc-500 text-sm">{agentName || "Agent"}</span>
       </div>
       <div className="flex flex-1 flex-col gap-1 items-start min-w-0">
+        {todos && todos.length > 0 && <TodoList todos={todos} />}
         <div className="text-content text-foreground" style={fontSize ? { fontSize } : undefined}>
           {inlineContent ? (
             inlineContent
@@ -249,12 +452,15 @@ 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 &&
     prevProps.onFeedback === nextProps.onFeedback &&
     prevProps.branch === nextProps.branch &&
     prevProps.branchOptions?.length === nextProps.branchOptions?.length &&
-    prevProps.onBranchSelect === nextProps.onBranchSelect
+    prevProps.onBranchSelect === nextProps.onBranchSelect &&
+    prevProps.todos === nextProps.todos
   );
 });

package/src/components/messages/CustomComponentRender.tsx

@@ -40,7 +40,7 @@ function CustomComponentRender({
           return (
             <LoadExternalComponent
               key={(customComponent as any)._key || `${message.id}-${customComponent.id || index}`}
-              stream={thread}
+              stream={thread as any}
               message={customComponent}
               components={components}
               meta={{ ...componentProps, ui: customComponent }}

package/src/entries/components.ts

@@ -1,5 +1,3 @@
-import "../index.css";
-
 // ─── Components ───────────────────────────────────────────────────────────────
 export { default as Sidebar } from "../pages/Sidebar/sidebar";
 export { Chat } from "../pages/Chat/Chat";

package/src/entries/hooks.ts

@@ -1,5 +1,3 @@
-import "../index.css";
-
 // ─── Hooks ────────────────────────────────────────────────────────────────────
 export { useTools } from "../hooks/useTools";
 export { default as useToolsDefault } from "../hooks/useTools";

package/src/entries/providers.ts

@@ -1,5 +1,3 @@
-import "../index.css";
-
 // ─── Providers ────────────────────────────────────────────────────────────────
 export { ChatProvider } from "../providers/ChatProvider";
 export { ChatRuntimeProvider } from "../providers/ChatRuntime";
@@ -7,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

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

package/src/index.ts

@@ -1,5 +1,3 @@
-import "./index.css";
-
 // ─── Components ──────────────────────────────────────────────────────────────
 export { default as Sidebar } from "./pages/Sidebar/sidebar";
 export { Chat } from "./pages/Chat/Chat";
@@ -11,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";
@@ -30,7 +28,7 @@ export { useModels } from "./hooks/use-models";
 export type { ChatIdentity } from "./providers/ChatRuntime";
 export type { ChatRuntimeContextValue } from "./providers/ChatRuntime";
 export type { ThreadMode, ThreadConfiguration, ThreadContextType } from "./providers/Thread";
-export type { StateType } from "./providers/Stream";
+export type { StateType, TodoItem } from "./providers/Stream";
 export type { SuggestionsOptions, SuggestionConfig } from "./providers/useChatSuggestions";
 
 // ─── Types: Component props ───────────────────────────────────────────────────

package/src/pages/Chat/Chat.tsx

@@ -87,12 +87,22 @@ export function Chat(chatProps?: ChatUIProps) {
             content: contentBlocks,
         };
 
-        // Use the unified submitMessage function
-        await stream.submitMessage(newHumanMessage, { contextValues: contextValues });
-
         setIsFirstMessage(false);
+
+        // Clear input optimistically, but restore on failure so the user doesn't lose their draft.
+        const savedInput = input;
+        const savedFileInput = fileInput;
         setInput("");
         setFileInput([]);
+
+        try {
+            // Use the unified submitMessage function
+            await stream.submitMessage(newHumanMessage, { contextValues: contextValues });
+        } catch (err) {
+            setInput(savedInput);
+            setFileInput(savedFileInput);
+            throw err;
+        }
     };
 
     const defaultHandleFileSelect = async (

package/src/pages/Sidebar/sidebar.tsx

@@ -159,11 +159,20 @@ export default function Sidebar(props: ChatSidebarProps) {
       content: contentBlocks,
     };
 
-    // Use the unified submitMessage function
-    await stream.submitMessage(newHumanMessage, { contextValues: contextValues });
-
+    // Clear input optimistically, but restore on failure so the user doesn't lose their draft.
+    const savedInput = input;
+    const savedFileInput = fileInput;
     setInput("");
     setFileInput([]);
+
+    try {
+      // Use the unified submitMessage function
+      await stream.submitMessage(newHumanMessage, { contextValues: contextValues });
+    } catch (err) {
+      setInput(savedInput);
+      setFileInput(savedFileInput);
+      throw err;
+    }
   };
 
   const defaultHandleFileSelect = async (

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}>