langgraph-ui-components 0.0.4 → 0.0.6

package/dist/index.es11.js

@@ -1,130 +1,156 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { FileIcon, X, Paperclip, MoveUp } from "lucide-react";
-import "react";
-function ChatInput({
-  input,
-  inputFileAccept = ".png,.jpg,.jpeg,.pdf,.docx",
-  setInput,
-  handleSubmit,
-  fileInput,
-  setFileInput,
-  handleFileSelect,
-  isLoading = false,
-  onCancel
-}) {
-  const canSubmit = (input.trim().length > 0 || fileInput.length > 0) && !isLoading;
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "relative flex flex-col gap-2 border rounded-xl m-2 bg-zinc-900 border-zinc-800",
-      children: [
-        fileInput.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex-1 flex-col gap-2 p-2 bg-zinc-900 border-b border-zinc-700 max-h-48 thread-scrollbar", children: fileInput.map((file, index) => /* @__PURE__ */ jsxs(
-          "div",
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useStreamContext } from "./index.es6.js";
+import { isToolMessage, isAiWithToolCalls } from "./index.es19.js";
+import React__default, { useMemo, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import AgentMessage from "./index.es20.js";
+import CustomComponentRender from "./index.es21.js";
+import HumanMessage from "./index.es22.js";
+import Thinking from "./index.es23.js";
+import ToolCallFunctions from "./index.es24.js";
+function ChatBody({ setIsFirstMessage, enableToolCallIndicator }) {
+  const stream = useStreamContext();
+  const messages = stream.messages;
+  const isLoading = stream.isLoading;
+  const memoMessages = useMemo(() => messages ?? [], [messages]);
+  const containerRef = useRef(null);
+  const prevMessageCountRef = useRef(0);
+  const shouldAutoScrollRef = useRef(true);
+  const getScrollContainer = useCallback(() => {
+    if (containerRef.current) {
+      let parent = containerRef.current.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        if (style.overflowY === "auto" || style.overflowY === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+    }
+    return null;
+  }, []);
+  useEffect(() => {
+    if (memoMessages.length > 0 && setIsFirstMessage) {
+      setIsFirstMessage(false);
+    }
+  }, [memoMessages.length, setIsFirstMessage]);
+  const renderMessage = useCallback((msg, index, messagesArray) => {
+    if (!msg.content.length) return null;
+    if (msg.additional_kwargs?.hidden) {
+      return null;
+    }
+    const isLastMessage = index === messagesArray.length - 1;
+    const isStreamingThisMessage = isLoading && isLastMessage && msg.type === "ai";
+    const msgKey = msg.id ?? `msg-${index}`;
+    if (msg.type === "human") {
+      return /* @__PURE__ */ jsx(HumanMessage, { message: msg }, msgKey);
+    }
+    if (isToolMessage(msg)) {
+      return null;
+    }
+    if (isAiWithToolCalls(msg)) {
+      const toolMessages = [];
+      let nextIndex = index + 1;
+      while (nextIndex < messagesArray.length && isToolMessage(messagesArray[nextIndex])) {
+        toolMessages.push(messagesArray[nextIndex]);
+        nextIndex++;
+      }
+      const hasTextContent = typeof msg.content === "string" && msg.content.trim() || Array.isArray(msg.content) && msg.content.some((c) => c.type === "text" && c.text?.trim());
+      return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+        toolMessages.length > 0 && enableToolCallIndicator && /* @__PURE__ */ jsx(
+          ToolCallFunctions,
           {
-            className: "flex items-center justify-between gap-3 bg-zinc-800 p-2 rounded group hover:bg-zinc-700 transition-colors",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx(FileIcon, { className: "text-blue-400 shrink-0", size: 20 }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-zinc-200 truncate", children: file.fileName }),
-                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 truncate", children: file.fileType || "Unknown file type" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setFileInput((prev) => prev.filter((_, i) => i !== index)),
-                  className: "shrink-0 p-1 rounded hover:bg-zinc-600 transition-colors",
-                  "aria-label": "Remove file",
-                  children: /* @__PURE__ */ jsx(X, { size: 16, className: "text-red-400" })
-                }
-              )
-            ]
-          },
-          `file-${index}-${file.fileName}`
-        )) }),
-        /* @__PURE__ */ jsx(
-          "textarea",
+            title: "Agent Thinking",
+            toolMessages
+          }
+        ),
+        hasTextContent && /* @__PURE__ */ jsx(
+          AgentMessage,
           {
-            placeholder: "Type your message...",
-            value: input,
-            onChange: (e) => {
-              setInput(e.target.value);
-              const maxHeight = 300;
-              e.target.style.height = "auto";
-              e.target.style.height = Math.min(e.target.scrollHeight, maxHeight) + "px";
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && !e.shiftKey && !e.metaKey && !e.nativeEvent.isComposing) {
-                e.preventDefault();
-                if (canSubmit) {
-                  e.currentTarget.form?.requestSubmit();
-                }
-              }
-            },
-            disabled: isLoading,
-            className: "w-full field-sizing-content resize-none p-3.5 bg-transparent text-white placeholder-zinc-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto thread-scrollbar",
-            rows: 1
+            message: msg,
+            isStreaming: isStreamingThisMessage
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center px-1 pb-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-1 m-2", children: [
-            /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: "file-input",
-                className: `cursor-pointer ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`,
-                children: /* @__PURE__ */ jsx(
-                  Paperclip,
-                  {
-                    size: 24,
-                    className: "text-zinc-400 hover:text-white hover:bg-zinc-800 rounded p-1 transition-colors"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id: "file-input",
-                type: "file",
-                multiple: true,
-                disabled: isLoading,
-                accept: inputFileAccept,
-                className: "hidden",
-                onChange: handleFileSelect
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
-            isLoading && onCancel && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: onCancel,
-                className: "px-3 py-1 text-xs text-zinc-400 hover:text-white hover:bg-zinc-800 rounded transition-colors",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "submit",
-                disabled: !canSubmit,
-                className: "focus:outline-none transition-all bg-zinc-300 border rounded-full p-1 cursor-pointer",
-                style: { border: "none" },
-                children: /* @__PURE__ */ jsx(MoveUp, { size: 24, className: "text-black p-1" })
-              }
-            )
-          ] })
-        ] })
-      ]
+        /* @__PURE__ */ jsx(CustomComponentRender, { message: msg, thread: stream })
+      ] }, msgKey);
+    }
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        AgentMessage,
+        {
+          message: msg,
+          isStreaming: isStreamingThisMessage
+        }
+      ),
+      /* @__PURE__ */ jsx(CustomComponentRender, { message: msg, thread: stream })
+    ] }, msgKey);
+  }, [isLoading, stream, enableToolCallIndicator]);
+  const renderedMessages = useMemo(() => {
+    return memoMessages.map((msg, index) => {
+      const element = renderMessage(msg, index, memoMessages);
+      if (element && !element.key) {
+        return React__default.cloneElement(element, { key: msg.id ?? `msg-${index}` });
+      }
+      return element;
+    });
+  }, [memoMessages, renderMessage]);
+  useEffect(() => {
+    const scrollContainer = getScrollContainer();
+    if (!scrollContainer) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+      shouldAutoScrollRef.current = distanceFromBottom < 100;
+    };
+    scrollContainer.addEventListener("scroll", handleScroll);
+    return () => scrollContainer.removeEventListener("scroll", handleScroll);
+  }, [getScrollContainer]);
+  useEffect(() => {
+    const scrollContainer = getScrollContainer();
+    if (!scrollContainer) return;
+    const currentCount = memoMessages.length;
+    const hasNewMessage = currentCount > prevMessageCountRef.current;
+    if (hasNewMessage) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      shouldAutoScrollRef.current = true;
+    }
+    prevMessageCountRef.current = currentCount;
+  }, [memoMessages, getScrollContainer]);
+  useEffect(() => {
+    const scrollContainer = getScrollContainer();
+    if (!scrollContainer || !isLoading) return;
+    const observer = new MutationObserver(() => {
+      if (shouldAutoScrollRef.current && scrollContainer) {
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      }
+    });
+    if (containerRef.current) {
+      observer.observe(containerRef.current, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+    return () => observer.disconnect();
+  }, [isLoading, getScrollContainer]);
+  useLayoutEffect(() => {
+    const scrollContainer = getScrollContainer();
+    if (isLoading && shouldAutoScrollRef.current && scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex flex-col gap-4 rounded-4xl p-2",
+      children: memoMessages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-zinc-500", children: "Start a conversation..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderedMessages,
+        isLoading && memoMessages.length > 0 && memoMessages[memoMessages.length - 1].type === "human" && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Thinking, {}) })
+      ] })
     }
   );
 }
 export {
-  ChatInput as default
+  ChatBody as default
 };
 //# sourceMappingURL=index.es11.js.map

package/dist/index.es11.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es11.js","sources":["../src/components/sidebar/ChatInput.tsx"],"sourcesContent":["import type { FileInfo } from \"@/types/fileInput\";\nimport { FileIcon, MoveUp, Paperclip, X } from \"lucide-react\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type FormEvent,\n  type SetStateAction,\n} from \"react\";\n\nexport default function ChatInput({\n  input,\n  inputFileAccept = \".png,.jpg,.jpeg,.pdf,.docx\",\n  setInput,\n  handleSubmit,\n  fileInput,\n  setFileInput,\n  handleFileSelect,\n  isLoading = false,\n  onCancel,\n}: {\n  input: string;\n  setInput: (value: string) => void;\n  handleSubmit: (e: FormEvent<HTMLFormElement>) => void;\n  fileInput: FileInfo[];\n  setFileInput: Dispatch<SetStateAction<FileInfo[]>>;\n  handleFileSelect: (event: ChangeEvent<HTMLInputElement>) => void;\n  inputFileAccept?: string;\n  isLoading?: boolean;\n  onCancel?: () => void;\n}) {\n  const canSubmit =\n    (input.trim().length > 0 || fileInput.length > 0) && !isLoading;\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"relative flex flex-col gap-2 border rounded-xl m-2 bg-zinc-900 border-zinc-800\"\n    >\n      {/* File attachments preview */}\n      {fileInput.length > 0 && (\n        <div className=\"flex-1 flex-col gap-2 p-2 bg-zinc-900 border-b border-zinc-700 max-h-48 thread-scrollbar\">\n          {fileInput.map((file, index) => (\n            <div\n              key={`file-${index}-${file.fileName}`}\n              className=\"flex items-center justify-between gap-3 bg-zinc-800 p-2 rounded group hover:bg-zinc-700 transition-colors\"\n            >\n              <div className=\"flex items-center gap-3 min-w-0 flex-1\">\n                <FileIcon className=\"text-blue-400 shrink-0\" size={20} />\n                <div className=\"flex flex-col min-w-0 overflow-hidden\">\n                  <span className=\"text-xs font-medium text-zinc-200 truncate\">\n                    {file.fileName}\n                  </span>\n                  <span className=\"text-[10px] text-zinc-500 truncate\">\n                    {file.fileType || \"Unknown file type\"}\n                  </span>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                onClick={() =>\n                  setFileInput((prev) => prev.filter((_, i) => i !== index))\n                }\n                className=\"shrink-0 p-1 rounded hover:bg-zinc-600 transition-colors\"\n                aria-label=\"Remove file\"\n              >\n                <X size={16} className=\"text-red-400\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Text input */}\n      <textarea\n        placeholder=\"Type your message...\"\n        value={input}\n        onChange={(e) => {\n          setInput(e.target.value)\n          const maxHeight = 300; // max height in pixels\n          e.target.style.height = \"auto\"; // reset height\n          e.target.style.height = Math.min(e.target.scrollHeight, maxHeight) + \"px\";\n        }}\n        onKeyDown={(e) => {\n          if (\n            e.key === \"Enter\" &&\n            !e.shiftKey &&\n            !e.metaKey &&\n            !e.nativeEvent.isComposing\n          ) {\n            e.preventDefault();\n            if (canSubmit) {\n              e.currentTarget.form?.requestSubmit();\n            }\n          }\n        }}\n        disabled={isLoading}\n        className=\"w-full field-sizing-content resize-none p-3.5 bg-transparent text-white placeholder-zinc-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed overflow-y-auto thread-scrollbar\"\n        rows={1}\n      />\n\n      {/* Footer with controls */}\n      <div className=\"flex justify-between items-center px-1 pb-2\">\n        <div className=\"flex gap-1 m-2\">\n          <label\n            htmlFor=\"file-input\"\n            className={`cursor-pointer ${isLoading ? \"opacity-50 cursor-not-allowed\" : \"\"\n              }`}\n          >\n            <Paperclip\n              size={24}\n              className=\"text-zinc-400 hover:text-white hover:bg-zinc-800 rounded p-1 transition-colors\"\n            />\n          </label>\n          <input\n            id=\"file-input\"\n            type=\"file\"\n            multiple\n            disabled={isLoading}\n            accept={inputFileAccept}\n            className=\"hidden\"\n            onChange={handleFileSelect}\n          />\n        </div>\n\n        <div className=\"flex gap-2 items-center\">\n          {isLoading && onCancel && (\n            <button\n              type=\"button\"\n              onClick={onCancel}\n              className=\"px-3 py-1 text-xs text-zinc-400 hover:text-white hover:bg-zinc-800 rounded transition-colors\"\n            >\n              Cancel\n            </button>\n          )}\n\n          <button\n            type=\"submit\"\n            disabled={!canSubmit}\n            className=\"focus:outline-none transition-all bg-zinc-300 border rounded-full p-1 cursor-pointer\"\n            style={{ border: \"none\" }}\n          >\n            <MoveUp size={24} className=\"text-black p-1\" />\n          </button>\n        </div>\n      </div>\n    </form>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.es11.js","sources":["../src/components/ChatBody.tsx"],"sourcesContent":["import { useStreamContext } from \"@/providers/Stream\";\nimport { logger } from \"@/utils/logger\";\nimport { isAiWithToolCalls, isToolMessage } from \"@/utils/utils\";\nimport React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from \"react\";\nimport AgentMessage from \"./messages/AgentMessage\";\nimport CustomComponentRender from \"./messages/CustomComponentRender\";\nimport HumanMessage from \"./messages/HumanMessage\";\nimport Thinking from \"./Thinking\";\nimport ToolCallFunctions from \"./ToolCallFunctions\";\n\nexport default function ChatBody({ setIsFirstMessage, enableToolCallIndicator }: { setIsFirstMessage?: React.Dispatch<React.SetStateAction<boolean>>, enableToolCallIndicator?: boolean }) {\n  const stream = useStreamContext();\n  const messages = stream.messages;\n  const isLoading = stream.isLoading;\n\n  logger.debug(\"ChatBody render - messages count:\", messages, \"isLoading:\", isLoading);\n\n  // Memoize messages with stable reference\n  const memoMessages = useMemo(() => messages ?? [], [messages]);\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const prevMessageCountRef = useRef(0);\n  const shouldAutoScrollRef = useRef(true);\n\n  // Get the parent scroll container\n  const getScrollContainer = useCallback(() => {\n    if (containerRef.current) {\n      // Find the parent with overflow-y-auto class\n      let parent = containerRef.current.parentElement;\n      while (parent) {\n        const style = window.getComputedStyle(parent);\n        if (style.overflowY === 'auto' || style.overflowY === 'scroll') {\n          return parent;\n        }\n        parent = parent.parentElement;\n      }\n    }\n    return null;\n  }, []);\n\n  useEffect(() => {\n    if (memoMessages.length > 0 && setIsFirstMessage) {\n      setIsFirstMessage(false);\n    }\n  }, [memoMessages.length, setIsFirstMessage]);\n\n  // Memoize message rendering logic to prevent unnecessary re-renders\n  const renderMessage = useCallback((msg: typeof messages[0], index: number, messagesArray: typeof messages) => {\n    if (!msg.content.length) return null;\n\n    if (msg.additional_kwargs?.hidden) {\n      return null;\n    }\n\n    const isLastMessage = index === messagesArray.length - 1;\n    const isStreamingThisMessage =\n      isLoading && isLastMessage && msg.type === \"ai\";\n\n    // Use message id or fallback to index for key\n    const msgKey = msg.id ?? `msg-${index}`;\n\n    if (msg.type === \"human\") {\n      return <HumanMessage key={msgKey} message={msg} />;\n    }\n\n    // Skip standalone tool messages\n    if (isToolMessage(msg)) {\n      return null;\n    }\n\n    // Group AI message with tool calls and subsequent tool messages\n    if (isAiWithToolCalls(msg)) {\n      const toolMessages = [];\n      let nextIndex = index + 1;\n      while (\n        nextIndex < messagesArray.length &&\n        isToolMessage(messagesArray[nextIndex])\n      ) {\n        toolMessages.push(messagesArray[nextIndex]);\n        nextIndex++;\n      }\n\n      // Check if there's text content to display\n      // Handle both string and array content formats\n      const hasTextContent =\n        (typeof msg.content === \"string\" && msg.content.trim()) ||\n        (Array.isArray(msg.content) && msg.content.some((c: any) => c.type === \"text\" && c.text?.trim()));\n\n      return (\n        <React.Fragment key={msgKey}>\n          {/* 1. Thinking indicator - only show if tool messages exist */}\n          {toolMessages.length > 0 && enableToolCallIndicator && (\n            <ToolCallFunctions\n              title=\"Agent Thinking\"\n              toolMessages={toolMessages}\n            />\n          )}\n          {/* 2. Agent message (if has text) */}\n          {hasTextContent && (\n            <AgentMessage\n              message={msg}\n              isStreaming={isStreamingThisMessage}\n            />\n          )}\n          {/* 3. Custom component */}\n          <CustomComponentRender message={msg} thread={stream} />\n        </React.Fragment>\n      );\n    }\n\n    return (\n      <React.Fragment key={msgKey}>\n        <AgentMessage\n          message={msg}\n          isStreaming={isStreamingThisMessage}\n        />\n        <CustomComponentRender message={msg} thread={stream} />\n      </React.Fragment>\n    );\n  }, [isLoading, stream, enableToolCallIndicator]);\n\n  // Memoize the rendered messages array\n  const renderedMessages = useMemo(() => {\n    return memoMessages.map((msg, index) => {\n      const element = renderMessage(msg, index, memoMessages);\n      // Ensure every element has a key, using message id or fallback to index\n      if (element && !element.key) {\n        return React.cloneElement(element, { key: msg.id ?? `msg-${index}` });\n      }\n      return element;\n    });\n  }, [memoMessages, renderMessage]);\n\n  // Track user scroll position to determine if we should auto-scroll\n  useEffect(() => {\n    const scrollContainer = getScrollContainer();\n    if (!scrollContainer) return;\n\n    const handleScroll = () => {\n      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;\n      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n      // Consider \"at bottom\" if within 100px\n      shouldAutoScrollRef.current = distanceFromBottom < 100;\n    };\n\n    scrollContainer.addEventListener('scroll', handleScroll);\n    return () => scrollContainer.removeEventListener('scroll', handleScroll);\n  }, [getScrollContainer]);\n\n  // Auto-scroll when new messages are added\n  useEffect(() => {\n    const scrollContainer = getScrollContainer();\n    if (!scrollContainer) return;\n\n    const currentCount = memoMessages.length;\n    const hasNewMessage = currentCount > prevMessageCountRef.current;\n\n    if (hasNewMessage) {\n      scrollContainer.scrollTop = scrollContainer.scrollHeight;\n      shouldAutoScrollRef.current = true;\n    }\n\n    prevMessageCountRef.current = currentCount;\n  }, [memoMessages, getScrollContainer]);\n\n  // Use MutationObserver to detect DOM changes and auto-scroll during streaming\n  useEffect(() => {\n    const scrollContainer = getScrollContainer();\n    if (!scrollContainer || !isLoading) return;\n\n    const observer = new MutationObserver(() => {\n      if (shouldAutoScrollRef.current && scrollContainer) {\n        scrollContainer.scrollTop = scrollContainer.scrollHeight;\n      }\n    });\n\n    // Observe the ChatBody container for changes\n    if (containerRef.current) {\n      observer.observe(containerRef.current, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    return () => observer.disconnect();\n  }, [isLoading, getScrollContainer]);\n\n  // Use useLayoutEffect to scroll after DOM updates\n  useLayoutEffect(() => {\n    const scrollContainer = getScrollContainer();\n    if (isLoading && shouldAutoScrollRef.current && scrollContainer) {\n      scrollContainer.scrollTop = scrollContainer.scrollHeight;\n    }\n  });\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex flex-col gap-4 rounded-4xl p-2\"\n    >\n      {memoMessages.length === 0 ? (\n        <div className=\"flex items-center justify-center h-full text-zinc-500\">\n          Start a conversation...\n        </div>\n      ) : (\n        <>\n          {renderedMessages}\n          {/* Show thinking indicator when loading but no AI response yet */}\n          {isLoading && memoMessages.length > 0 && memoMessages[memoMessages.length - 1].type === \"human\" && (\n            <div className=\"flex items-center gap-2\">\n              {/* Thinking<span className=\"animate-pulse\">...</span> */}\n              <Thinking />\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["React"],"mappings":"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"}

package/dist/index.es110.js

@@ -1,3 +1,14 @@
-import { __require as requireSemver } from "./index.es232.js";
-requireSemver();
+const TRACING_ALS_KEY = /* @__PURE__ */ Symbol.for("ls:tracing_async_local_storage");
+const _CONTEXT_VARIABLES_KEY = /* @__PURE__ */ Symbol.for("lc:context_variables");
+const setGlobalAsyncLocalStorageInstance = (instance) => {
+  globalThis[TRACING_ALS_KEY] = instance;
+};
+const getGlobalAsyncLocalStorageInstance = () => {
+  return globalThis[TRACING_ALS_KEY];
+};
+export {
+  _CONTEXT_VARIABLES_KEY,
+  getGlobalAsyncLocalStorageInstance,
+  setGlobalAsyncLocalStorageInstance
+};
 //# sourceMappingURL=index.es110.js.map

package/dist/index.es110.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es110.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.es110.js","sources":["../node_modules/.pnpm/@langchain+core@1.1.13_openai@6.16.0_zod@4.3.5_/node_modules/@langchain/core/dist/singletons/async_local_storage/globals.js"],"sourcesContent":["//#region src/singletons/async_local_storage/globals.ts\nconst TRACING_ALS_KEY = Symbol.for(\"ls:tracing_async_local_storage\");\nconst _CONTEXT_VARIABLES_KEY = Symbol.for(\"lc:context_variables\");\nconst setGlobalAsyncLocalStorageInstance = (instance) => {\n\tglobalThis[TRACING_ALS_KEY] = instance;\n};\nconst getGlobalAsyncLocalStorageInstance = () => {\n\treturn globalThis[TRACING_ALS_KEY];\n};\n\n//#endregion\nexport { _CONTEXT_VARIABLES_KEY, getGlobalAsyncLocalStorageInstance, setGlobalAsyncLocalStorageInstance };\n//# sourceMappingURL=globals.js.map"],"names":[],"mappings":"AACA,MAAM,kBAAkB,uBAAO,IAAI,gCAAgC;AAC9D,MAAC,yBAAyB,uBAAO,IAAI,sBAAsB;AAC3D,MAAC,qCAAqC,CAAC,aAAa;AACxD,aAAW,eAAe,IAAI;AAC/B;AACK,MAAC,qCAAqC,MAAM;AAChD,SAAO,WAAW,eAAe;AAClC;","x_google_ignoreList":[0]}