langgraph-ui-components 0.0.4 → 0.0.7

package/dist/index.es11.js

@@ -1,130 +1,173 @@
-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",
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useStreamContext } from "./index.es6.js";
+import { isToolMessage, isAiWithToolCalls } from "./index.es20.js";
+import React__default, { useMemo, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import AgentMessage from "./index.es21.js";
+import CustomComponentRender from "./index.es22.js";
+import HumanMessage from "./index.es23.js";
+import Thinking from "./index.es24.js";
+import ToolCallFunctions from "./index.es25.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 msgKey = msg.id ?? `msg-${index}`;
+    if (msg.type === "human") {
+      return /* @__PURE__ */ jsx(HumanMessage, { message: msg }, msgKey);
+    }
+    if (isToolMessage(msg)) {
+      return null;
+    }
+    if (msg.type === "ai" && index > 0) {
+      let prevIndex = index - 1;
+      while (prevIndex >= 0 && isToolMessage(messagesArray[prevIndex])) {
+        prevIndex--;
+      }
+      if (prevIndex >= 0 && messagesArray[prevIndex].type === "ai") {
+        return null;
+      }
+    }
+    const groupedMessages = [msg];
+    const toolMessages = [];
+    let nextIndex = index + 1;
+    while (nextIndex < messagesArray.length) {
+      const nextMsg = messagesArray[nextIndex];
+      if (isToolMessage(nextMsg)) {
+        toolMessages.push(nextMsg);
+        nextIndex++;
+      } else if (nextMsg.type === "ai") {
+        groupedMessages.push(nextMsg);
+        nextIndex++;
+      } else {
+        break;
+      }
+    }
+    const combinedContent = groupedMessages.map((m) => {
+      if (typeof m.content === "string") return m.content;
+      if (Array.isArray(m.content)) {
+        return m.content.map((c) => c.type === "text" ? c.text : "").filter(Boolean).join(" ");
+      }
+      return "";
+    }).filter(Boolean).join("\n\n");
+    const combinedMessage = {
+      ...msg,
+      content: combinedContent
+    };
+    const isLastMessageGroup = nextIndex >= messagesArray.length;
+    const isStreamingThisMessage = isLoading && isLastMessageGroup;
+    const hasToolCalls = isAiWithToolCalls(msg);
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      toolMessages.length > 0 && enableToolCallIndicator && hasToolCalls && /* @__PURE__ */ jsx(
+        ToolCallFunctions,
+        {
+          title: "Agent Thinking",
+          toolMessages
+        }
+      ),
+      combinedContent && /* @__PURE__ */ jsx(
+        AgentMessage,
+        {
+          message: combinedMessage,
+          isStreaming: isStreamingThisMessage
+        }
+      ),
+      groupedMessages.map((m) => /* @__PURE__ */ jsx(CustomComponentRender, { message: m, thread: stream }, m.id))
+    ] }, 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",
     {
-      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",
-          {
-            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",
-          {
-            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
-          }
-        ),
-        /* @__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" })
-              }
-            )
-          ] })
-        ] })
-      ]
+      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":";;;AASA,SAAwB,UAAU;AAAA,EAChC;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAUG;AACD,QAAM,aACH,MAAM,OAAO,SAAS,KAAK,UAAU,SAAS,MAAM,CAAC;AAExD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAGT,UAAA;AAAA,QAAA,UAAU,SAAS,KAClB,oBAAC,OAAA,EAAI,WAAU,4FACZ,UAAA,UAAU,IAAI,CAAC,MAAM,UACpB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,gBAAA,oBAAC,UAAA,EAAS,WAAU,0BAAyB,MAAM,IAAI;AAAA,gBACvD,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,kBAAA,oBAAC,QAAA,EAAK,WAAU,8CACb,UAAA,KAAK,UACR;AAAA,sCACC,QAAA,EAAK,WAAU,sCACb,UAAA,KAAK,YAAY,oBAAA,CACpB;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA,GACF;AAAA,cAEA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MACP,aAAa,CAAC,SAAS,KAAK,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK,CAAC;AAAA,kBAE3D,WAAU;AAAA,kBACV,cAAW;AAAA,kBAEX,UAAA,oBAAC,GAAA,EAAE,MAAM,IAAI,WAAU,eAAA,CAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,YACxC;AAAA,UAAA;AAAA,UAxBK,QAAQ,KAAK,IAAI,KAAK,QAAQ;AAAA,QAAA,CA0BtC,GACH;AAAA,QAIF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU,CAAC,MAAM;AACf,uBAAS,EAAE,OAAO,KAAK;AACvB,oBAAM,YAAY;AAClB,gBAAE,OAAO,MAAM,SAAS;AACxB,gBAAE,OAAO,MAAM,SAAS,KAAK,IAAI,EAAE,OAAO,cAAc,SAAS,IAAI;AAAA,YACvE;AAAA,YACA,WAAW,CAAC,MAAM;AAChB,kBACE,EAAE,QAAQ,WACV,CAAC,EAAE,YACH,CAAC,EAAE,WACH,CAAC,EAAE,YAAY,aACf;AACA,kBAAE,eAAA;AACF,oBAAI,WAAW;AACb,oBAAE,cAAc,MAAM,cAAA;AAAA,gBACxB;AAAA,cACF;AAAA,YACF;AAAA,YACA,UAAU;AAAA,YACV,WAAU;AAAA,YACV,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIR,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAW,kBAAkB,YAAY,kCAAkC,EACzE;AAAA,gBAEF,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACZ;AAAA,YAAA;AAAA,YAEF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,UAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,UAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ,GACF;AAAA,UAEA,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,YAAA,aAAa,YACZ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAKH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU,CAAC;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO,EAAE,QAAQ,OAAA;AAAA,gBAEjB,UAAA,oBAAC,QAAA,EAAO,MAAM,IAAI,WAAU,iBAAA,CAAiB;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/C,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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    // 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    // Skip if this AI message was already combined with a previous one\n    if (msg.type === \"ai\" && index > 0) {\n      // Check if previous non-tool message is also an AI message\n      let prevIndex = index - 1;\n      while (prevIndex >= 0 && isToolMessage(messagesArray[prevIndex])) {\n        prevIndex--;\n      }\n      \n      if (prevIndex >= 0 && messagesArray[prevIndex].type === \"ai\") {\n        // This is a consecutive AI message, skip it (it will be combined with the previous one)\n        return null;\n      }\n    }\n\n    // Collect all consecutive AI messages and tool messages\n    const groupedMessages = [msg];\n    const toolMessages = [];\n    let nextIndex = index + 1;\n    \n    while (nextIndex < messagesArray.length) {\n      const nextMsg = messagesArray[nextIndex];\n      \n      if (isToolMessage(nextMsg)) {\n        toolMessages.push(nextMsg);\n        nextIndex++;\n      } else if (nextMsg.type === \"ai\") {\n        // Combine consecutive AI messages\n        groupedMessages.push(nextMsg);\n        nextIndex++;\n      } else {\n        // Stop at human messages or other types\n        break;\n      }\n    }\n\n    // Combine content from all AI messages\n    const combinedContent = groupedMessages\n      .map(m => {\n        if (typeof m.content === \"string\") return m.content;\n        if (Array.isArray(m.content)) {\n          return m.content\n            .map((c: any) => c.type === \"text\" ? c.text : \"\")\n            .filter(Boolean)\n            .join(\" \");\n        }\n        return \"\";\n      })\n      .filter(Boolean)\n      .join(\"\\n\\n\");\n\n    // Create a combined message object\n    const combinedMessage = {\n      ...msg,\n      content: combinedContent,\n    };\n\n    const isLastMessageGroup = nextIndex >= messagesArray.length;\n    const isStreamingThisMessage = isLoading && isLastMessageGroup;\n\n    // Check if the first message in the group has tool calls\n    const hasToolCalls = isAiWithToolCalls(msg);\n\n    return (\n      <React.Fragment key={msgKey}>\n        {/* 1. Thinking indicator - only show if tool messages exist */}\n        {toolMessages.length > 0 && enableToolCallIndicator && hasToolCalls && (\n          <ToolCallFunctions\n            title=\"Agent Thinking\"\n            toolMessages={toolMessages}\n          />\n        )}\n        {/* 2. Agent message (combined content) */}\n        {combinedContent && (\n          <AgentMessage\n            message={combinedMessage}\n            isStreaming={isStreamingThisMessage}\n          />\n        )}\n        {/* 3. Custom component (from all messages in the group) */}\n        {groupedMessages.map((m) => (\n          <CustomComponentRender key={m.id} message={m} thread={stream} />\n        ))}\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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"}