@nyaruka/temba-components 0.167.0 → 0.168.0

package/src/display/Chat.ts

@@ -4,10 +4,11 @@ import { repeat } from 'lit/directives/repeat.js';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { TicketEvent } from '../events';
+import { renderEventSummary } from '../events/eventRenderers';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 import { attachmentAsString } from '../utils';
+import { DateTime } from 'luxon';
 
-const BATCH_TIME_WINDOW = 60 * 60 * 1000;
 const SCROLL_FETCH_BUFFER = 200; // pixels from top
 const MIN_FETCH_TIME = 250;
 
@@ -141,6 +142,45 @@ const getTypingKey = (event: TypingEvent): string => {
   return event._user?.uuid || 'contact';
 };
 
+// event types whose inline rendering is a self-contained pill (see
+// eventRenderers.ts) — consecutive runs of these condense onto a
+// single wrapping line instead of one per line. Diagnostics
+// (error/warning/failure) and note bubbles stay on their own lines.
+const CONDENSED_EVENT_TYPES = new Set([
+  'airtime_created',
+  'airtime_transferred',
+  'broadcast_created',
+  'call_created',
+  'call_missed',
+  'call_received',
+  'chat_started',
+  'contact_field_changed',
+  'contact_groups_changed',
+  'contact_language_changed',
+  'contact_name_changed',
+  'contact_status_changed',
+  'contact_urns_changed',
+  'email_created',
+  'email_sent',
+  'flow_entered',
+  'input_labels_added',
+  'optin_requested',
+  'optin_started',
+  'optin_stopped',
+  'resthook_called',
+  'run_ended',
+  'run_result_changed',
+  'run_started',
+  'service_called',
+  'session_triggered',
+  'ticket_assignee_changed',
+  'ticket_closed',
+  'ticket_opened',
+  'ticket_reopened',
+  'ticket_topic_changed',
+  'webhook_called'
+]);
+
 // whether a message has nothing to show in its bubble (and isn't deleted)
 const isEmptyMsg = (event: MsgEvent): boolean =>
   !event._deleted &&
@@ -148,23 +188,34 @@ const isEmptyMsg = (event: MsgEvent): boolean =>
   !event.msg.text &&
   (event.msg.attachments || []).length === 0;
 
-const TIME_FORMAT = { hour: 'numeric', minute: '2-digit' } as any;
-const VERBOSE_FORMAT = {
-  weekday: undefined,
-  year: undefined,
-  month: 'short',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit'
-} as any;
-const VERBOSE_FORMAT_WITH_YEAR = {
-  weekday: undefined,
-  year: 'numeric',
-  month: 'short',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: '2-digit'
-} as any;
+// local-time calendar day, used to bucket messages into day sections
+const getDayKey = (date: Date): string =>
+  `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+
+/**
+ * Human label for a day section: Today, Yesterday, "Jun 22" within
+ * the current year, and a full "9/1/2025" for anything older.
+ * "Now" comes from luxon so it honors the same clock the rest of the
+ * date rendering uses (and its test stubs).
+ */
+const getDayLabel = (date: Date): string => {
+  const today = DateTime.now().toJSDate();
+  if (getDayKey(date) === getDayKey(today)) {
+    return 'Today';
+  }
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+  if (getDayKey(date) === getDayKey(yesterday)) {
+    return 'Yesterday';
+  }
+  if (date.getFullYear() === today.getFullYear()) {
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric'
+    });
+  }
+  return date.toLocaleDateString();
+};
 
 export class Chat extends RapidElement {
   static get styles() {
@@ -223,29 +274,44 @@ export class Chat extends RapidElement {
         line-height: 0;
       }
 
-      .time {
-        text-align: center;
-        font-size: 0.8em;
-        color: #999;
-        margin-bottom: 2em;
-        margin-top: 1em;
-        border-top: 1px solid #e9e9e9;
-        padding: 1em;
-        margin-left: 10%;
-        margin-right: 10%;
+      /* Each calendar day of history renders as its own section. The
+         section itself is normal top-down flow (its contents are
+         ordered oldest-first at render time) — position: sticky
+         misbehaves inside column-reverse, so only the scroller
+         reverses. */
+      .day-section {
+        display: flex;
+        flex-direction: column;
       }
 
-      .time.first {
-        border-top: none;
-        margin-top: 0;
-        border-bottom: 1px solid #e9e9e9;
-        margin-bottom: 2em;
+      /* The day marker pins to the top of the chat window while its
+         day's messages scroll underneath — position: sticky keeps it
+         floating until the section ends, at which point the next
+         day's marker takes over. pointer-events pass through so the
+         chip never blocks interaction with messages behind it. */
+      .day-marker {
+        position: sticky;
+        top: 0;
+        z-index: 3;
+        display: flex;
+        justify-content: center;
+        padding: 0.25em 0 0.75em;
+        pointer-events: none;
       }
 
-      .first .time {
-        margin-top: 0;
-        border-top: none;
-        padding-top: 0;
+      /* Translucent chip so messages read through it while it floats
+         over them mid-scroll. */
+      .day-marker .day {
+        font-size: 0.7em;
+        font-weight: 500;
+        letter-spacing: 0.03em;
+        color: #71767d;
+        background: rgba(255, 255, 255, 0.85);
+        backdrop-filter: blur(6px);
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        border-radius: 999px;
+        padding: 3px 12px;
+        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
       }
 
       .group-reason {
@@ -271,6 +337,142 @@ export class Chat extends RapidElement {
         margin-right: 4px !important;
       }
 
+      /* An expanded run of self-contained pill events (field changes,
+         group changes, etc. — see CONDENSED_EVENT_TYPES): a collapse
+         rail down the left, then the pills flowing as a wrapping,
+         centered row. Extra specificity keeps the .incoming .row
+         row-reverse rule below from flipping the rail to the right. */
+      .group-messages .row.condensed-events {
+        flex-direction: row;
+      }
+
+      /* Expanding animates via the grid 0fr -> 1fr technique so the
+         run grows smoothly from the summary's height without any
+         measured heights; collapsing plays the same animation in
+         reverse (forwards) while the run is in the .collapsing state,
+         then the render swaps in the summary pill. */
+      .condensed-events .reveal {
+        flex-grow: 1;
+        min-width: 0;
+        display: grid;
+        grid-template-rows: 1fr;
+        animation: reveal-expand 200ms ease;
+        /* floor both animations at the summary pill's height so the
+           swap between summary and run happens with no net height
+           change — without this the run shrinks to zero and the
+           summary pops back up, reading as a false bounce */
+        min-height: 24px;
+      }
+
+      .condensed-events.collapsing .reveal {
+        animation: reveal-collapse 180ms ease forwards;
+        pointer-events: none;
+      }
+
+      .condensed-events .reveal-inner {
+        overflow: hidden;
+        min-width: 0;
+      }
+
+      .condensed-events .run {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: 4px;
+      }
+
+      @keyframes reveal-expand {
+        from {
+          grid-template-rows: 0fr;
+          opacity: 0;
+        }
+        to {
+          grid-template-rows: 1fr;
+          opacity: 1;
+        }
+      }
+
+      @keyframes reveal-collapse {
+        from {
+          grid-template-rows: 1fr;
+          opacity: 1;
+        }
+        to {
+          grid-template-rows: 0fr;
+          opacity: 0;
+        }
+      }
+
+      /* the summary pill eases back in after a collapse (and on first
+         render — it's subtle enough to double as a gentle entrance) */
+      .row.summary-row {
+        animation: summary-in 150ms ease;
+      }
+
+      @keyframes summary-in {
+        from {
+          opacity: 0;
+          transform: translateY(2px);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .condensed-events .reveal,
+        .condensed-events.collapsing .reveal,
+        .row.summary-row {
+          animation: none;
+        }
+      }
+
+      .condensed-events .events {
+        flex-grow: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        column-gap: 4px;
+        row-gap: 2px;
+      }
+
+      .condensed-events .event {
+        flex-grow: 0;
+        max-width: 100%;
+      }
+
+      /* The rail is the collapse affordance: an icon button at the
+         top with a thin line running the height of the run. The whole
+         rail is clickable, quietly highlighting on hover. */
+      .collapse-rail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 3px;
+        padding: 1px 2px;
+        cursor: pointer;
+        --icon-color: #9aa1a9;
+      }
+
+      .collapse-rail .rail-line {
+        flex-grow: 1;
+        width: 2px;
+        border-radius: 2px;
+        background: #e4e7ea;
+      }
+
+      .collapse-rail:hover {
+        --icon-color: #6b7280;
+      }
+
+      .collapse-rail:hover .rail-line {
+        background: #c9cdd2;
+      }
+
       .input-panel {
         padding: 1em;
         background: #fff;
@@ -312,11 +514,24 @@ export class Chat extends RapidElement {
         margin-left: 1em;
       }
 
+      /* Bubble fills are soft top-lit gradients derived from the
+         same theme vars the flat fills used — color-mix keeps host
+         re-theming working — with a whisper of shadow for depth and
+         a hairline border mixed just darker than the fill so bubbles
+         hold their edge against the background. */
       .bubble {
         padding: 10px 14px;
-        background: var(--color-chat-in, #e5e5ea);
+        background: linear-gradient(
+          180deg,
+          color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
+          var(--color-chat-in, #e5e5ea) 100%
+        );
         border-radius: 18px;
-        border: var(--chat-border-in, none);
+        border: var(
+          --chat-border-in,
+          1px solid color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
+        );
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
       }
 
       .bubble .name {
@@ -335,8 +550,17 @@ export class Chat extends RapidElement {
       }
 
       .incoming .bubble {
-        background: var(--color-chat-out, #007aff);
-        border: var(--chat-border-out, none);
+        background: linear-gradient(
+          180deg,
+          color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
+          var(--color-chat-out, #007aff) 58%,
+          color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
+        );
+        border: var(
+          --chat-border-out,
+          1px solid
+            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
+        );
         color: white;
       }
 
@@ -348,8 +572,14 @@ export class Chat extends RapidElement {
         color: rgba(255, 255, 255, 0.7);
       }
 
+      /* Notes get the same top-lit gradient treatment as message
+         bubbles, derived from their sticky-note yellow. */
       .note .bubble {
-        background: #fffac3;
+        background: linear-gradient(
+          180deg,
+          color-mix(in srgb, #fffac3 62%, white) 0%,
+          #fffac3 100%
+        );
         border: 1px solid #e8d169;
         color: #5d4e1e;
       }
@@ -358,12 +588,6 @@ export class Chat extends RapidElement {
         color: rgba(93, 78, 30, 0.65);
       }
 
-      .note-time {
-        margin-top: 0.35em;
-        font-size: 0.9em;
-        color: rgba(93, 78, 30, 0.65);
-      }
-
       .warning .bubble {
         background: #fef3c7;
         color: rgba(125, 87, 18, 0.8);
@@ -761,35 +985,82 @@ export class Chat extends RapidElement {
 
       .popup {
         display: flex;
+        align-items: center;
         position: absolute;
         background: #fff;
         margin: 0;
-        padding: 0.5em 1em;
+        /* same treatment as the metadata line in the event tooltips */
+        font-size: 11px;
+        padding: 6px 10px;
         border-radius: var(--curvature);
         box-shadow:
           rgba(0, 0, 0, 0.05) 0px 3px 7px 0px,
           rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
         border: 1px solid #f3f3f3;
         opacity: 0;
+        visibility: hidden;
+        /* sit a small gap above the bubble regardless of popup height
+           so the arrow bridges it, matching the event tooltips — the
+           hoverable linger makes the gap crossable */
+        bottom: calc(100% + 6px);
+        transform: translateY(6px);
         z-index: 2;
+        /* linger briefly on unhover so the mouse can travel into the
+           popup to select or click its contents, then slide back down
+           while fading; visibility flips once the fade finishes and
+           keeps the hidden popup from swallowing mouse events over
+           the bubble */
+        transition:
+          opacity 120ms cubic-bezier(0.2, 0, 0, 1) 300ms,
+          transform 120ms cubic-bezier(0.2, 0, 0, 1) 300ms,
+          visibility 0s linear 420ms;
+      }
+
+      .popup .log-link {
+        margin-left: 1em;
+        color: #999;
+      }
+
+      .popup .log-link:hover {
+        color: var(--color-primary-dark);
       }
 
       .popup .arrow {
         z-index: 1;
-        text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
         position: absolute;
-        justify-content: center;
-        text-align: center;
-        font-size: 1.3em;
-        transform: translateY(0.7em) scale(1);
-        color: #fff;
-        bottom: 0;
+        bottom: -9px;
+        width: 16px;
+        height: 11px;
+        /* the shadow is on this wrapper rather than the clipped
+           shape below so it hugs the triangle's slanted edges */
+        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
+      }
+
+      /* a CSS-drawn tail rather than a ▼ glyph — glyph ink lands
+         wherever the platform font puts it, so the tip rendered
+         hidden on some systems and overshot on others. This triangle
+         is deterministic: its top 2px lie on the popup body hiding
+         the border where the tail meets it, the rest bridges the gap
+         below so the tip visibly laps over the top of the bubble */
+      .popup .arrow::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: #fff;
+        clip-path: polygon(0 0, 100% 0, 50% 100%);
       }
 
       .bubble-wrap:hover .popup {
         opacity: 1;
-        transition-delay: 1s;
-        top: -35px;
+        visibility: visible;
+        transform: translateY(0);
+        /* same 350ms hover-intent delay as the event pill tips, then
+           slide up into position */
+        transition:
+          opacity 120ms cubic-bezier(0.2, 0, 0, 1) 350ms,
+          transform 120ms cubic-bezier(0.2, 0, 0, 1) 350ms,
+          visibility 0s linear 350ms;
       }
 
       .new-message-notification {
@@ -911,6 +1182,17 @@ export class Chat extends RapidElement {
   highlightMessageUuid: string = null;
 
   private msgMap = new Map<string, ContactEvent>();
+
+  // runs of informational events collapse behind a summary pill —
+  // this tracks which runs the user has expanded as a set of event
+  // ids (a run is expanded if any of its events is present). keying
+  // on membership rather than the run's first id keeps expansion
+  // stable when pagination prepends older events into the run
+  private expandedEventChunks = new Set<string>();
+
+  // runs mid-collapse: they keep rendering expanded (with the closing
+  // animation) until the animation finishes, then swap to the summary
+  private collapsingEventChunks = new Set<string>();
   private metadataCache = new Map<string, ContactEvent>();
 
   // ephemeral typing indicators by author key - they live in msgMap and
@@ -979,6 +1261,12 @@ export class Chat extends RapidElement {
         }
 
         if (newMessages.length === 0) {
+          // nothing rendered (a metadata-only or duplicate page) —
+          // still settle the fetch and keep the chain going, since an
+          // unscrollable view has no other way to ask for the rest of
+          // history
+          this.fireCustomEvent(CustomEventType.FetchComplete);
+          this.requestMoreIfUnscrollable();
           return;
         }
 
@@ -1036,6 +1324,7 @@ export class Chat extends RapidElement {
           this.hideBottomScroll = absScrollTop <= 1;
 
           this.fireCustomEvent(CustomEventType.FetchComplete);
+          this.requestMoreIfUnscrollable();
         }, 100);
       },
       // if it's the first load don't wait, otherwise wait a minimum amount of time
@@ -1191,8 +1480,7 @@ export class Chat extends RapidElement {
 
   private isSameGroup(
     msg1: ContactEvent,
-    msg2: ContactEvent,
-    lastTimeElapsedDate?: Date
+    msg2: ContactEvent
   ): { same: boolean; reason?: GroupReason } {
     if (!msg1 || !msg2) {
       return { same: true };
@@ -1215,14 +1503,12 @@ export class Chat extends RapidElement {
       type2 === 'ticket_note_added';
     const typeMatch = isMsg1 && isMsg2 ? type1 === type2 : isMsg1 === isMsg2;
 
-    // check time first - if BATCH_TIME_WINDOW has passed since last time_elapsed reason
-    // compare the current message (msg1) against the last break point to detect
-    // when messages have drifted far enough to warrant a new time group
-    const timeToCheck = lastTimeElapsedDate || msg2.created_on;
-    if (
-      Math.abs(msg1.created_on.getTime() - timeToCheck.getTime()) >=
-      BATCH_TIME_WINDOW
-    ) {
+    // the only time boundary is the calendar day (the chat renders
+    // day sections with sticky markers, so groups must align to
+    // days) — within a day, hours apart doesn't split a group, so
+    // e.g. a run expiry and a campaign start hours later still
+    // condense with the events between them
+    if (getDayKey(msg1.created_on) !== getDayKey(msg2.created_on)) {
       return { same: false, reason: 'time_elapsed' };
     }
 
@@ -1290,11 +1576,10 @@ export class Chat extends RapidElement {
     const groups: MessageGroup[] = [];
     let lastGroup: MessageGroup = null;
     let lastMsg: ContactEvent = null;
-    let lastTimeElapsedDate: Date = null;
 
     for (const msgId of msgIds) {
       const msg = this.msgMap.get(msgId);
-      const groupCheck = this.isSameGroup(msg, lastMsg, lastTimeElapsedDate);
+      const groupCheck = this.isSameGroup(msg, lastMsg);
 
       if (!groupCheck.same || !lastGroup) {
         lastGroup = {
@@ -1302,11 +1587,6 @@ export class Chat extends RapidElement {
           reason: groupCheck.reason || 'initial'
         };
         groups.push(lastGroup);
-
-        // track when we last broke for time_elapsed
-        if (groupCheck.reason === 'time_elapsed') {
-          lastTimeElapsedDate = msg.created_on;
-        }
       }
 
       lastGroup.messages.push(msgId);
@@ -1315,6 +1595,22 @@ export class Chat extends RapidElement {
     return groups;
   }
 
+  /**
+   * Older history is fetched from scroll position, but a fetched page
+   * can render shorter than the viewport (condensed event runs
+   * collapse a whole page into a line or two), leaving nothing to
+   * scroll and no way to request more. After content settles, keep
+   * asking for history until the view can meaningfully scroll — the
+   * host's own guards (in-flight fetch, end of history) stop the
+   * chain.
+   */
+  private requestMoreIfUnscrollable() {
+    const ele = this.shadowRoot.querySelector('.scroll');
+    if (ele && ele.scrollHeight - ele.clientHeight <= SCROLL_FETCH_BUFFER) {
+      this.fireCustomEvent(CustomEventType.ScrollThreshold);
+    }
+  }
+
   private handleScroll(event: any) {
     const ele = event.target;
     const scrollableHeight = ele.scrollHeight - ele.clientHeight;
@@ -1422,12 +1718,7 @@ export class Chat extends RapidElement {
     }
   }
 
-  private renderMessageGroup(
-    group: MessageGroup,
-    idx: number,
-    lastShownTimestamp: Date | null
-  ): { html: TemplateResult; timestamp: Date | null } {
-    const today = new Date();
+  private renderMessageGroup(group: MessageGroup): TemplateResult {
     const msgIds = group.messages;
 
     const mostRecentId = msgIds[msgIds.length - 1];
@@ -1482,78 +1773,131 @@ export class Chat extends RapidElement {
     const reasonLabel = this.getReasonLabel(group.reason);
     const showReason = false; // reasonLabel && idx > 0;
 
-    // determine if we should show a timestamp
-    // use the first message in the group (oldest) for the timestamp
-    const firstMsgId = msgIds[0];
-    const firstMsg = this.msgMap.get(firstMsgId);
-
-    // check if we should show a timestamp based on the last shown timestamp
-    let showTimeForReason = false;
-    let newLastShownTimestamp = lastShownTimestamp;
-
-    if (idx > 0) {
-      if (lastShownTimestamp) {
-        const timeSinceLastShown = Math.abs(
-          firstMsg.created_on.getTime() - lastShownTimestamp.getTime()
-        );
-        showTimeForReason = timeSinceLastShown >= BATCH_TIME_WINDOW;
+    // chunk the group into runs — consecutive condensable pill events
+    // share a single wrapping row, everything else renders one per row
+    const chunks: { condensed: boolean; ids: string[]; start: number }[] = [];
+    msgIds.forEach((msgId, index) => {
+      const msg = this.msgMap.get(msgId);
+      const condensed =
+        msg?._rendered?.type === MessageType.Inline &&
+        CONDENSED_EVENT_TYPES.has(msg.type);
+      const last = chunks[chunks.length - 1];
+      if (last && last.condensed && condensed) {
+        last.ids.push(msgId);
       } else {
-        showTimeForReason = group.reason === 'time_elapsed';
+        chunks.push({ condensed, ids: [msgId], start: index });
       }
-    }
-
-    let timeForReason = null;
-    if (showTimeForReason) {
-      newLastShownTimestamp = firstMsg.created_on;
-
-      const isDifferentYear =
-        today.getFullYear() !== firstMsg.created_on.getFullYear();
-      const format = isDifferentYear
-        ? VERBOSE_FORMAT_WITH_YEAR
-        : today.getDate() !== firstMsg.created_on.getDate()
-          ? VERBOSE_FORMAT
-          : TIME_FORMAT;
-
-      timeForReason = html`<div class="time time-elapsed">
-        ${firstMsg.created_on.toLocaleTimeString(undefined, format)}
-      </div>`;
-    }
+    });
 
     const resultHtml = html`
       <div class="block  ${incoming ? 'incoming' : 'outgoing'}">
         <div class="group-messages" style="flex-grow:1">
           ${repeat(
-            msgIds,
-            (msgId) => msgId,
-            (msgId, index) => {
-              const msg = this.msgMap.get(msgId);
-              const msgEvent = msg as MsgEvent;
-              const statusClass = (msg as any)._status
-                ? (msg as any)._status.status
-                : '';
-              const hasError =
-                msgEvent.msg?.unsendable_reason ||
-                (msgEvent._status?.reason &&
-                  (statusClass === 'failed' || statusClass === 'errored'));
-              const unsendableClass = hasError ? 'error' : '';
-              const deletedClass = msgEvent._deleted ? 'deleted' : '';
-              const emptyClass = isEmptyMsg(msgEvent) ? 'empty' : '';
-              const latestClass = index === msgIds.length - 1 ? 'latest' : '';
-              const eventClass = msg._rendered ? 'is-event' : '';
-              const noteClass = msg.type === 'ticket_note_added' ? 'note' : '';
-              const typingClass = msg.type === 'typing_started' ? 'typing' : '';
-              const matchClass =
-                this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
-              return html`<div
-                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${emptyClass} ${latestClass} ${eventClass} ${noteClass} ${typingClass} ${matchClass}"
-                data-uuid=${msg.uuid || nothing}
-              >
-                ${this.renderMessage(
-                  msg,
-                  index == 0 ? name : null,
-                  index === msgIds.length - 1
-                )}
-              </div>`;
+            chunks,
+            (chunk) => chunk.ids[0],
+            (chunk) => {
+              if (chunk.condensed) {
+                // condensable events collapse behind a single summary
+                // pill until expanded — even a run of one, so single
+                // events behave the same as longer runs
+                const expanded = chunk.ids.some((id) =>
+                  this.expandedEventChunks.has(id)
+                );
+                if (!expanded) {
+                  const events = chunk.ids.map((id) => this.msgMap.get(id));
+                  return html`<div class="row message is-event summary-row">
+                    <div class="event">
+                      ${renderEventSummary(events, () => {
+                        chunk.ids.forEach((id) =>
+                          this.expandedEventChunks.add(id)
+                        );
+                        this.requestUpdate();
+                      })}
+                    </div>
+                  </div>`;
+                }
+
+                // collapsing runs keep rendering expanded while the
+                // closing animation plays, then swap to the summary
+                const collapsing = chunk.ids.some((id) =>
+                  this.collapsingEventChunks.has(id)
+                );
+                return html`<div
+                  class="row message is-event condensed-events ${collapsing
+                    ? 'collapsing'
+                    : ''}"
+                >
+                  <div class="reveal">
+                    <div class="reveal-inner">
+                      <div class="run">
+                        <div
+                          class="collapse-rail"
+                          title="Collapse"
+                          @click=${() => {
+                            if (collapsing) {
+                              return;
+                            }
+                            chunk.ids.forEach((id) =>
+                              this.collapsingEventChunks.add(id)
+                            );
+                            this.requestUpdate();
+                            window.setTimeout(() => {
+                              chunk.ids.forEach((id) => {
+                                this.collapsingEventChunks.delete(id);
+                                this.expandedEventChunks.delete(id);
+                              });
+                              this.requestUpdate();
+                            }, 180);
+                          }}
+                        >
+                          <temba-icon name="up" size="0.85"></temba-icon>
+                          <div class="rail-line"></div>
+                        </div>
+                        <div class="events">
+                          ${chunk.ids.map((msgId) => {
+                            const msg = this.msgMap.get(msgId);
+                            return html`<div
+                              class="event"
+                              data-uuid=${msg.uuid || nothing}
+                            >
+                              ${msg._rendered.html}
+                            </div>`;
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>`;
+              }
+              return chunk.ids.map((msgId, chunkIndex) => {
+                const index = chunk.start + chunkIndex;
+                const msg = this.msgMap.get(msgId);
+                const msgEvent = msg as MsgEvent;
+                const statusClass = (msg as any)._status
+                  ? (msg as any)._status.status
+                  : '';
+                const hasError =
+                  msgEvent.msg?.unsendable_reason ||
+                  (msgEvent._status?.reason &&
+                    (statusClass === 'failed' || statusClass === 'errored'));
+                const unsendableClass = hasError ? 'error' : '';
+                const deletedClass = msgEvent._deleted ? 'deleted' : '';
+                const emptyClass = isEmptyMsg(msgEvent) ? 'empty' : '';
+                const latestClass = index === msgIds.length - 1 ? 'latest' : '';
+                const eventClass = msg._rendered ? 'is-event' : '';
+                const noteClass =
+                  msg.type === 'ticket_note_added' ? 'note' : '';
+                const typingClass =
+                  msg.type === 'typing_started' ? 'typing' : '';
+                const matchClass =
+                  this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
+                return html`<div
+                  class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${emptyClass} ${latestClass} ${eventClass} ${noteClass} ${typingClass} ${matchClass}"
+                  data-uuid=${msg.uuid || nothing}
+                >
+                  ${this.renderMessage(msg, index == 0 ? name : null)}
+                </div>`;
+              });
             }
           )}
         </div>
@@ -1574,44 +1918,38 @@ export class Chat extends RapidElement {
       ${showReason
         ? html`<div class="group-reason">${reasonLabel}</div>`
         : null}
-      ${timeForReason}
     `;
 
-    return { html: resultHtml, timestamp: newLastShownTimestamp };
+    return resultHtml;
   }
 
-  private renderNote(
-    event: TicketEvent,
-    name: string | null,
-    isLast: boolean
-  ): TemplateResult {
+  private renderNote(event: TicketEvent, name: string | null): TemplateResult {
+    // notes carry their time the same way messages do — in the
+    // hover popup — rather than printing it under the bubble
     return html`<div class="bubble-wrap">
-      <div class="bubble">
-        ${name ? html`<div class="name">${name}</div>` : null}
-        <div style="white-space: pre-wrap;">${event.note}</div>
-      </div>
-      ${isLast
-        ? html`<div class="note-time">
+      ${this.showTimestamps
+        ? html`<div class="popup" style="white-space: nowrap;">
             <temba-date
-              value=${event.created_on.toISOString()}
-              display="relative"
+              value="${event.created_on.toISOString()}"
+              display="datetime"
             ></temba-date>
+            <div class="arrow"></div>
           </div>`
         : null}
+      <div class="bubble">
+        ${name ? html`<div class="name">${name}</div>` : null}
+        <div style="white-space: pre-wrap;">${event.note}</div>
+      </div>
     </div>`;
   }
 
-  private renderMessage(
-    event: ContactEvent,
-    name = null,
-    isLast = false
-  ): TemplateResult {
+  private renderMessage(event: ContactEvent, name = null): TemplateResult {
     if (event._rendered) {
       return html`<div class="event">${event._rendered.html}</div>`;
     }
 
     if (event.type === 'ticket_note_added') {
-      return this.renderNote(event as TicketEvent, name, isLast);
+      return this.renderNote(event as TicketEvent, name);
     }
 
     if (event.type === 'typing_started') {
@@ -1684,11 +2022,11 @@ export class Chat extends RapidElement {
                 : null}
               <temba-date
                 value="${message.created_on.toISOString()}"
-                display="relative"
+                display="datetime"
               ></temba-date>
               ${logsURL
                 ? html`<a
-                    style="margin-left: 1em; color: var(--color-primary-dark);"
+                    class="log-link"
                     href="${logsURL}"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -1696,7 +2034,7 @@ export class Chat extends RapidElement {
                   ></a>`
                 : null}
 
-              <div class="arrow">▼</div>
+              <div class="arrow"></div>
             </div>`
           : null}
         ${isDeleted
@@ -1737,6 +2075,8 @@ export class Chat extends RapidElement {
     this.typingEvents.clear();
     this.msgMap.clear();
     this.metadataCache.clear();
+    this.expandedEventChunks.clear();
+    this.collapsingEventChunks.clear();
     this.messageGroups = [];
     this.hideBottomScroll = true;
     this.hideTopScroll = true;
@@ -1759,36 +2099,46 @@ export class Chat extends RapidElement {
       <div class="scroll" @scroll=${this.handleScroll}>
         ${this.messageGroups
           ? (() => {
-              let lastTimestamp: Date | null = null;
-              // process from oldest to newest (high index to low index)
-              // to establish logical time groupings going forward in time
-              const results = [];
+              // bucket groups into calendar-day sections, oldest to
+              // newest (high index to low index). Each section renders
+              // with a sticky day marker that floats over its messages
+              // while they scroll by.
+              const sections: {
+                key: string;
+                label: string;
+                groups: TemplateResult[];
+              }[] = [];
               for (let idx = this.messageGroups.length - 1; idx >= 0; idx--) {
                 const msgGroup = this.messageGroups[idx];
-                const result = this.renderMessageGroup(
-                  msgGroup,
-                  idx,
-                  lastTimestamp
-                );
-                lastTimestamp = result.timestamp;
-                results.unshift(result.html); // add to front since we're going backwards
+                const firstMsg = this.msgMap.get(msgGroup.messages[0]);
+                const day = firstMsg?.created_on || new Date();
+                const key = getDayKey(day);
+                let section = sections[sections.length - 1];
+                if (!section || section.key !== key) {
+                  section = { key, label: getDayLabel(day), groups: [] };
+                  sections.push(section);
+                }
+                // oldest first within the section — the section is a
+                // normal top-down column, only the scroller reverses
+                section.groups.push(this.renderMessageGroup(msgGroup));
               }
-              return results;
+              // newest section first in DOM for the column-reverse scroller
+              sections.reverse();
+              return sections.map(
+                (section) =>
+                  html`<div class="day-section">
+                    <div class="day-marker">
+                      <div class="day">${section.label}</div>
+                    </div>
+                    ${section.groups}
+                  </div>`
+              );
             })()
           : null}
 
         <temba-loading
           class="${!this.fetching ? 'hidden' : ''}"
         ></temba-loading>
-
-        ${this.endOfHistory && this.oldestEventDate
-          ? html`<div class="time first">
-              ${this.oldestEventDate.toLocaleTimeString(
-                undefined,
-                VERBOSE_FORMAT
-              )}
-            </div>`
-          : null}
       </div>
       ${!this.hasFooter
         ? html`<div