@djangocfg/ui-tools 2.1.368 → 2.1.369

package/dist/ChatRoot-DENECC2Q.mjs

@@ -0,0 +1,5 @@
+export { ChatRoot } from './chunk-YLIYXSUO.mjs';
+import './chunk-NWUT327A.mjs';
+import './chunk-N2XQF2OL.mjs';
+//# sourceMappingURL=ChatRoot-DENECC2Q.mjs.map
+//# sourceMappingURL=ChatRoot-DENECC2Q.mjs.map

package/dist/{ChatRoot-6U7633X3.mjs.map → ChatRoot-DENECC2Q.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"ChatRoot-6U7633X3.mjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ChatRoot-DENECC2Q.mjs"}

package/dist/ChatRoot-PW6U3QVF.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var chunkOD3P64QD_cjs = require('./chunk-OD3P64QD.cjs');
+require('./chunk-XACCHZH2.cjs');
+require('./chunk-OLISEQHS.cjs');
+
+
+
+Object.defineProperty(exports, "ChatRoot", {
+  enumerable: true,
+  get: function () { return chunkOD3P64QD_cjs.ChatRoot; }
+});
+//# sourceMappingURL=ChatRoot-PW6U3QVF.cjs.map
+//# sourceMappingURL=ChatRoot-PW6U3QVF.cjs.map

package/dist/{ChatRoot-HARTIAJ5.cjs.map → ChatRoot-PW6U3QVF.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"ChatRoot-HARTIAJ5.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"ChatRoot-PW6U3QVF.cjs"}

package/dist/{chunk-OPKFKTIN.cjs → chunk-OD3P64QD.cjs}

@@ -11,6 +11,7 @@ var middleware = require('zustand/middleware');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var components = require('@djangocfg/ui-core/components');
+var reactVirtuoso = require('react-virtuoso');
 
 // src/tools/Chat/types.ts
 var DEFAULT_LABELS = {
@@ -694,13 +695,21 @@ function useChat(config) {
       };
       dispatch({ type: "MESSAGE_USER_ADD", message: userMsg });
       config.onMessageSent?.(userMsg);
+      let outbound = content;
+      if (config.onBeforeSend) {
+        try {
+          outbound = await config.onBeforeSend(content);
+        } catch (err) {
+          log.error.error("onBeforeSend threw \u2014 falling back to original content", err);
+        }
+      }
       if (streaming) {
-        await consumeStream(sessionId, content, attachments);
+        await consumeStream(sessionId, outbound, attachments);
       } else {
-        await consumeBuffered(sessionId, content, attachments);
+        await consumeBuffered(sessionId, outbound, attachments);
       }
     },
-    [streaming, consumeStream, consumeBuffered, config, awaitSession]
+    [streaming, consumeStream, consumeBuffered, config, awaitSession, log]
   );
   const cancelStream = react.useCallback(() => {
     abortRef.current?.abort();
@@ -1200,6 +1209,7 @@ function ChatProvider({
   streaming,
   audio,
   debug,
+  onBeforeSend,
   children
 }) {
   const audioApi = useChatAudio(audio ?? {});
@@ -1223,7 +1233,8 @@ function ChatProvider({
     onMessageSent,
     onMessageEnd,
     onStreamStart,
-    onError
+    onError,
+    onBeforeSend
   });
   const layout = useChatLayout({ defaultMode: "embedded" });
   const rootRef = react.useRef(null);
@@ -1279,9 +1290,28 @@ function useChatComposer(options) {
     disabled = false,
     submitOn = "enter",
     history = { enabled: true, size: LIMITS.composerHistorySize },
-    onPasteFiles
+    onPasteFiles,
+    persistKey
   } = options;
-  const [value, setValueState] = react.useState(initialValue);
+  const initialFromStorage = (() => {
+    if (!persistKey || typeof window === "undefined") return initialValue;
+    try {
+      const stored = window.sessionStorage.getItem(`chat:draft:${persistKey}`);
+      return stored && stored.length > 0 ? stored : initialValue;
+    } catch {
+      return initialValue;
+    }
+  })();
+  const [value, setValueState] = react.useState(initialFromStorage);
+  react.useEffect(() => {
+    if (!persistKey || typeof window === "undefined") return;
+    try {
+      const k = `chat:draft:${persistKey}`;
+      if (value.length > 0) window.sessionStorage.setItem(k, value);
+      else window.sessionStorage.removeItem(k);
+    } catch {
+    }
+  }, [value, persistKey]);
   const [attachments, setAttachments] = react.useState([]);
   const [isSubmitting, setIsSubmitting] = react.useState(false);
   const textareaRef = react.useRef(null);
@@ -1426,138 +1456,6 @@ function useChatComposer(options) {
   };
 }
 chunkOLISEQHS_cjs.__name(useChatComposer, "useChatComposer");
-function useChatScroll(options) {
-  const {
-    containerRef,
-    bottomRef,
-    isStreaming = false,
-    bottomThresholdPx = 80,
-    messagesCount = 0
-  } = options;
-  const [isAtBottom, setIsAtBottom] = react.useState(true);
-  const [unreadCount, setUnreadCount] = react.useState(0);
-  const lastCountRef = react.useRef(messagesCount);
-  const stickyRef = react.useRef(true);
-  const wasStreamingRef = react.useRef(isStreaming);
-  const scrollToBottom = react.useCallback(
-    (smooth = false) => {
-      const el = containerRef.current;
-      if (!el) return;
-      el.scrollTo({
-        top: el.scrollHeight,
-        behavior: smooth ? "smooth" : "auto"
-      });
-      stickyRef.current = true;
-      setIsAtBottom(true);
-      setUnreadCount(0);
-    },
-    [containerRef]
-  );
-  const resetUnread = react.useCallback(() => setUnreadCount(0), []);
-  react.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onScroll = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => {
-      const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-      const atBottom = distance <= bottomThresholdPx;
-      stickyRef.current = atBottom;
-      setIsAtBottom(atBottom);
-      if (atBottom) setUnreadCount(0);
-    }, "onScroll");
-    onScroll();
-    el.addEventListener("scroll", onScroll, { passive: true });
-    return () => {
-      el.removeEventListener("scroll", onScroll);
-    };
-  }, [containerRef, bottomThresholdPx]);
-  react.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (isStreaming) {
-      wasStreamingRef.current = true;
-      if (!stickyRef.current) return;
-      let raf = 0;
-      const tick = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => {
-        if (!stickyRef.current) return;
-        el.scrollTop = el.scrollHeight;
-        raf = requestAnimationFrame(tick);
-      }, "tick");
-      raf = requestAnimationFrame(tick);
-      return () => cancelAnimationFrame(raf);
-    }
-    if (wasStreamingRef.current && stickyRef.current) {
-      wasStreamingRef.current = false;
-      let raf1 = 0;
-      let raf2 = 0;
-      raf1 = requestAnimationFrame(() => {
-        el.scrollTop = el.scrollHeight;
-        raf2 = requestAnimationFrame(() => {
-          el.scrollTop = el.scrollHeight;
-        });
-      });
-      return () => {
-        cancelAnimationFrame(raf1);
-        cancelAnimationFrame(raf2);
-      };
-    }
-    wasStreamingRef.current = false;
-    return;
-  }, [containerRef, isStreaming]);
-  react.useEffect(() => {
-    if (messagesCount > lastCountRef.current) {
-      if (stickyRef.current) {
-        const el = containerRef.current;
-        if (el) el.scrollTop = el.scrollHeight;
-      } else {
-        setUnreadCount((n) => n + (messagesCount - lastCountRef.current));
-      }
-    }
-    lastCountRef.current = messagesCount;
-  }, [containerRef, messagesCount]);
-  react.useEffect(() => {
-  }, [bottomRef]);
-  return { isAtBottom, unreadCount, scrollToBottom, resetUnread };
-}
-chunkOLISEQHS_cjs.__name(useChatScroll, "useChatScroll");
-function useChatHistory(options) {
-  const { enabled = true, containerRef, topSentinelRef, hasMore, isLoadingMore, loadMore } = options;
-  const heightBeforeRef = react.useRef(null);
-  react.useEffect(() => {
-    if (heightBeforeRef.current == null) return;
-    const el = containerRef.current;
-    if (!el) {
-      heightBeforeRef.current = null;
-      return;
-    }
-    if (!isLoadingMore) {
-      const delta = el.scrollHeight - heightBeforeRef.current;
-      if (delta > 0) {
-        el.scrollTop += delta;
-      }
-      heightBeforeRef.current = null;
-    }
-  }, [containerRef, isLoadingMore]);
-  react.useEffect(() => {
-    if (!enabled || !hasMore) return;
-    const sentinel = topSentinelRef.current;
-    const root = containerRef.current;
-    if (!sentinel || !root) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (!entry?.isIntersecting) return;
-        if (isLoadingMore) return;
-        const el = containerRef.current;
-        if (el) heightBeforeRef.current = el.scrollHeight;
-        void loadMore();
-      },
-      { root, threshold: 0, rootMargin: "200px 0px 0px 0px" }
-    );
-    observer.observe(sentinel);
-    return () => observer.disconnect();
-  }, [enabled, hasMore, isLoadingMore, containerRef, topSentinelRef, loadMore]);
-}
-chunkOLISEQHS_cjs.__name(useChatHistory, "useChatHistory");
 function AttachmentsGrid({
   attachments,
   maxVisible,
@@ -2137,7 +2035,9 @@ var MessageBubbleInner = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(({
   onCopy,
   onRegenerate,
   onEdit,
-  onDelete
+  onDelete,
+  messageActionsExtra,
+  streamingIndicator
 }) => {
   const isUser = isUserProp ?? message.role === "user";
   const isStreaming = !!message.isStreaming;
@@ -2200,7 +2100,7 @@ var MessageBubbleInner = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(({
                 isUser ? "bg-primary text-primary-foreground rounded-tr-md" : isErr ? "bg-destructive/10 text-destructive rounded-tl-md border border-destructive/30" : "bg-muted text-foreground rounded-tl-md"
               ),
               children: [
-                isStreaming && message.toolActivity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator, { label: message.toolActivity }) }) : null,
+                isStreaming && message.toolActivity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1.5", children: streamingIndicator ? streamingIndicator(message) : /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator, { label: message.toolActivity }) }) : null,
                 message.content || !isStreaming ? /* @__PURE__ */ jsxRuntime.jsx(
                   chunkXACCHZH2_cjs.MarkdownMessage,
                   {
@@ -2209,22 +2109,25 @@ var MessageBubbleInner = /* @__PURE__ */ chunkOLISEQHS_cjs.__name(({
                     isCompact,
                     plainText: isStreaming
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator, {})
+                ) : streamingIndicator ? streamingIndicator(message) : /* @__PURE__ */ jsxRuntime.jsx(StreamingIndicator, {})
               ]
             }
           ),
           message.toolCalls?.length ? toolCallsRenderer ? toolCallsRenderer(message.toolCalls) : /* @__PURE__ */ jsxRuntime.jsx(ToolCalls, { calls: message.toolCalls, ...toolCallsProps }) : null,
           message.sources?.length && !isStreaming ? sourcesRenderer ? sourcesRenderer(message.sources) : /* @__PURE__ */ jsxRuntime.jsx(Sources, { sources: message.sources }) : null,
-          showActions && !isStreaming ? /* @__PURE__ */ jsxRuntime.jsx(
-            MessageActions,
-            {
-              role: message.role,
-              onCopy,
-              onRegenerate,
-              onEdit,
-              onDelete
-            }
-          ) : null,
+          showActions && !isStreaming ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              MessageActions,
+              {
+                role: message.role,
+                onCopy,
+                onRegenerate,
+                onEdit,
+                onDelete
+              }
+            ),
+            messageActionsExtra ? messageActionsExtra(message) : null
+          ] }) : null,
           showTimestamp ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-[10px] text-muted-foreground", children: new Date(message.createdAt).toLocaleTimeString() }) : null,
           afterContent
         ] })
@@ -2243,14 +2146,36 @@ var MessageList = react.forwardRef(/* @__PURE__ */ chunkOLISEQHS_cjs.__name(func
   renderItem,
   renderEmpty,
   isLoadingMore: isLoadingMoreProp,
-  topSentinelRef,
-  bottomRef,
+  onStartReached,
   className,
-  itemClassName
+  itemClassName,
+  noVirtualize = false,
+  defaultItemHeight = 120,
+  onAtBottomChange
 }, ref) {
   const ctx = useChatContextOptional();
   const messages = messagesProp ?? ctx?.messages ?? [];
   const isLoadingMore = isLoadingMoreProp ?? ctx?.isLoadingMore ?? false;
+  const virtuosoRef = react.useRef(null);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      scrollToBottom: /* @__PURE__ */ chunkOLISEQHS_cjs.__name((smooth = false) => {
+        virtuosoRef.current?.scrollToIndex({
+          index: "LAST",
+          behavior: smooth ? "smooth" : "auto",
+          align: "end"
+        });
+      }, "scrollToBottom"),
+      scrollToIndex: /* @__PURE__ */ chunkOLISEQHS_cjs.__name((index, smooth = false) => {
+        virtuosoRef.current?.scrollToIndex({
+          index,
+          behavior: smooth ? "smooth" : "auto"
+        });
+      }, "scrollToIndex")
+    }),
+    []
+  );
   const defaultRenderItem = react.useCallback(
     (m) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: itemClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
       MessageBubble,
@@ -2260,24 +2185,73 @@ var MessageList = react.forwardRef(/* @__PURE__ */ chunkOLISEQHS_cjs.__name(func
         onRegenerate: ctx ? () => void ctx.regenerate(m.id) : void 0,
         onDelete: ctx ? () => ctx.deleteMessage(m.id) : void 0
       }
-    ) }, m.id),
+    ) }),
     [itemClassName, ctx]
   );
   const itemRenderer = renderItem ?? defaultRenderItem;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  const computeItemKey = react.useCallback((index, m) => m.id ?? index, []);
+  const startReachedHandler = react.useMemo(() => {
+    if (!onStartReached) return void 0;
+    let inFlight = false;
+    return () => {
+      if (inFlight || isLoadingMore) return;
+      inFlight = true;
+      try {
+        onStartReached();
+      } finally {
+        queueMicrotask(() => {
+          inFlight = false;
+        });
+      }
+    };
+  }, [onStartReached, isLoadingMore]);
+  if (messages.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "log",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        className: lib.cn("flex-1 overflow-y-auto", className),
+        children: renderEmpty?.() ?? null
+      }
+    );
+  }
+  if (noVirtualize) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "log",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        className: lib.cn("flex-1 overflow-y-auto", className),
+        children: [
+          isLoadingMore ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(components.Spinner, { className: "size-4 text-muted-foreground" }) }) : null,
+          messages.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: itemRenderer(m, i) }, m.id ?? i))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactVirtuoso.Virtuoso,
     {
-      ref,
+      ref: virtuosoRef,
       role: "log",
       "aria-live": "polite",
       "aria-atomic": "false",
-      className: lib.cn("flex-1 overflow-y-auto", className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: topSentinelRef, "aria-hidden": true }),
-        isLoadingMore ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(components.Spinner, { className: "size-4 text-muted-foreground" }) }) : null,
-        messages.length === 0 ? renderEmpty?.() ?? null : messages.map((m, i) => itemRenderer(m, i)),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: bottomRef, "aria-hidden": true })
-      ]
+      className: lib.cn("flex-1", className),
+      data: messages,
+      computeItemKey,
+      itemContent: (index, m) => itemRenderer(m, index),
+      defaultItemHeight,
+      followOutput: (isAtBottom) => isAtBottom ? "auto" : false,
+      atBottomStateChange: onAtBottomChange,
+      alignToBottom: true,
+      startReached: startReachedHandler,
+      components: isLoadingMore ? {
+        Header: /* @__PURE__ */ chunkOLISEQHS_cjs.__name(() => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsxRuntime.jsx(components.Spinner, { className: "size-4 text-muted-foreground" }) }), "Header")
+      } : void 0,
+      increaseViewportBy: { top: 200, bottom: 400 }
     }
   );
 }, "MessageList"));
@@ -2310,22 +2284,9 @@ function ChatRootShell({ className, listClassName, slots }) {
     onSubmit: /* @__PURE__ */ chunkOLISEQHS_cjs.__name((content, attachments) => chat.sendMessage(content, attachments), "onSubmit"),
     disabled: chat.isStreaming
   });
-  const containerRef = react.useRef(null);
-  const bottomRef = react.useRef(null);
-  const topRef = react.useRef(null);
-  const scroll = useChatScroll({
-    containerRef,
-    bottomRef,
-    isStreaming: chat.isStreaming,
-    messagesCount: chat.messages.length
-  });
-  useChatHistory({
-    containerRef,
-    topSentinelRef: topRef,
-    hasMore: chat.hasMore,
-    isLoadingMore: chat.isLoadingMore,
-    loadMore: chat.loadMore
-  });
+  const listRef = react.useRef(null);
+  const [isAtBottom, setIsAtBottom] = react.useState(true);
+  const handleStartReached = chat.hasMore && !chat.isLoadingMore ? () => void chat.loadMore() : void 0;
   const greeting = chat.config.greeting ?? "How can I help?";
   const description = chat.config.description;
   const suggestions = chat.config.suggestions;
@@ -2370,20 +2331,19 @@ function ChatRootShell({ className, listClassName, slots }) {
       /* @__PURE__ */ jsxRuntime.jsx(
         MessageList,
         {
-          ref: containerRef,
-          topSentinelRef: topRef,
-          bottomRef,
+          ref: listRef,
           renderItem,
           renderEmpty: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: emptyNode }),
-          className: listClassName
+          className: listClassName,
+          onStartReached: handleStartReached,
+          onAtBottomChange: setIsAtBottom
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-2 flex justify-center", children: slots.jumpToLatest ?? /* @__PURE__ */ jsxRuntime.jsx(
         JumpToLatest,
         {
-          visible: !scroll.isAtBottom,
-          unreadCount: scroll.unreadCount,
-          onClick: () => scroll.scrollToBottom(true)
+          visible: !isAtBottom,
+          onClick: () => listRef.current?.scrollToBottom(true)
         }
       ) })
     ] }),
@@ -2447,8 +2407,6 @@ exports.useChatAudioPrefs = useChatAudioPrefs;
 exports.useChatComposer = useChatComposer;
 exports.useChatContext = useChatContext;
 exports.useChatContextOptional = useChatContextOptional;
-exports.useChatHistory = useChatHistory;
 exports.useChatLayout = useChatLayout;
-exports.useChatScroll = useChatScroll;
-//# sourceMappingURL=chunk-OPKFKTIN.cjs.map
-//# sourceMappingURL=chunk-OPKFKTIN.cjs.map
+//# sourceMappingURL=chunk-OD3P64QD.cjs.map
+//# sourceMappingURL=chunk-OD3P64QD.cjs.map