@djangocfg/ui-tools 2.1.371 → 2.1.372

package/dist/index.cjs

@@ -7,7 +7,7 @@ var chunkKNDLV4PI_cjs = require('./chunk-KNDLV4PI.cjs');
 var chunk5I5QNGUG_cjs = require('./chunk-5I5QNGUG.cjs');
 var chunkYW5IVWHQ_cjs = require('./chunk-YW5IVWHQ.cjs');
 var chunk76NNDZH6_cjs = require('./chunk-76NNDZH6.cjs');
-var chunk2SKR4U5S_cjs = require('./chunk-2SKR4U5S.cjs');
+var chunkA6DDYQQV_cjs = require('./chunk-A6DDYQQV.cjs');
 var chunkYXZ6GU7H_cjs = require('./chunk-YXZ6GU7H.cjs');
 var chunkFVVF7VCD_cjs = require('./chunk-FVVF7VCD.cjs');
 var chunk7EYHNP3E_cjs = require('./chunk-7EYHNP3E.cjs');
@@ -373,7 +373,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-HOQ37WRE.cjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-AD2JIUIU.cjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsxRuntime.jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })
@@ -410,7 +410,7 @@ async function* parseSSE(response, options = {}) {
     throw new Error("SSE response has no body");
   }
   const map = options.map ?? DEFAULT_MAP;
-  const idleMs = options.idleTimeoutMs ?? chunk2SKR4U5S_cjs.LIMITS.sseIdleMs;
+  const idleMs = options.idleTimeoutMs ?? chunkA6DDYQQV_cjs.LIMITS.sseIdleMs;
   const reader = response.body.getReader();
   const decoder = new TextDecoder();
   let buffer = "";
@@ -613,7 +613,7 @@ function createMockTransport(opts = {}) {
     async createSession(_opts) {
       await sleep(latency);
       return {
-        sessionId: chunk2SKR4U5S_cjs.createId("s"),
+        sessionId: chunkA6DDYQQV_cjs.createId("s"),
         messages: history.length ? [...history] : void 0,
         hasMore: false,
         cursor: null,
@@ -630,12 +630,12 @@ function createMockTransport(opts = {}) {
         throw new Error("mock transport scripted failure");
       }
       history.push({
-        id: chunk2SKR4U5S_cjs.createId("u"),
+        id: chunkA6DDYQQV_cjs.createId("u"),
         role: "user",
         content,
         createdAt: Date.now()
       });
-      const messageId = chunk2SKR4U5S_cjs.createId("a");
+      const messageId = chunkA6DDYQQV_cjs.createId("a");
       yield { type: "message_start", messageId, sessionId: _sid };
       const reply = replies[turn % replies.length];
       turn += 1;
@@ -664,7 +664,7 @@ function createMockTransport(opts = {}) {
       turn += 1;
       const text = typeof reply === "string" ? reply : reply.filter((e) => e.type === "chunk").map((e) => e.delta).join("");
       return {
-        id: chunk2SKR4U5S_cjs.createId("a"),
+        id: chunkA6DDYQQV_cjs.createId("a"),
         role: "assistant",
         content: text || DEFAULT_REPLY,
         createdAt: Date.now()
@@ -864,9 +864,9 @@ function AudioToggle({
   alwaysShow = false,
   className
 }) {
-  const muted = chunk2SKR4U5S_cjs.useChatAudioPrefs((s) => s.muted);
-  const setMuted = chunk2SKR4U5S_cjs.useChatAudioPrefs((s) => s.setMuted);
-  const ctx = chunk2SKR4U5S_cjs.useChatContextOptional();
+  const muted = chunkA6DDYQQV_cjs.useChatAudioPrefs((s) => s.muted);
+  const setMuted = chunkA6DDYQQV_cjs.useChatAudioPrefs((s) => s.setMuted);
+  const ctx = chunkA6DDYQQV_cjs.useChatContextOptional();
   if (ctx && !ctx.hasAudio && !alwaysShow) return null;
   const Icon = muted ? lucideReact.VolumeX : lucideReact.Volume2;
   const label = muted ? "Unmute chat sounds" : "Mute chat sounds";
@@ -2180,151 +2180,151 @@ Object.defineProperty(exports, "useCronWeekDays", {
 });
 Object.defineProperty(exports, "Attachments", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Attachments; }
+  get: function () { return chunkA6DDYQQV_cjs.Attachments; }
 });
 Object.defineProperty(exports, "AttachmentsGrid", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.AttachmentsGrid; }
+  get: function () { return chunkA6DDYQQV_cjs.AttachmentsGrid; }
 });
 Object.defineProperty(exports, "AttachmentsList", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.AttachmentsList; }
+  get: function () { return chunkA6DDYQQV_cjs.AttachmentsList; }
 });
 Object.defineProperty(exports, "CHAT_EVENT_NAME", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.CHAT_EVENT_NAME; }
+  get: function () { return chunkA6DDYQQV_cjs.CHAT_EVENT_NAME; }
 });
 Object.defineProperty(exports, "CSS_VARS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.CSS_VARS; }
+  get: function () { return chunkA6DDYQQV_cjs.CSS_VARS; }
 });
 Object.defineProperty(exports, "ChatProvider", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ChatProvider; }
+  get: function () { return chunkA6DDYQQV_cjs.ChatProvider; }
 });
 Object.defineProperty(exports, "ChatRoot", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ChatRoot; }
+  get: function () { return chunkA6DDYQQV_cjs.ChatRoot; }
 });
 Object.defineProperty(exports, "Composer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Composer; }
+  get: function () { return chunkA6DDYQQV_cjs.Composer; }
 });
 Object.defineProperty(exports, "DEFAULT_LABELS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_LABELS; }
+  get: function () { return chunkA6DDYQQV_cjs.DEFAULT_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_SIDEBAR", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_SIDEBAR; }
+  get: function () { return chunkA6DDYQQV_cjs.DEFAULT_SIDEBAR; }
 });
 Object.defineProperty(exports, "DEFAULT_Z_INDEX", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.DEFAULT_Z_INDEX; }
+  get: function () { return chunkA6DDYQQV_cjs.DEFAULT_Z_INDEX; }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.EmptyState; }
+  get: function () { return chunkA6DDYQQV_cjs.EmptyState; }
 });
 Object.defineProperty(exports, "ErrorBanner", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ErrorBanner; }
+  get: function () { return chunkA6DDYQQV_cjs.ErrorBanner; }
 });
 Object.defineProperty(exports, "HOTKEYS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.HOTKEYS; }
+  get: function () { return chunkA6DDYQQV_cjs.HOTKEYS; }
 });
 Object.defineProperty(exports, "JumpToLatest", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.JumpToLatest; }
+  get: function () { return chunkA6DDYQQV_cjs.JumpToLatest; }
 });
 Object.defineProperty(exports, "LIMITS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.LIMITS; }
+  get: function () { return chunkA6DDYQQV_cjs.LIMITS; }
 });
 Object.defineProperty(exports, "MessageActions", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageActions; }
+  get: function () { return chunkA6DDYQQV_cjs.MessageActions; }
 });
 Object.defineProperty(exports, "MessageBubble", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageBubble; }
+  get: function () { return chunkA6DDYQQV_cjs.MessageBubble; }
 });
 Object.defineProperty(exports, "MessageList", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.MessageList; }
+  get: function () { return chunkA6DDYQQV_cjs.MessageList; }
 });
 Object.defineProperty(exports, "STORAGE_KEYS", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.STORAGE_KEYS; }
+  get: function () { return chunkA6DDYQQV_cjs.STORAGE_KEYS; }
 });
 Object.defineProperty(exports, "Sources", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.Sources; }
+  get: function () { return chunkA6DDYQQV_cjs.Sources; }
 });
 Object.defineProperty(exports, "StreamingIndicator", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.StreamingIndicator; }
+  get: function () { return chunkA6DDYQQV_cjs.StreamingIndicator; }
 });
 Object.defineProperty(exports, "ToolCalls", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.ToolCalls; }
+  get: function () { return chunkA6DDYQQV_cjs.ToolCalls; }
 });
 Object.defineProperty(exports, "createId", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.createId; }
+  get: function () { return chunkA6DDYQQV_cjs.createId; }
 });
 Object.defineProperty(exports, "createTokenBuffer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.createTokenBuffer; }
+  get: function () { return chunkA6DDYQQV_cjs.createTokenBuffer; }
 });
 Object.defineProperty(exports, "deriveInitials", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.deriveInitials; }
+  get: function () { return chunkA6DDYQQV_cjs.deriveInitials; }
 });
 Object.defineProperty(exports, "getChatLogger", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.getChatLogger; }
+  get: function () { return chunkA6DDYQQV_cjs.getChatLogger; }
 });
 Object.defineProperty(exports, "initialState", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.initialState; }
+  get: function () { return chunkA6DDYQQV_cjs.initialState; }
 });
 Object.defineProperty(exports, "reducer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.reducer; }
+  get: function () { return chunkA6DDYQQV_cjs.reducer; }
 });
 Object.defineProperty(exports, "resolvePersona", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.resolvePersona; }
+  get: function () { return chunkA6DDYQQV_cjs.resolvePersona; }
 });
 Object.defineProperty(exports, "useChat", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChat; }
+  get: function () { return chunkA6DDYQQV_cjs.useChat; }
 });
 Object.defineProperty(exports, "useChatAudio", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatAudio; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatAudio; }
 });
 Object.defineProperty(exports, "useChatAudioPrefs", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatAudioPrefs; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatAudioPrefs; }
 });
 Object.defineProperty(exports, "useChatComposer", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatComposer; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatComposer; }
 });
 Object.defineProperty(exports, "useChatContext", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatContext; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatContext; }
 });
 Object.defineProperty(exports, "useChatContextOptional", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatContextOptional; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatContextOptional; }
 });
 Object.defineProperty(exports, "useChatLayout", {
   enumerable: true,
-  get: function () { return chunk2SKR4U5S_cjs.useChatLayout; }
+  get: function () { return chunkA6DDYQQV_cjs.useChatLayout; }
 });
 Object.defineProperty(exports, "TreeError", {
   enumerable: true,

package/dist/index.mjs

@@ -5,8 +5,8 @@ export { NativeProvider, StreamProvider, VideoControls, VideoErrorFallback, Vide
 export { ImageViewer } from './chunk-OBRSGM64.mjs';
 export { generateContentKey, useAudioCache, useBlobUrlCleanup, useImageCache, useMediaCacheStore, useVideoCache, useVideoPlayerSettings } from './chunk-C6GXVH5J.mjs';
 export { CronSchedulerProvider, CustomInput, DayChips, MonthDayGrid, SchedulePreview, ScheduleTypeSelector, TimeSelector, buildCron, humanizeCron, isValidCron, parseCron, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays } from './chunk-PVAX67JG.mjs';
-import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-MVAT6OPZ.mjs';
-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 } from './chunk-MVAT6OPZ.mjs';
+import { LIMITS, createId, useChatAudioPrefs, useChatContextOptional } from './chunk-KSBMKHYY.mjs';
+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 } from './chunk-KSBMKHYY.mjs';
 export { TreeError, TreeSkeleton, createDemoTree } from './chunk-B6IR5KSC.mjs';
 export { DEFAULT_TREE_APPEARANCE, DEFAULT_TREE_LABELS, TreeRoot as Tree, TreeChevron, TreeContent, TreeEmpty, TreeIcon, TreeIndentGuides, TreeLabel, TreeProvider, TreeRoot, TreeRow, TreeSearchInput, appearanceToStyle, clearTreeState, createChildCache, flattenTree, loadTreeState, resolveAppearance, resolveChildren, saveTreeState, useTreeActions, useTreeContext, useTreeExpansion, useTreeFocus, useTreeKeyboard, useTreeLabels, useTreeRows, useTreeSearch, useTreeSelection, useTreeTypeAhead } from './chunk-ZL7FH4NW.mjs';
 import { PlaygroundProvider } from './chunk-Y6UTOBF6.mjs';
@@ -348,7 +348,7 @@ var LazyTree = createLazyComponent(
   }
 );
 var LazyChat = createLazyComponent(
-  () => import('./ChatRoot-DYMCNGOB.mjs').then((m) => ({ default: m.ChatRoot })),
+  () => import('./ChatRoot-2WNYE2V5.mjs').then((m) => ({ default: m.ChatRoot })),
   {
     displayName: "LazyChat",
     fallback: /* @__PURE__ */ jsx(LoadingFallback, { minHeight: 320, text: "Loading chat\u2026" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-tools",
-  "version": "2.1.371",
+  "version": "2.1.372",
   "description": "Heavy React tools with lazy loading - for Electron, Vite, CRA, Next.js apps",
   "keywords": [
     "ui-tools",
@@ -156,8 +156,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.371",
-    "@djangocfg/ui-core": "^2.1.371",
+    "@djangocfg/i18n": "^2.1.372",
+    "@djangocfg/ui-core": "^2.1.372",
     "consola": "^3.4.2",
     "lodash-es": "^4.18.1",
     "lucide-react": "^0.545.0",
@@ -211,10 +211,10 @@
     "material-file-icons": "^2.4.0"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.371",
+    "@djangocfg/i18n": "^2.1.372",
     "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.371",
-    "@djangocfg/ui-core": "^2.1.371",
+    "@djangocfg/typescript-config": "^2.1.372",
+    "@djangocfg/ui-core": "^2.1.372",
     "@types/lodash-es": "^4.17.12",
     "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/node": "^24.7.2",

package/src/tools/Chat/components/MessageList.tsx

@@ -96,6 +96,14 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   const { copyToClipboard } = useCopy();
 
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);
+  // Track whether we've already landed on the bottom for the initial
+  // history. Virtuoso's `initialTopMostItemIndex` only fires on first
+  // mount and uses the `messages` length at that moment. Chats almost
+  // always mount with `messages=[]` and then receive history one
+  // dispatch later — so we ALSO fire an imperative scroll when the
+  // first non-empty batch arrives. Subsequent updates fall through to
+  // `followOutput` (sticky-bottom while the user is at bottom).
+  const didInitialScrollRef = useRef(false);
 
   useImperativeHandle(
     ref,
@@ -132,6 +140,24 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
   );
 
   const itemRenderer = renderItem ?? defaultRenderItem;
+  // Jump to bottom on the first non-empty messages batch. Wrapped in
+  // rAF so virtuoso has measured the new items before we ask it to
+  // scroll — otherwise the call happens while the list is still
+  // mid-layout and lands on the wrong offset.
+  useEffect(() => {
+    if (didInitialScrollRef.current) return;
+    if (messages.length === 0) return;
+    didInitialScrollRef.current = true;
+    const id = requestAnimationFrame(() => {
+      virtuosoRef.current?.scrollToIndex({
+        index: 'LAST',
+        align: 'end',
+        behavior: 'auto',
+      });
+    });
+    return () => cancelAnimationFrame(id);
+  }, [messages.length]);
+
   // Virtuoso may invoke `computeItemKey` for an index briefly out of
   // sync with `data` during fast state churn (streaming chunks +
   // Strict Mode double-mount). `m` arrives undefined in that window.
@@ -213,6 +239,13 @@ export const MessageList = forwardRef<MessageListHandle, MessageListProps>(funct
       computeItemKey={computeItemKey}
       itemContent={(index, m) => (m ? itemRenderer(m, index) : null)}
       defaultItemHeight={defaultItemHeight}
+      // Land on the latest message when the list first mounts. Without
+      // this, Virtuoso renders index 0 (top of history) and the user
+      // sees the oldest message instead of the most recent — chat
+      // convention is "latest at the bottom, ready to read". Re-evaluated
+      // only on mount; subsequent updates respect the user's scroll
+      // position via `followOutput` + `atBottomStateChange`.
+      initialTopMostItemIndex={messages.length > 0 ? messages.length - 1 : 0}
       // Sticky-bottom: keep the viewport anchored to the latest message
       // unless the user scrolled up. `'smooth'` while streaming would
       // jank; Virtuoso defaults to `'auto'` which is what we want.

package/dist/ChatRoot-DYMCNGOB.mjs

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

package/dist/ChatRoot-HOQ37WRE.cjs

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