langgraph-ui-components 0.0.25 → 0.0.27

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";

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}

package/src/providers/Stream.tsx

@@ -146,9 +146,9 @@ const StreamSession = ({ children }: { children: ReactNode }) => {
     fetchStateHistory: true,
     onUpdateEvent: (data, options) => {
       // Scan update data (potentially nested by node name) for AI messages
-      // with reasoning_content. Inject them into state early so they're
-      // visible during streaming of the final text response.
-      const reasoningMessages: Message[] = [];
+      // with reasoning_content or tool_status in additional_kwargs.
+      // Merge these into existing messages so they're available during streaming.
+      const enrichedMessages: Message[] = [];
 
       const scan = (obj: unknown) => {
         if (!obj || typeof obj !== "object") return;
@@ -156,13 +156,12 @@ const StreamSession = ({ children }: { children: ReactNode }) => {
         if (Array.isArray(o.messages)) {
           for (const m of o.messages as Message[]) {
             const ak = (m as Record<string, unknown>).additional_kwargs as Record<string, unknown> | undefined;
-            if (
-              m?.type === "ai" &&
-              m.id &&
-              typeof ak?.reasoning_content === "string" &&
-              ak.reasoning_content.length > 0
-            ) {
-              reasoningMessages.push(m);
+            if (m?.type === "ai" && m.id && ak) {
+              const hasReasoning = typeof ak.reasoning_content === "string" && ak.reasoning_content.length > 0;
+              const hasToolStatus = Array.isArray(ak.tool_status) && (ak.tool_status as unknown[]).length > 0;
+              if (hasReasoning || hasToolStatus) {
+                enrichedMessages.push(m);
+              }
             }
           }
         }
@@ -175,13 +174,33 @@ const StreamSession = ({ children }: { children: ReactNode }) => {
 
       scan(data);
 
-      if (reasoningMessages.length > 0) {
+      if (enrichedMessages.length > 0) {
         options.mutate((prev) => {
           const prevMessages = (prev.messages ?? []) as Message[];
-          const prevIds = new Set(prevMessages.map((m) => m.id).filter(Boolean));
-          const newMessages = reasoningMessages.filter((m) => !prevIds.has(m.id!));
-          if (newMessages.length === 0) return prev;
-          return { ...prev, messages: [...prevMessages, ...newMessages] };
+          const enrichedById = new Map<string, Message>();
+          for (const m of enrichedMessages) {
+            if (m.id) enrichedById.set(m.id, m);
+          }
+
+          let changed = false;
+          const updatedMessages = prevMessages.map((m) => {
+            if (!m.id || !enrichedById.has(m.id)) return m;
+            const enriched = enrichedById.get(m.id)!;
+            enrichedById.delete(m.id);
+            changed = true;
+            const enrichedKwargs = (enriched as Record<string, unknown>).additional_kwargs as Record<string, unknown> | undefined;
+            return {
+              ...m,
+              additional_kwargs: {
+                ...(m.additional_kwargs ?? {}),
+                ...(enrichedKwargs ?? {}),
+              },
+            };
+          });
+
+          if (!changed) return prev;
+
+          return { ...prev, messages: updatedMessages };
         });
       }
     },

package/src/providers/Thread.tsx

@@ -71,7 +71,7 @@ function getThreadSearchMetadata(
  * </ThreadProvider>
  * ```
  */
-export function ThreadProvider({ children }: { children: ReactNode }) {
+export function ThreadProvider({ children, initialMode = "single" }: { children: ReactNode; initialMode?: ThreadMode }) {
 
   const { apiUrl, assistantId, identity } = useChatRuntime();
   const [threads, setThreads] = useState<Thread[]>([]);
@@ -80,7 +80,7 @@ export function ThreadProvider({ children }: { children: ReactNode }) {
   const [threadId, setThreadId] = useState<string | null>(null);
   const [configuration, setConfiguration] = useState<ThreadConfiguration | undefined>();
 
-  const [mode, setMode] = useState<ThreadMode>("single");
+  const [mode, setMode] = useState<ThreadMode>(initialMode);
 
   // Extract thread ID from URL query parameter on component mount
   useEffect(() => {

package/dist/components/ToolCallFunctions.cjs.js

@@ -1,2 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("../utils/utils.cjs.js"),c=require("react");function h({title:t,toolMessages:s,toolCalls:r}){const[a,d]=c.useState(!1),i=!!s&&s.length>0,o=!!r&&r.length>0;return!i&&!o?null:e.jsxs("div",{id:"accordion-collapse","data-accordion":"collapse",className:"w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25",children:[e.jsx("h2",{id:"accordion-collapse-heading-1",children:e.jsxs("button",{type:"button",className:"flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent",onClick:()=>d(n=>!n),"aria-expanded":a,"aria-controls":"accordion-collapse-body-1",children:[e.jsxs("span",{children:["🔷 ",t]}),e.jsx("svg",{"data-accordion-icon":!0,className:`w-5 h-5 shrink-0 transition-transform ${a?"rotate-0":"rotate-180"}`,"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24",children:e.jsx("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m5 15 7-7 7 7"})})]})}),e.jsx("div",{id:"accordion-collapse-body-1",className:`${a?"":"hidden"}`,"aria-labelledby":"accordion-collapse-heading-1",children:e.jsxs("div",{className:"md:p-5 text-left space-y-3",children:[i&&s.map(n=>e.jsx("div",{className:"border-zinc-700",children:e.jsx("p",{className:"text-body text-sm",children:n.content?l.getContentString(n.content):""})},n.id)),!i&&o&&r?.map(n=>e.jsxs("div",{className:"border-zinc-700",children:[e.jsx("p",{className:"text-body text-sm font-medium",children:n.name}),e.jsx("pre",{className:"text-xs text-zinc-400 whitespace-pre-wrap mt-1",children:JSON.stringify(n.args??{},null,2)})]},n.id??n.name))]})})]})}const m=c.memo(h,(t,s)=>t.toolMessages?.length===s.toolMessages?.length);module.exports=m;
-//# sourceMappingURL=ToolCallFunctions.cjs.js.map

package/dist/components/ToolCallFunctions.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolCallFunctions.cjs.js","sources":["../../src/components/ToolCallFunctions.tsx"],"sourcesContent":["import { getContentString } from \"@/utils/utils\";\nimport type { AIMessage, Message } from \"@langchain/langgraph-sdk\";\nimport React, { useState } from \"react\";\n\nfunction ToolCallFunctions({ title, toolMessages, toolCalls }: {\n  title?: string;\n  toolMessages: Message[];\n  toolCalls?: AIMessage[\"tool_calls\"];\n}) {\n  const [open, setOpen] = useState(false);\n\n  const hasToolMessages = !!toolMessages && toolMessages.length > 0;\n  const hasToolCalls = !!toolCalls && toolCalls.length > 0;\n\n  // Only render if there are tool messages or tool calls\n  if (!hasToolMessages && !hasToolCalls) return null;\n\n  return (\n    <div\n      id=\"accordion-collapse\"\n      data-accordion=\"collapse\"\n      className=\"w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25\"\n    >\n      <h2 id=\"accordion-collapse-heading-1\">\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent\"\n          onClick={() => setOpen((v) => !v)}\n          aria-expanded={open}\n          aria-controls=\"accordion-collapse-body-1\"\n        >\n          <span>🔷 {title}</span>\n          <svg\n            data-accordion-icon\n            className={`w-5 h-5 shrink-0 transition-transform ${open ? \"rotate-0\" : \"rotate-180\"\n              }`}\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              d=\"m5 15 7-7 7 7\"\n            />\n          </svg>\n        </button>\n      </h2>\n      <div\n        id=\"accordion-collapse-body-1\"\n        className={`${open ? \"\" : \"hidden\"}`}\n        aria-labelledby=\"accordion-collapse-heading-1\"\n      >\n        <div className=\"md:p-5 text-left space-y-3\">\n          {hasToolMessages && toolMessages.map((toolMsg) => (\n            <div key={toolMsg.id} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm\">{toolMsg.content ? getContentString(toolMsg.content) : \"\"}</p>\n            </div>\n          ))}\n          {!hasToolMessages && hasToolCalls && toolCalls?.map((toolCall) => (\n            <div key={toolCall.id ?? toolCall.name} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm font-medium\">{toolCall.name}</p>\n              <pre className=\"text-xs text-zinc-400 whitespace-pre-wrap mt-1\">\n                {JSON.stringify(toolCall.args ?? {}, null, 2)}\n              </pre>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default React.memo(ToolCallFunctions, (prevProps, nextProps) => {\n  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;\n});"],"names":["ToolCallFunctions","title","toolMessages","toolCalls","open","setOpen","useState","hasToolMessages","hasToolCalls","jsxs","jsx","v","toolMsg","getContentString","toolCall","React","prevProps","nextProps"],"mappings":"wGAIA,SAASA,EAAkB,CAAE,MAAAC,EAAO,aAAAC,EAAc,UAAAC,GAI/C,CACD,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAEhCC,EAAkB,CAAC,CAACL,GAAgBA,EAAa,OAAS,EAC1DM,EAAe,CAAC,CAACL,GAAaA,EAAU,OAAS,EAGvD,MAAI,CAACI,GAAmB,CAACC,EAAqB,KAG5CC,EAAAA,KAAC,MAAA,CACC,GAAG,qBACH,iBAAe,WACf,UAAU,uGAEV,SAAA,CAAAC,EAAAA,IAAC,KAAA,CAAG,GAAG,+BACL,SAAAD,EAAAA,KAAC,SAAA,CACC,KAAK,SACL,UAAU,uIACV,QAAS,IAAMJ,EAASM,GAAM,CAACA,CAAC,EAChC,gBAAeP,EACf,gBAAc,4BAEd,SAAA,CAAAK,OAAC,OAAA,CAAK,SAAA,CAAA,MAAIR,CAAA,EAAM,EAChBS,EAAAA,IAAC,MAAA,CACC,sBAAmB,GACnB,UAAW,yCAAyCN,EAAO,WAAa,YACtE,GACF,cAAY,OACZ,MAAM,6BACN,MAAM,KACN,OAAO,KACP,KAAK,OACL,QAAQ,YAER,SAAAM,EAAAA,IAAC,OAAA,CACC,OAAO,eACP,cAAc,QACd,eAAe,QACf,YAAY,IACZ,EAAE,eAAA,CAAA,CACJ,CAAA,CACF,CAAA,CAAA,EAEJ,EACAA,EAAAA,IAAC,MAAA,CACC,GAAG,4BACH,UAAW,GAAGN,EAAO,GAAK,QAAQ,GAClC,kBAAgB,+BAEhB,SAAAK,EAAAA,KAAC,MAAA,CAAI,UAAU,6BACZ,SAAA,CAAAF,GAAmBL,EAAa,IAAKU,SACnC,MAAA,CAAqB,UAAU,kBAC9B,SAAAF,EAAAA,IAAC,IAAA,CAAE,UAAU,oBAAqB,SAAAE,EAAQ,QAAUC,EAAAA,iBAAiBD,EAAQ,OAAO,EAAI,EAAA,CAAG,CAAA,EADnFA,EAAQ,EAElB,CACD,EACA,CAACL,GAAmBC,GAAgBL,GAAW,IAAKW,GACnDL,EAAAA,KAAC,MAAA,CAAuC,UAAU,kBAChD,SAAA,CAAAC,EAAAA,IAAC,IAAA,CAAE,UAAU,gCAAiC,SAAAI,EAAS,KAAK,EAC5DJ,EAAAA,IAAC,MAAA,CAAI,UAAU,iDACZ,SAAA,KAAK,UAAUI,EAAS,MAAQ,CAAA,EAAI,KAAM,CAAC,CAAA,CAC9C,CAAA,CAAA,EAJQA,EAAS,IAAMA,EAAS,IAKlC,CACD,CAAA,CAAA,CACH,CAAA,CAAA,CACF,CAAA,CAAA,CAGN,CAEA,MAAAd,EAAee,EAAM,KAAKf,EAAmB,CAACgB,EAAWC,IAChDD,EAAU,cAAc,SAAWC,EAAU,cAAc,MACnE"}

package/dist/components/ToolCallFunctions.es.js

@@ -1,75 +0,0 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { getContentString as l } from "../utils/utils.es.js";
-import m, { useState as h } from "react";
-function p({ title: r, toolMessages: t, toolCalls: o }) {
-  const [i, c] = h(!1), d = !!t && t.length > 0, s = !!o && o.length > 0;
-  return !d && !s ? null : /* @__PURE__ */ a(
-    "div",
-    {
-      id: "accordion-collapse",
-      "data-accordion": "collapse",
-      className: "w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25",
-      children: [
-        /* @__PURE__ */ n("h2", { id: "accordion-collapse-heading-1", children: /* @__PURE__ */ a(
-          "button",
-          {
-            type: "button",
-            className: "flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent",
-            onClick: () => c((e) => !e),
-            "aria-expanded": i,
-            "aria-controls": "accordion-collapse-body-1",
-            children: [
-              /* @__PURE__ */ a("span", { children: [
-                "🔷 ",
-                r
-              ] }),
-              /* @__PURE__ */ n(
-                "svg",
-                {
-                  "data-accordion-icon": !0,
-                  className: `w-5 h-5 shrink-0 transition-transform ${i ? "rotate-0" : "rotate-180"}`,
-                  "aria-hidden": "true",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "24",
-                  height: "24",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ n(
-                    "path",
-                    {
-                      stroke: "currentColor",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "m5 15 7-7 7 7"
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            id: "accordion-collapse-body-1",
-            className: `${i ? "" : "hidden"}`,
-            "aria-labelledby": "accordion-collapse-heading-1",
-            children: /* @__PURE__ */ a("div", { className: "md:p-5 text-left space-y-3", children: [
-              d && t.map((e) => /* @__PURE__ */ n("div", { className: "border-zinc-700", children: /* @__PURE__ */ n("p", { className: "text-body text-sm", children: e.content ? l(e.content) : "" }) }, e.id)),
-              !d && s && o?.map((e) => /* @__PURE__ */ a("div", { className: "border-zinc-700", children: [
-                /* @__PURE__ */ n("p", { className: "text-body text-sm font-medium", children: e.name }),
-                /* @__PURE__ */ n("pre", { className: "text-xs text-zinc-400 whitespace-pre-wrap mt-1", children: JSON.stringify(e.args ?? {}, null, 2) })
-              ] }, e.id ?? e.name))
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-const b = m.memo(p, (r, t) => r.toolMessages?.length === t.toolMessages?.length);
-export {
-  b as default
-};
-//# sourceMappingURL=ToolCallFunctions.es.js.map

package/dist/components/ToolCallFunctions.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolCallFunctions.es.js","sources":["../../src/components/ToolCallFunctions.tsx"],"sourcesContent":["import { getContentString } from \"@/utils/utils\";\nimport type { AIMessage, Message } from \"@langchain/langgraph-sdk\";\nimport React, { useState } from \"react\";\n\nfunction ToolCallFunctions({ title, toolMessages, toolCalls }: {\n  title?: string;\n  toolMessages: Message[];\n  toolCalls?: AIMessage[\"tool_calls\"];\n}) {\n  const [open, setOpen] = useState(false);\n\n  const hasToolMessages = !!toolMessages && toolMessages.length > 0;\n  const hasToolCalls = !!toolCalls && toolCalls.length > 0;\n\n  // Only render if there are tool messages or tool calls\n  if (!hasToolMessages && !hasToolCalls) return null;\n\n  return (\n    <div\n      id=\"accordion-collapse\"\n      data-accordion=\"collapse\"\n      className=\"w-full rounded-base overflow-hidden shadow-xs border rounded-xl border-zinc-800 max-w-[90%] min-w-25\"\n    >\n      <h2 id=\"accordion-collapse-heading-1\">\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between w-full p-2 font-medium gap-3 text-body border-0 outline-none ring-0 appearance-none bg-transparent\"\n          onClick={() => setOpen((v) => !v)}\n          aria-expanded={open}\n          aria-controls=\"accordion-collapse-body-1\"\n        >\n          <span>🔷 {title}</span>\n          <svg\n            data-accordion-icon\n            className={`w-5 h-5 shrink-0 transition-transform ${open ? \"rotate-0\" : \"rotate-180\"\n              }`}\n            aria-hidden=\"true\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              stroke=\"currentColor\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"2\"\n              d=\"m5 15 7-7 7 7\"\n            />\n          </svg>\n        </button>\n      </h2>\n      <div\n        id=\"accordion-collapse-body-1\"\n        className={`${open ? \"\" : \"hidden\"}`}\n        aria-labelledby=\"accordion-collapse-heading-1\"\n      >\n        <div className=\"md:p-5 text-left space-y-3\">\n          {hasToolMessages && toolMessages.map((toolMsg) => (\n            <div key={toolMsg.id} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm\">{toolMsg.content ? getContentString(toolMsg.content) : \"\"}</p>\n            </div>\n          ))}\n          {!hasToolMessages && hasToolCalls && toolCalls?.map((toolCall) => (\n            <div key={toolCall.id ?? toolCall.name} className=\"border-zinc-700\">\n              <p className=\"text-body text-sm font-medium\">{toolCall.name}</p>\n              <pre className=\"text-xs text-zinc-400 whitespace-pre-wrap mt-1\">\n                {JSON.stringify(toolCall.args ?? {}, null, 2)}\n              </pre>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default React.memo(ToolCallFunctions, (prevProps, nextProps) => {\n  return prevProps.toolMessages?.length === nextProps.toolMessages?.length;\n});"],"names":["ToolCallFunctions","title","toolMessages","toolCalls","open","setOpen","useState","hasToolMessages","hasToolCalls","jsxs","jsx","v","toolMsg","getContentString","toolCall","ToolCallFunctions$1","React","prevProps","nextProps"],"mappings":";;;AAIA,SAASA,EAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,WAAAC,KAI/C;AACD,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAEhCC,IAAkB,CAAC,CAACL,KAAgBA,EAAa,SAAS,GAC1DM,IAAe,CAAC,CAACL,KAAaA,EAAU,SAAS;AAGvD,SAAI,CAACI,KAAmB,CAACC,IAAqB,OAG5C,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,kBAAe;AAAA,MACf,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAC,EAAC,MAAA,EAAG,IAAG,gCACL,UAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAMJ,EAAQ,CAACM,MAAM,CAACA,CAAC;AAAA,YAChC,iBAAeP;AAAA,YACf,iBAAc;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAK,EAAC,QAAA,EAAK,UAAA;AAAA,gBAAA;AAAA,gBAAIR;AAAA,cAAA,GAAM;AAAA,cAChB,gBAAAS;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,uBAAmB;AAAA,kBACnB,WAAW,yCAAyCN,IAAO,aAAa,YACtE;AAAA,kBACF,eAAY;AAAA,kBACZ,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,MAAK;AAAA,kBACL,SAAQ;AAAA,kBAER,UAAA,gBAAAM;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,QAAO;AAAA,sBACP,eAAc;AAAA,sBACd,gBAAe;AAAA,sBACf,aAAY;AAAA,sBACZ,GAAE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,WAAW,GAAGN,IAAO,KAAK,QAAQ;AAAA,YAClC,mBAAgB;AAAA,YAEhB,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,8BACZ,UAAA;AAAA,cAAAF,KAAmBL,EAAa,IAAI,CAACU,wBACnC,OAAA,EAAqB,WAAU,mBAC9B,UAAA,gBAAAF,EAAC,KAAA,EAAE,WAAU,qBAAqB,UAAAE,EAAQ,UAAUC,EAAiBD,EAAQ,OAAO,IAAI,GAAA,CAAG,EAAA,GADnFA,EAAQ,EAElB,CACD;AAAA,cACA,CAACL,KAAmBC,KAAgBL,GAAW,IAAI,CAACW,MACnD,gBAAAL,EAAC,OAAA,EAAuC,WAAU,mBAChD,UAAA;AAAA,gBAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAI,EAAS,MAAK;AAAA,gBAC5D,gBAAAJ,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAA,KAAK,UAAUI,EAAS,QAAQ,CAAA,GAAI,MAAM,CAAC,EAAA,CAC9C;AAAA,cAAA,EAAA,GAJQA,EAAS,MAAMA,EAAS,IAKlC,CACD;AAAA,YAAA,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAAC,IAAeC,EAAM,KAAKhB,GAAmB,CAACiB,GAAWC,MAChDD,EAAU,cAAc,WAAWC,EAAU,cAAc,MACnE;"}