@djangocfg/ui-tools 2.1.368 → 2.1.371

package/dist/{chunk-WGU5BEZX.mjs → chunk-MVAT6OPZ.mjs}

@@ -1,14 +1,15 @@
 import { MarkdownMessage } from './chunk-NWUT327A.mjs';
 import { __name } from './chunk-N2XQF2OL.mjs';
-import { createContext, forwardRef, memo, useCallback, useReducer, useRef, useEffect, useState, useMemo, useSyncExternalStore, useContext } from 'react';
+import { createContext, forwardRef, memo, useRef, useImperativeHandle, useCallback, useMemo, useReducer, useEffect, useState, useSyncExternalStore, useContext } from 'react';
 import { cn, isDev } from '@djangocfg/ui-core/lib';
 import { consola } from 'consola';
-import { useLocalStorage, useMediaQuery } from '@djangocfg/ui-core/hooks';
+import { useCopy, useLocalStorage, useMediaQuery } from '@djangocfg/ui-core/hooks';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Paperclip, Square, Send, File, X, Sparkles, AlertCircle, RefreshCw, ArrowDown, ExternalLink, ChevronDown, ChevronRight, Loader2, Copy, Pencil, Trash } from 'lucide-react';
 import { Button, Textarea, Spinner, Avatar, AvatarImage, AvatarFallback } from '@djangocfg/ui-core/components';
+import { Virtuoso } from 'react-virtuoso';
 
 // src/tools/Chat/types.ts
 var DEFAULT_LABELS = {
@@ -692,13 +693,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 = useCallback(() => {
     abortRef.current?.abort();
@@ -1198,6 +1207,7 @@ function ChatProvider({
   streaming,
   audio,
   debug,
+  onBeforeSend,
   children
 }) {
   const audioApi = useChatAudio(audio ?? {});
@@ -1221,7 +1231,8 @@ function ChatProvider({
     onMessageSent,
     onMessageEnd,
     onStreamStart,
-    onError
+    onError,
+    onBeforeSend
   });
   const layout = useChatLayout({ defaultMode: "embedded" });
   const rootRef = useRef(null);
@@ -1277,9 +1288,28 @@ function useChatComposer(options) {
     disabled = false,
     submitOn = "enter",
     history = { enabled: true, size: LIMITS.composerHistorySize },
-    onPasteFiles
+    onPasteFiles,
+    persistKey
   } = options;
-  const [value, setValueState] = 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] = useState(initialFromStorage);
+  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] = useState([]);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const textareaRef = useRef(null);
@@ -1424,138 +1454,6 @@ function useChatComposer(options) {
   };
 }
 __name(useChatComposer, "useChatComposer");
-function useChatScroll(options) {
-  const {
-    containerRef,
-    bottomRef,
-    isStreaming = false,
-    bottomThresholdPx = 80,
-    messagesCount = 0
-  } = options;
-  const [isAtBottom, setIsAtBottom] = useState(true);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const lastCountRef = useRef(messagesCount);
-  const stickyRef = useRef(true);
-  const wasStreamingRef = useRef(isStreaming);
-  const scrollToBottom = 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 = useCallback(() => setUnreadCount(0), []);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const onScroll = /* @__PURE__ */ __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]);
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (isStreaming) {
-      wasStreamingRef.current = true;
-      if (!stickyRef.current) return;
-      let raf = 0;
-      const tick = /* @__PURE__ */ __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]);
-  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]);
-  useEffect(() => {
-  }, [bottomRef]);
-  return { isAtBottom, unreadCount, scrollToBottom, resetUnread };
-}
-__name(useChatScroll, "useChatScroll");
-function useChatHistory(options) {
-  const { enabled = true, containerRef, topSentinelRef, hasMore, isLoadingMore, loadMore } = options;
-  const heightBeforeRef = useRef(null);
-  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]);
-  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]);
-}
-__name(useChatHistory, "useChatHistory");
 function AttachmentsGrid({
   attachments,
   maxVisible,
@@ -2135,7 +2033,9 @@ var MessageBubbleInner = /* @__PURE__ */ __name(({
   onCopy,
   onRegenerate,
   onEdit,
-  onDelete
+  onDelete,
+  messageActionsExtra,
+  streamingIndicator
 }) => {
   const isUser = isUserProp ?? message.role === "user";
   const isStreaming = !!message.isStreaming;
@@ -2198,7 +2098,7 @@ var MessageBubbleInner = /* @__PURE__ */ __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__ */ jsx("div", { className: "mb-1.5", children: /* @__PURE__ */ jsx(StreamingIndicator, { label: message.toolActivity }) }) : null,
+                isStreaming && message.toolActivity ? /* @__PURE__ */ jsx("div", { className: "mb-1.5", children: streamingIndicator ? streamingIndicator(message) : /* @__PURE__ */ jsx(StreamingIndicator, { label: message.toolActivity }) }) : null,
                 message.content || !isStreaming ? /* @__PURE__ */ jsx(
                   MarkdownMessage,
                   {
@@ -2207,22 +2107,25 @@ var MessageBubbleInner = /* @__PURE__ */ __name(({
                     isCompact,
                     plainText: isStreaming
                   }
-                ) : /* @__PURE__ */ jsx(StreamingIndicator, {})
+                ) : streamingIndicator ? streamingIndicator(message) : /* @__PURE__ */ jsx(StreamingIndicator, {})
               ]
             }
           ),
           message.toolCalls?.length ? toolCallsRenderer ? toolCallsRenderer(message.toolCalls) : /* @__PURE__ */ jsx(ToolCalls, { calls: message.toolCalls, ...toolCallsProps }) : null,
           message.sources?.length && !isStreaming ? sourcesRenderer ? sourcesRenderer(message.sources) : /* @__PURE__ */ jsx(Sources, { sources: message.sources }) : null,
-          showActions && !isStreaming ? /* @__PURE__ */ jsx(
-            MessageActions,
-            {
-              role: message.role,
-              onCopy,
-              onRegenerate,
-              onEdit,
-              onDelete
-            }
-          ) : null,
+          showActions && !isStreaming ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              MessageActions,
+              {
+                role: message.role,
+                onCopy,
+                onRegenerate,
+                onEdit,
+                onDelete
+              }
+            ),
+            messageActionsExtra ? messageActionsExtra(message) : null
+          ] }) : null,
           showTimestamp ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] text-muted-foreground", children: new Date(message.createdAt).toLocaleTimeString() }) : null,
           afterContent
         ] })
@@ -2241,50 +2144,120 @@ var MessageList = forwardRef(/* @__PURE__ */ __name(function MessageList2({
   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 { copyToClipboard } = useCopy();
+  const virtuosoRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToBottom: /* @__PURE__ */ __name((smooth = false) => {
+        virtuosoRef.current?.scrollToIndex({
+          index: "LAST",
+          behavior: smooth ? "smooth" : "auto",
+          align: "end"
+        });
+      }, "scrollToBottom"),
+      scrollToIndex: /* @__PURE__ */ __name((index, smooth = false) => {
+        virtuosoRef.current?.scrollToIndex({
+          index,
+          behavior: smooth ? "smooth" : "auto"
+        });
+      }, "scrollToIndex")
+    }),
+    []
+  );
   const defaultRenderItem = useCallback(
     (m) => /* @__PURE__ */ jsx("div", { className: itemClassName, children: /* @__PURE__ */ jsx(
       MessageBubble,
       {
         message: m,
-        onCopy: () => copy(m.content),
+        onCopy: () => void copyToClipboard(m.content),
         onRegenerate: ctx ? () => void ctx.regenerate(m.id) : void 0,
         onDelete: ctx ? () => ctx.deleteMessage(m.id) : void 0
       }
-    ) }, m.id),
-    [itemClassName, ctx]
+    ) }),
+    [itemClassName, ctx, copyToClipboard]
   );
   const itemRenderer = renderItem ?? defaultRenderItem;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  const computeItemKey = useCallback(
+    (index, m) => m?.id ?? index,
+    []
+  );
+  const startReachedHandler = 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__ */ jsx(
+      "div",
+      {
+        role: "log",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        className: cn("flex-1 overflow-y-auto", className),
+        children: renderEmpty?.() ?? null
+      }
+    );
+  }
+  if (noVirtualize) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "log",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        className: cn("flex-1 overflow-y-auto", className),
+        children: [
+          isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-muted-foreground" }) }) : null,
+          messages.map((m, i) => /* @__PURE__ */ jsx("div", { children: itemRenderer(m, i) }, m.id ?? i))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Virtuoso,
     {
-      ref,
+      ref: virtuosoRef,
       role: "log",
       "aria-live": "polite",
       "aria-atomic": "false",
-      className: cn("flex-1 overflow-y-auto", className),
-      children: [
-        /* @__PURE__ */ jsx("div", { ref: topSentinelRef, "aria-hidden": true }),
-        isLoadingMore ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-muted-foreground" }) }) : null,
-        messages.length === 0 ? renderEmpty?.() ?? null : messages.map((m, i) => itemRenderer(m, i)),
-        /* @__PURE__ */ jsx("div", { ref: bottomRef, "aria-hidden": true })
-      ]
+      className: cn("flex-1", className),
+      data: messages,
+      computeItemKey,
+      itemContent: (index, m) => m ? itemRenderer(m, index) : null,
+      defaultItemHeight,
+      followOutput: (isAtBottom) => isAtBottom ? "auto" : false,
+      atBottomStateChange: onAtBottomChange,
+      alignToBottom: true,
+      startReached: startReachedHandler,
+      components: isLoadingMore ? {
+        Header: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(Spinner, { className: "size-4 text-muted-foreground" }) }), "Header")
+      } : EMPTY_COMPONENTS,
+      increaseViewportBy: { top: 200, bottom: 400 }
     }
   );
 }, "MessageList"));
-function copy(text) {
-  if (typeof navigator !== "undefined" && navigator.clipboard) {
-    void navigator.clipboard.writeText(text);
-  }
-}
-__name(copy, "copy");
+var EMPTY_COMPONENTS = {};
 function ChatRoot(props) {
   const { transport, config, initialSessionId, autoCreateSession, streaming, audio, debug, className, listClassName, ...slots } = props;
   return /* @__PURE__ */ jsx(
@@ -2308,22 +2281,9 @@ function ChatRootShell({ className, listClassName, slots }) {
     onSubmit: /* @__PURE__ */ __name((content, attachments) => chat.sendMessage(content, attachments), "onSubmit"),
     disabled: chat.isStreaming
   });
-  const containerRef = useRef(null);
-  const bottomRef = useRef(null);
-  const topRef = 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 = useRef(null);
+  const [isAtBottom, setIsAtBottom] = 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;
@@ -2347,7 +2307,7 @@ function ChatRootShell({ className, listClassName, slots }) {
       toolCallsProps: slots.toolCallsProps,
       attachmentRenderers: slots.attachmentRenderers,
       onAttachmentOpen: slots.onAttachmentOpen,
-      onCopy: () => copy2(m.content),
+      onCopy: () => copy(m.content),
       onRegenerate: () => void chat.regenerate(m.id),
       onDelete: () => chat.deleteMessage(m.id)
     },
@@ -2368,20 +2328,19 @@ function ChatRootShell({ className, listClassName, slots }) {
       /* @__PURE__ */ jsx(
         MessageList,
         {
-          ref: containerRef,
-          topSentinelRef: topRef,
-          bottomRef,
+          ref: listRef,
           renderItem,
           renderEmpty: () => /* @__PURE__ */ jsx(Fragment, { children: emptyNode }),
-          className: listClassName
+          className: listClassName,
+          onStartReached: handleStartReached,
+          onAtBottomChange: setIsAtBottom
         }
       ),
       /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-2 flex justify-center", children: slots.jumpToLatest ?? /* @__PURE__ */ jsx(
         JumpToLatest,
         {
-          visible: !scroll.isAtBottom,
-          unreadCount: scroll.unreadCount,
-          onClick: () => scroll.scrollToBottom(true)
+          visible: !isAtBottom,
+          onClick: () => listRef.current?.scrollToBottom(true)
         }
       ) })
     ] }),
@@ -2402,13 +2361,13 @@ function ChatRootShell({ className, listClassName, slots }) {
   ] });
 }
 __name(ChatRootShell, "ChatRootShell");
-function copy2(text) {
+function copy(text) {
   if (typeof navigator !== "undefined" && navigator.clipboard) {
     void navigator.clipboard.writeText(text);
   }
 }
-__name(copy2, "copy");
+__name(copy, "copy");
 
-export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatHistory, useChatLayout, useChatScroll };
-//# sourceMappingURL=chunk-WGU5BEZX.mjs.map
-//# sourceMappingURL=chunk-WGU5BEZX.mjs.map
+export { Attachments, AttachmentsGrid, AttachmentsList, CHAT_EVENT_NAME, CSS_VARS, ChatProvider, ChatRoot, Composer, DEFAULT_LABELS, DEFAULT_SIDEBAR, DEFAULT_Z_INDEX, EmptyState, ErrorBanner, HOTKEYS, JumpToLatest, LIMITS, MessageActions, MessageBubble, MessageList, STORAGE_KEYS, Sources, StreamingIndicator, ToolCalls, createId, createTokenBuffer, deriveInitials, getChatLogger, initialState, reducer, resolvePersona, useChat, useChatAudio, useChatAudioPrefs, useChatComposer, useChatContext, useChatContextOptional, useChatLayout };
+//# sourceMappingURL=chunk-MVAT6OPZ.mjs.map
+//# sourceMappingURL=chunk-MVAT6OPZ.mjs.map