@limetech/lime-crm-building-blocks 1.118.0 → 1.119.0

package/dist/cjs/limebb-chat-list.cjs.entry.js

@@ -15,7 +15,7 @@ function getProcessedItemTimestamp(item) {
 /**
  * Processes a list of chat list inputs by adding date headers and a "new items" indicator.
  *
- * @param items - The list of items to process. Pre-sorted by `timestamp` in descending order.
+ * @param items - The list of items to process. Pre-sorted by `timestamp` in ascending order.
  * @param dateTimeFormatter - A service used to format dates for the date headers.
  * @param lastVisitedTimestamp - The timestamp of the user's last visit. Used to position the
  *   "new items" indicator.
@@ -29,16 +29,18 @@ function processChatItems(items, dateTimeFormatter, lastVisitedTimestamp) {
         processedItems: [],
         lastVisitedTimestamp: lastVisitedTimestamp,
         dateTimeFormatter: dateTimeFormatter,
-        newItemIndicatorInserted: false,
-        lastProcessedDate: null,
-        hasUnseenNotifications: items.some((item) => lastVisitedTimestamp &&
-            new Date(item.timestamp) > lastVisitedTimestamp),
     };
-    // Add processors here, in the order they should be executed
+    // Add processors here, in the order they should be executed.
+    // `insertNewItemIndicator` runs after `insertDateGroups` so the
+    // indicator can be placed at top level when the seen/unseen
+    // boundary falls between two groups, and only inside a group when
+    // the boundary falls within a single day. That placement makes
+    // `reverseProcessedItems` a pure two-level reverse — no group-
+    // boundary hoisting needed.
     const processors = [
         insertNotifications,
-        insertNewItemIndicator,
         insertDateGroups,
+        insertNewItemIndicator,
     ];
     const finalContext = createPipeline(initialContext, processors);
     return finalContext.processedItems;
@@ -47,6 +49,32 @@ function createPipeline(initialContext, processors) {
     // eslint-disable-next-line unicorn/no-array-reduce
     return processors.reduce((context, processor) => processor(context), initialContext);
 }
+/**
+ * Reverses the chronological order of a processed-items array.
+ *
+ * Pure two-level reverse: the top-level array is reversed, and each
+ * group's items are reversed. `insertNewItemIndicator` places the
+ * indicator at top level when the seen/unseen boundary falls
+ * between groups, and only nests it inside a group when the
+ * boundary falls within a single day — so reversal never needs to
+ * move an indicator across levels to preserve its separator role.
+ *
+ * Used by `limebb-chat-list` when rendering in `newest-on-top`
+ * layout, so that DOM order continues to match visual order
+ * (newest-first in that layout), keeping copy/paste, screen-reader,
+ * and tab order aligned with what the user sees.
+ *
+ * @param items - processed items in ascending-by-timestamp order
+ * @returns processed items in descending-by-timestamp order
+ */
+function reverseProcessedItems(items) {
+    return items.toReversed().map((item) => {
+        if (item.type !== 'group') {
+            return item;
+        }
+        return Object.assign(Object.assign({}, item), { items: item.items.toReversed() });
+    });
+}
 /**
  *
  * @param context
@@ -67,61 +95,99 @@ function insertNotifications(context) {
  * @param context
  */
 function insertNewItemIndicator(context) {
-    const processedWithIndicator = [];
-    let newItemIndicatorInserted = context.newItemIndicatorInserted;
-    for (const item of context.processedItems) {
-        const timestamp = getProcessedItemTimestamp(item);
-        if (timestamp !== undefined &&
-            context.lastVisitedTimestamp &&
-            !newItemIndicatorInserted &&
-            new Date(timestamp) <= context.lastVisitedTimestamp &&
-            context.hasUnseenNotifications) {
-            processedWithIndicator.push({ type: 'newItemIndicator' });
-            newItemIndicatorInserted = true;
+    if (!context.lastVisitedTimestamp) {
+        return context;
+    }
+    const groups = context.processedItems;
+    const lastVisited = context.lastVisitedTimestamp;
+    // Walk groups newest → oldest. Items and groups are sorted
+    // ascending, so at most one group straddles the seen/unseen
+    // boundary; the rest are entirely seen or entirely unseen. In an
+    // active chat where the newest item is already seen, the loop
+    // exits in O(1).
+    for (let g = groups.length - 1; g >= 0; g--) {
+        const group = groups[g];
+        if (group.type !== 'group') {
+            continue;
         }
-        processedWithIndicator.push(item);
+        const seenIndex = findNewestSeenIndex(group.items, lastVisited);
+        if (seenIndex === -1) {
+            continue;
+        }
+        return placeIndicatorAtBoundary(context, groups, g, group, seenIndex);
     }
-    context.processedItems = processedWithIndicator;
-    context.newItemIndicatorInserted = newItemIndicatorInserted;
+    // No seen item found — everything is unseen, no boundary to mark.
     return context;
 }
+function findNewestSeenIndex(items, lastVisited) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const timestamp = getProcessedItemTimestamp(items[i]);
+        if (timestamp === undefined) {
+            continue;
+        }
+        if (new Date(timestamp) <= lastVisited) {
+            return i;
+        }
+    }
+    return -1;
+}
+function placeIndicatorAtBoundary(context, groups, groupIndex, group, seenIndex) {
+    const isLastItemInGroup = seenIndex === group.items.length - 1;
+    const isLastGroup = groupIndex === groups.length - 1;
+    // Newest seen item is the very last item overall → everything is
+    // seen, nothing to mark.
+    if (isLastItemInGroup && isLastGroup) {
+        return context;
+    }
+    // Seen item is last in its group → boundary is between groups.
+    // Place the indicator at top level so reversal stays a pure
+    // two-level reverse.
+    if (isLastItemInGroup) {
+        return Object.assign(Object.assign({}, context), { processedItems: [
+                ...groups.slice(0, groupIndex + 1),
+                { type: 'newItemIndicator' },
+                ...groups.slice(groupIndex + 1),
+            ] });
+    }
+    // Boundary falls inside a single day — indicator stays nested.
+    const newGroupItems = [
+        ...group.items.slice(0, seenIndex + 1),
+        { type: 'newItemIndicator' },
+        ...group.items.slice(seenIndex + 1),
+    ];
+    return Object.assign(Object.assign({}, context), { processedItems: [
+            ...groups.slice(0, groupIndex),
+            Object.assign(Object.assign({}, group), { items: newGroupItems }),
+            ...groups.slice(groupIndex + 1),
+        ] });
+}
 /**
  *
  * @param context
  */
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function insertDateGroups(context) {
     const newProcessedItems = [];
     let currentGroup = null;
     let lastProcessedDate = null;
     for (const item of context.processedItems) {
-        if (item.type === 'chat' || item.type === 'iconList') {
-            const currentTimestamp = new Date(item.item.timestamp);
-            const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
-            if (currentDate !== lastProcessedDate) {
-                if (currentGroup) {
-                    newProcessedItems.push(currentGroup);
-                }
-                currentGroup = {
-                    type: 'group',
-                    groupType: 'dateGroup',
-                    heading: currentDate,
-                    items: [],
-                };
-                lastProcessedDate = currentDate;
-            }
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
+        if (item.type !== 'chat' && item.type !== 'iconList') {
+            continue;
         }
-        else if (item.type === 'newItemIndicator') {
+        const currentDate = context.dateTimeFormatter.format(new Date(item.item.timestamp), 'date');
+        if (currentDate !== lastProcessedDate) {
             if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-            else {
-                newProcessedItems.push(item);
+                newProcessedItems.push(currentGroup);
             }
+            currentGroup = {
+                type: 'group',
+                groupType: 'dateGroup',
+                heading: currentDate,
+                items: [item],
+            };
+            lastProcessedDate = currentDate;
+            continue;
         }
+        currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.items.push(item);
     }
     if (currentGroup) {
         newProcessedItems.push(currentGroup);
@@ -129,14 +195,153 @@ function insertDateGroups(context) {
     return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
 }
 
-const chatListCss = () => `@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list[order=oldest-on-top]){flex-direction:column-reverse}:host(limebb-chat-list[order=newest-on-top]){flex-direction:column}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;top:0;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}`;
+// "Near enough the newest edge to count as sticky." 50px is roughly
+// two message-bubble margins; a user who is within that distance
+// clearly wasn't scrolling back through history, so we treat their
+// position as "stuck to newest" and re-pin on each items update.
+const NEAR_NEWEST_THRESHOLD_PX = 50;
+/**
+ * Keeps a scroll container stuck to its "newest" edge as items are
+ * appended, so long as the user hasn't scrolled away.
+ *
+ * We use imperative scrolling rather than `flex-direction: column-reverse`
+ * so DOM order matches visual order (copy/paste, screen readers, tab
+ * order all align with what the user sees). CSS `overflow-anchor: auto`
+ * — the default and left enabled here — solves a different problem:
+ * preserving scroll position when content is inserted *above* the
+ * viewport. It doesn't stick the scroll to the newest edge when items
+ * arrive below the viewport, which is what chat typically needs; that
+ * requires the imperative approach in this class.
+ *
+ * Lifecycle:
+ * - `beforeRender()` in `componentWillRender` — snapshot whether the
+ *   user is near the newest edge, using the order the scroll position
+ *   was last measured against. Capturing here (synchronously, before
+ *   the new DOM lands) avoids the race a scroll-event listener would
+ *   have with `componentDidRender`.
+ * - `afterRender()` in `componentDidRender` — if the snapshot said
+ *   "near newest", re-pin to the newest edge (new `scrollHeight`).
+ * - `repinIfSticky()` for out-of-band re-pins (e.g. after the typing
+ *   indicator's height transition finishes — its `scrollHeight`
+ *   change lands after `componentDidRender`).
+ *
+ * Scroll-container contract: the passed element must itself be the
+ * scrolling ancestor (the element whose `scrollTop` / `scrollHeight`
+ * / `clientHeight` reflect the chat list's scroll state). In practice
+ * that is the component's host, which sets `overflow: hidden auto` on
+ * itself. If future refactors introduce an inner scrolling wrapper,
+ * pass that wrapper instead.
+ */
+class ScrollAnchor {
+    constructor(scrollContainer, getOrder, initialOrder) {
+        this.scrollContainer = scrollContainer;
+        this.getOrder = getOrder;
+        this.isSticky = true;
+        this.paintedOrder = initialOrder;
+    }
+    beforeRender() {
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        // Measure against the order the scroll position was last painted
+        // with. If `order` just changed, the scroll position still refers
+        // to the previous layout until this render commits.
+        this.isSticky =
+            this.distanceFromNewestEdge(this.paintedOrder) <
+                NEAR_NEWEST_THRESHOLD_PX;
+    }
+    afterRender() {
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        this.paintedOrder = this.getOrder();
+        if (this.isSticky) {
+            this.scrollToNewest();
+        }
+    }
+    repinIfSticky() {
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        if (this.isSticky) {
+            this.scrollToNewest();
+        }
+    }
+    scrollToNewest() {
+        const target = this.getOrder() === 'oldest-on-top'
+            ? this.scrollContainer.scrollHeight
+            : 0;
+        // Reading `scrollTop` is a cheap (already-measured) lookup, and
+        // short-circuiting avoids forcing a layout when we'd write the
+        // same value — important under high-frequency re-renders
+        // (streaming AI output).
+        if (this.scrollContainer.scrollTop === target) {
+            return;
+        }
+        this.scrollContainer.scrollTop = target;
+    }
+    distanceFromNewestEdge(order) {
+        return order === 'oldest-on-top'
+            ? this.scrollContainer.scrollHeight -
+                this.scrollContainer.scrollTop -
+                this.scrollContainer.clientHeight
+            : this.scrollContainer.scrollTop;
+    }
+}
+
+// The CSS property the typing-indicator container transitions.
+// Mirrored from chat-list.scss `.typing-indicator-height-animation
+// { transition: grid-template-rows ... }`. The runtime verifier below
+// guards against the SCSS and the handler-side filter silently
+// disagreeing.
+const HEIGHT_ANIMATION_PROPERTY = 'grid-template-rows';
+/**
+ * Returns a `transitionend` listener for the typing indicator's
+ * height transition. Filters by property name so unrelated
+ * transitions on the same element (e.g. opacity) don't trigger the
+ * callback.
+ * @param onHeightTransitionEnd
+ */
+function createHeightTransitionEndHandler(onHeightTransitionEnd) {
+    return (event) => {
+        if (event.propertyName !== HEIGHT_ANIMATION_PROPERTY) {
+            return;
+        }
+        onHeightTransitionEnd();
+    };
+}
+/**
+ * Verifies that the passed element actually transitions on the
+ * property the height-transition handler filters on. Surfaces SCSS
+ * drift loudly instead of silently breaking auto-scroll-on-indicator-
+ * appearance.
+ * @param element
+ */
+function verifyHeightAnimationProperty(element) {
+    if (!element) {
+        return;
+    }
+    const transitionProperty = globalThis.getComputedStyle(element).transitionProperty;
+    if (!transitionProperty) {
+        return;
+    }
+    const properties = new Set(transitionProperty.split(',').map((p) => p.trim()));
+    if (!properties.has('all') && !properties.has(HEIGHT_ANIMATION_PROPERTY)) {
+        console.warn(`[limebb-chat-list] Typing indicator is transitioning \`${transitionProperty}\` instead of \`${HEIGHT_ANIMATION_PROPERTY}\`. The auto-scroll on indicator appearance will not fire. Update the CSS or the handler so they match.`);
+    }
+}
+
+const chatListCss = () => `@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:rgb(var(--contrast-100))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[order=oldest-on-top]) .typing-indicator-height-animation{bottom:0}:host(limebb-chat-list[order=newest-on-top]) .typing-indicator-height-animation{top:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:last-of-type limebb-chat-item:last-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}`;
 
 const ChatList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
          * List of items to display in the feed.
-         * These items must be sorted by their `timestamp` in descending order.
+         * These items must be sorted by their `timestamp` in ascending order
+         * (oldest first, newest last). This matches the natural visual order
+         * for the default `oldest-on-top` layout, keeping DOM order aligned
+         * with visual order for copy/paste, screen readers, and tab order.
          *
          * See the [ChatListItem](#/type/ChatListItem/) type for the kinds of
          * items that can appear in the list.
@@ -150,29 +355,56 @@ const ChatList = class {
          *
          * :::important
          * Using this prop will _not_ automatically sort the chat items for you!
-         * You still need to pass the items in the correct order (descending order by timestamp).
-         * This prop will only affect the direction of the elements in the user interface,
+         * You still need to pass the items in the correct order (ascending order by timestamp — oldest first).
+         * This prop only affects the direction of the elements in the user interface,
          * such as the location of the typing indicator or the scrollbars.
          * :::
          */
         this.order = 'oldest-on-top';
         this.processedItems = [];
+        this.handleHeightTransitionEnd = createHeightTransitionEndHandler(() => { var _a; return (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.repinIfSticky(); });
     }
     handleItemsChange() {
         let lastVisited = null;
         if (this.lastVisitedTimestamp) {
             lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
         }
-        this.processedItems = processChatItems(this.items, this.dateTimeFormatter, lastVisited);
+        const processed = processChatItems(this.items, this.dateTimeFormatter, lastVisited);
+        this.processedItems =
+            this.order === 'newest-on-top'
+                ? reverseProcessedItems(processed)
+                : processed;
     }
     componentWillLoad() {
         this.handleItemsChange();
+        this.scrollAnchor = new ScrollAnchor(this.host, () => this.order, this.order);
+    }
+    componentDidLoad() {
+        var _a;
+        verifyHeightAnimationProperty((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.typing-indicator-height-animation'));
+    }
+    componentWillRender() {
+        if (this.items.length === 0) {
+            // Nothing to measure or scroll against. `isSticky` retains
+            // its last value (default `true`), so the first non-empty
+            // render still pins correctly.
+            return;
+        }
+        this.scrollAnchor.beforeRender();
+    }
+    componentDidRender() {
+        if (this.items.length === 0) {
+            return;
+        }
+        this.scrollAnchor.afterRender();
     }
     render() {
-        return (index.h(index.Host, { key: 'b042ac219b98d38deb63cd862fc6aeb565bf3064', class: {
+        return (index.h(index.Host, { key: '002369dc1f47978696b4eb8ac7189f794568b0b4', class: {
                 'is-empty': this.items.length === 0 &&
                     !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), index.h("div", { key: 'dd245b7fced3824abbc97671204310f51f0ba603', class: "typing-indicator-height-animation" }, index.h("div", { key: 'da9f1fdb805cda959b707598694070ce8b765965' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), this.order === 'newest-on-top' &&
+            this.renderTypingIndicatorBlock(), this.renderChatItems(), this.order === 'oldest-on-top' &&
+            this.renderTypingIndicatorBlock()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -180,6 +412,14 @@ const ChatList = class {
         }
         return index.h("limel-spinner", null);
     }
+    renderTypingIndicatorBlock() {
+        // The indicator's grid-template-rows transition grows the
+        // container over ~0.46s. `componentDidRender` fires before the
+        // transition starts, so `scrollHeight` at that moment doesn't
+        // include the final height. `handleHeightTransitionEnd` re-pins
+        // once the transition lands.
+        return (index.h("div", { class: "typing-indicator-height-animation", onTransitionEnd: this.handleHeightTransitionEnd }, index.h("div", null, this.renderTypingIndicator())));
+    }
     renderTypingIndicator() {
         if (!this.isTypingIndicatorVisible) {
             return;
@@ -195,33 +435,54 @@ const ChatList = class {
                 case 'newItemIndicator': {
                     return this.renderIndicator();
                 }
-                default: {
+                case 'chat':
+                case 'iconList': {
+                    // `insertDateGroups` wraps every `chat` / `iconList`
+                    // in a `group`, so these variants shouldn't appear
+                    // at top level. If the processor pipeline is ever
+                    // reordered, render nothing rather than double-
+                    // render once the wrapping group includes them.
                     return null;
                 }
+                default: {
+                    return assertNever(item);
+                }
             }
         });
     }
     renderGroup(group) {
         const chatItems = group.items.map((item) => {
-            if (item.type === 'chat') {
-                return this.renderChatItem(item.item);
-            }
-            else if (item.type === 'iconList') {
-                return this.renderIconList(item.item);
-            }
-            else if (item.type === 'newItemIndicator') {
-                return this.renderIndicator();
+            switch (item.type) {
+                case 'chat': {
+                    return this.renderChatItem(item.item);
+                }
+                case 'iconList': {
+                    return this.renderIconList(item.item);
+                }
+                case 'newItemIndicator': {
+                    return this.renderIndicator();
+                }
+                case 'group': {
+                    // Date groups don't nest. A compile-time `never`
+                    // here would require a separate nested-item type;
+                    // this runtime null return is the pragmatic
+                    // middle ground.
+                    return null;
+                }
+                default: {
+                    return assertNever(item);
+                }
             }
         });
-        const groupChatItems = group.items.filter((i) => i.type === 'chat');
-        const lastChatItem = groupChatItems.at(-1);
-        const stableId = (lastChatItem === null || lastChatItem === void 0 ? void 0 : lastChatItem.type) === 'chat' ? lastChatItem.item.id : '';
-        const sectionKey = 'date-group-' + group.heading + '-' + stableId;
+        // Key the section by the group's heading (unique per date, and
+        // stable across item additions). Must not vary with group
+        // content: if it did, appending a new message would change the
+        // key and cause Stencil to remount the whole section, briefly
+        // collapsing scrollHeight and scrolling the list to the top
+        // before `componentDidRender` scrolls it back.
+        const sectionKey = 'date-group-' + group.heading;
         const headingId = `heading-${sectionKey}`.replaceAll(/[^a-zA-Z0-9_-]/g, '_');
         const dateHeading = (index.h("a", { id: headingId, class: "date-heading", role: "heading", "aria-level": 2 }, group.heading));
-        if (this.order === 'oldest-on-top') {
-            return (index.h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, chatItems, dateHeading));
-        }
         return (index.h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, dateHeading, chatItems));
     }
     renderChatItem(item) {
@@ -242,9 +503,13 @@ const ChatList = class {
     get translator() {
         return this.platform.get(index_esm.n.Translate);
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "items": [{
                 "handleItemsChange": 0
+            }],
+        "order": [{
+                "handleItemsChange": 0
             }]
     }; }
 };
@@ -254,6 +519,9 @@ function parseToUTCDate(date) {
     }
     return new Date(date); // This will automatically be UTC
 }
+function assertNever(value) {
+    throw new Error(`Unexpected value in exhaustive switch: ${JSON.stringify(value)}`);
+}
 ChatList.style = chatListCss();
 
 exports.limebb_chat_list = ChatList;

package/dist/cjs/limebb-composer-toolbar.cjs.entry.js

@@ -66,8 +66,8 @@ const ComposerToolbar = class {
     }
     render() {
         return [
-            index.h("div", { key: '62fa9154e6593b46509a4b4185c425c416fbf1de', class: "actions" }, index.h("slot", { key: '97476b607eb583b8c26e0164836174b9aeb8faa9', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), index.h("slot", { key: '14c2388e0cb0d1ec2a1cd548d11994475da5e949', name: "trailing" })),
-            index.h("slot", { key: 'bc290147db27a9a6454cb32031bfe0990fe59e77', name: "primary-action" }),
+            index.h("div", { key: '6034b2945edfd9b613f606f8bb4fb0db81c1390f', class: "actions" }, index.h("slot", { key: '82b9bc14d80aedd3320af70bc63d3a908db6a7b2', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), index.h("slot", { key: '338fc1b7c7ec3f7dfedb123b7e09dd05f75fc45c', name: "trailing" })),
+            index.h("slot", { key: '57b277b772cbaf702e619ecbd6ff9032718b87b7', name: "primary-action" }),
         ];
     }
     get translator() {

package/dist/cjs/limebb-currency-picker.cjs.entry.js

@@ -1970,7 +1970,7 @@ const CurrencyPicker = class {
         };
     }
     render() {
-        return (index.h("limel-picker", { key: '75278107cede6773fb098f52183b8c3d291d12fe', label: this.label || this.defaultLabel, value: this.createListItem(this.value), helperText: this.helperText, onChange: this.handleChange, badgeIcons: false, disabled: this.disabled, required: this.required, readonly: this.readonly, invalid: this.readonly, searcher: this.search }));
+        return (index.h("limel-picker", { key: '12d166b930a2864eefbb16c4d66706dd02b54112', label: this.label || this.defaultLabel, value: this.createListItem(this.value), helperText: this.helperText, onChange: this.handleChange, badgeIcons: false, disabled: this.disabled, required: this.required, readonly: this.readonly, invalid: this.readonly, searcher: this.search }));
     }
     getCurrencyName(code) {
         var _a;

package/dist/cjs/limebb-dashboard-widget.cjs.entry.js

@@ -18,7 +18,7 @@ const DashboardComponent = class {
         };
     }
     render() {
-        return [this.renderHeader(), index.h("slot", { key: '3c5a1725b0cf3887074d0be4b1b7086126447d3b', name: "content" })];
+        return [this.renderHeader(), index.h("slot", { key: 'f5202c8c5d6ceb3e01420c6045ecb5589fed915a', name: "content" })];
     }
 };
 DashboardComponent.style = dashboardWidgetCss();

package/dist/cjs/limebb-data-cells.cjs.entry.js

@@ -2,6 +2,7 @@
 
 var index = require('./index-C_OnxXhP.js');
 var index_esm = require('./index.esm-DhBVH875.js');
+var randomString = require('./random-string-BdZGIsGg.js');
 
 const SECOND = 1000;
 const MINUTE = 60 * SECOND;
@@ -100,7 +101,11 @@ const DataCells = class {
             if (Number.isNaN(date.getTime())) {
                 return item.value;
             }
-            return formatRelativeDate(date, this.language);
+            const id = randomString.createRandomString();
+            return [
+                index.h("span", { id: id }, formatRelativeDate(date, this.language)),
+                index.h("limel-tooltip", { elementId: id, label: this.formatAbsoluteDate(date, item.type) }),
+            ];
         }
         if (item.type === 'percent') {
             return (index.h("limebb-percentage-visualizer", { value: Number(item.value), multiplier: 100, displayPercentageColors: true, reducePresence: false }));
@@ -148,6 +153,22 @@ const DataCells = class {
             return navigator.language;
         }
     }
+    formatAbsoluteDate(date, type) {
+        var _a;
+        try {
+            const formatter = (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(index_esm.n.DateTimeFormatter);
+            if (formatter) {
+                return formatter.format(date, type);
+            }
+        }
+        catch (_b) {
+            // Fall through to default formatting.
+        }
+        return date.toLocaleString(this.language, {
+            dateStyle: 'long',
+            timeStyle: type === 'time' ? 'short' : undefined,
+        });
+    }
 };
 DataCells.style = dataCellsCss();
 

package/dist/cjs/limebb-date-picker.cjs.entry.js

@@ -75,7 +75,7 @@ const DatePicker = class {
         if (this.value) {
             this.shouldEmitValueAsString = typeof this.value === 'string';
         }
-        return (index.h("limel-date-picker", { key: 'd3f3229f134e51ae94abbdb63da0e88988eaa474', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
+        return (index.h("limel-date-picker", { key: 'f3276cfc57128c566248a97e5fea9a3dcc107888', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
     }
     parseDateValue() {
         const value = this.value;

package/dist/cjs/limebb-date-range.cjs.entry.js

@@ -23,7 +23,7 @@ const DateRange = class {
         this.originalEndTime = this.endTime;
     }
     render() {
-        return (index.h("div", { key: '0eab8abe9007384af9e7fcd56f8ac37c4aeb6b39', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+        return (index.h("div", { key: 'e00abfd31fcae2a4279ae2194696b5cffb76dd79', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
     }
     renderStartDatePicker() {
         if (!this.originalStartTime) {

package/dist/cjs/limebb-document-chips.cjs.entry.js

@@ -347,7 +347,7 @@ const DocumentChips = class {
         this.revokeAllBlobUrls();
     }
     render() {
-        return (index.h(index.Host, { key: 'd5bdfcc1c2895820c4613bf907799063e1118899', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
+        return (index.h(index.Host, { key: '93d00770917014b1de6e380db6b102859210fded', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
     }
     renderFile(file) {
         const isReady = !file.uploadState || file.uploadState === 'done';