@nyaruka/temba-components 0.134.3 → 0.134.4

package/src/display/Chat.ts

@@ -48,6 +48,17 @@ export enum MessageType {
   Note = 'note'
 }
 
+export type GroupReason =
+  | 'time_elapsed'
+  | 'new_author'
+  | 'new_type'
+  | 'initial';
+
+export interface MessageGroup {
+  messages: string[];
+  reason: GroupReason;
+}
+
 export interface ObjectReference {
   uuid: string;
   name: string;
@@ -76,7 +87,7 @@ export interface Msg {
 }
 
 export interface ContactEvent {
-  uuid: string;
+  uuid?: string;
   type: string;
   created_on: Date;
   _user?: User;
@@ -96,6 +107,7 @@ export interface MsgEvent extends ContactEvent {
     by_contact: boolean;
     user: { name: string; uuid: string };
   };
+  _logs_url?: string;
 }
 
 const TIME_FORMAT = { hour: 'numeric', minute: '2-digit' } as any;
@@ -107,6 +119,14 @@ const VERBOSE_FORMAT = {
   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;
 
 export class Chat extends RapidElement {
   static get styles() {
@@ -185,6 +205,16 @@ export class Chat extends RapidElement {
         padding-top: 0;
       }
 
+      .group-reason {
+        text-align: center;
+        font-size: 0.75em;
+        color: #999;
+        margin-bottom: 1em;
+        margin-top: 0.5em;
+        padding: 0.5em 1em;
+        font-style: italic;
+      }
+
       .row {
         display: flex;
         flex-direction: row;
@@ -229,6 +259,7 @@ export class Chat extends RapidElement {
       .incoming .row {
         flex-direction: row-reverse;
         margin-left: 1em;
+        margin-right: 1em;
       }
 
       .bubble {
@@ -289,7 +320,8 @@ export class Chat extends RapidElement {
         color: #ad47479a;
       }
 
-      .message {
+      .message-text {
+        white-space: pre-wrap;
         margin-bottom: 0.5em;
         line-height: 1.2em;
         word-break: break-word;
@@ -380,8 +412,6 @@ export class Chat extends RapidElement {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
-        margin-top: -1em;
-        padding-top: 1em;
       }
 
       .scroll-at-top.messages:before {
@@ -532,8 +562,6 @@ export class Chat extends RapidElement {
           rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
         border: 1px solid #f3f3f3;
         opacity: 0;
-        transform: scale(0.7);
-        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
         z-index: 2;
       }
 
@@ -550,9 +578,9 @@ export class Chat extends RapidElement {
       }
 
       .bubble-wrap:hover .popup {
-        transform: translateY(-120%);
         opacity: 1;
         transition-delay: 1s;
+        top: -35px;
       }
 
       .new-message-notification {
@@ -589,7 +617,7 @@ export class Chat extends RapidElement {
   }
 
   @property({ type: Array })
-  messageGroups: string[][] = [];
+  messageGroups: MessageGroup[] = [];
 
   @property({ type: Boolean })
   fetching = false;
@@ -713,20 +741,43 @@ export class Chat extends RapidElement {
     return this.msgMap.has(msg.uuid);
   }
 
-  private isSameGroup(msg1: ContactEvent, msg2: ContactEvent): boolean {
-    if (msg1 && msg2) {
-      const sameGroup =
-        msg1.type === msg2.type &&
-        msg1._user?.name === msg2._user?.name &&
-        Math.abs(msg1.created_on.getTime() - msg2.created_on.getTime()) <
-          BATCH_TIME_WINDOW;
-      return sameGroup;
+  private isSameGroup(
+    msg1: ContactEvent,
+    msg2: ContactEvent,
+    lastTimeElapsedDate?: Date
+  ): { same: boolean; reason?: GroupReason } {
+    if (!msg1 || !msg2) {
+      return { same: true };
+    }
+
+    // for type equivalence, treat all non-message types as the same
+    const isMsg1 = msg1.type === 'msg_created' || msg1.type === 'msg_received';
+    const isMsg2 = msg2.type === 'msg_created' || msg2.type === 'msg_received';
+    const typeMatch =
+      isMsg1 && isMsg2 ? msg1.type === msg2.type : isMsg1 === isMsg2;
+
+    // check time first - if BATCH_TIME_WINDOW has passed since last time_elapsed reason
+    const timeToCheck = lastTimeElapsedDate || msg1.created_on;
+    if (
+      Math.abs(msg2.created_on.getTime() - timeToCheck.getTime()) >=
+      BATCH_TIME_WINDOW
+    ) {
+      return { same: false, reason: 'time_elapsed' };
+    }
+
+    if (!typeMatch) {
+      return { same: false, reason: 'new_type' };
+    }
+
+    // only check author for message types
+    if (isMsg1 && isMsg2 && msg1._user?.name !== msg2._user?.name) {
+      return { same: false, reason: 'new_author' };
     }
 
-    return false;
+    return { same: true };
   }
 
-  private insertGroups(newGroups: string[][], append = false) {
+  private insertGroups(newGroups: MessageGroup[], append = false) {
     if (!append) {
       newGroups.reverse();
     }
@@ -737,12 +788,13 @@ export class Chat extends RapidElement {
         this.messageGroups[append ? 0 : this.messageGroups.length - 1];
 
       if (group) {
-        const lastMsgId = group[group.length - 1];
+        const lastMsgId = group.messages[group.messages.length - 1];
         const lastMsg = this.msgMap.get(lastMsgId);
-        const newMsg = this.msgMap.get(newGroup[0]);
+        const newMsg = this.msgMap.get(newGroup.messages[0]);
         // if our message belongs to the previous group, in we go
-        if (this.isSameGroup(lastMsg, newMsg)) {
-          group.push(...newGroup);
+        const groupCheck = this.isSameGroup(lastMsg, newMsg);
+        if (groupCheck.same) {
+          group.messages.push(...newGroup.messages);
         } else {
           // otherwise, just add our entire group as a new one
           if (append) {
@@ -763,18 +815,31 @@ export class Chat extends RapidElement {
     this.requestUpdate('messageGroups');
   }
 
-  private groupMessages(msgIds: string[]): string[][] {
+  private groupMessages(msgIds: string[]): MessageGroup[] {
     // group our messages by origin and user
-    const groups = [];
-    let lastGroup = [];
-    let lastMsg = null;
+    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);
-      if (!this.isSameGroup(msg, lastMsg)) {
-        lastGroup = [];
+      const groupCheck = this.isSameGroup(msg, lastMsg, lastTimeElapsedDate);
+
+      if (!groupCheck.same || !lastGroup) {
+        lastGroup = {
+          messages: [],
+          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.push(msgId);
+
+      lastGroup.messages.push(msgId);
       lastMsg = msg;
     }
     return groups;
@@ -822,48 +887,30 @@ export class Chat extends RapidElement {
     this.scrollToBottom();
   }
 
+  private getReasonLabel(reason: GroupReason): string {
+    switch (reason) {
+      case 'new_author':
+        return '👤 Different author';
+      case 'new_type':
+        return '🔄 Message type changed';
+      case 'time_elapsed':
+      case 'initial':
+      default:
+        return '';
+    }
+  }
+
   private renderMessageGroup(
-    msgIds: string[],
+    group: MessageGroup,
     idx: number,
-    groups: string[][]
-  ): TemplateResult {
+    lastShownTimestamp: Date | null
+  ): { html: TemplateResult; timestamp: Date | null } {
     const today = new Date();
-    const firstGroup = idx === groups.length - 1;
-
-    let prevMsg: ContactEvent;
-    if (idx > 0) {
-      const lastGroup = groups[idx - 1];
-      if (lastGroup && lastGroup.length > 0) {
-        prevMsg = this.msgMap.get(lastGroup[0]);
-      }
-    }
+    const msgIds = group.messages;
 
     const mostRecentId = msgIds[msgIds.length - 1];
     const currentMsg = this.msgMap.get(mostRecentId);
 
-    let timeDisplay = null;
-    if (
-      prevMsg &&
-      !this.isSameGroup(prevMsg, currentMsg) &&
-      (Math.abs(
-        currentMsg.created_on.getTime() - prevMsg.created_on.getTime()
-      ) > BATCH_TIME_WINDOW ||
-        idx === groups.length - 1)
-    ) {
-      if (
-        today.getDate() !== prevMsg.created_on.getDate() ||
-        prevMsg.created_on.getDate() !== currentMsg.created_on.getDate()
-      ) {
-        timeDisplay = html`<div class="time ${firstGroup ? 'first' : ''}">
-          ${prevMsg.created_on.toLocaleTimeString(undefined, VERBOSE_FORMAT)}
-        </div>`;
-      } else {
-        timeDisplay = html`<div class="time ${firstGroup ? 'first' : ''}">
-          ${prevMsg.created_on.toLocaleTimeString(undefined, TIME_FORMAT)}
-        </div>`;
-      }
-    }
-
     const incoming = this.agent
       ? currentMsg.type !== 'msg_received'
       : currentMsg.type === 'msg_received';
@@ -878,8 +925,48 @@ export class Chat extends RapidElement {
 
     const isSystem = !currentMsg._user?.uuid;
 
-    return html`
-      ${timeDisplay}
+    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;
+      } else {
+        // no previous timestamp, check against previous group
+        showTimeForReason = group.reason === 'time_elapsed';
+      }
+    }
+
+    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(
@@ -916,7 +1003,13 @@ export class Chat extends RapidElement {
             </div>`
           : null}
       </div>
+      ${showReason
+        ? html`<div class="group-reason">${reasonLabel}</div>`
+        : null}
+      ${timeForReason}
     `;
+
+    return { html: resultHtml, timestamp: newLastShownTimestamp };
   }
 
   private renderMessage(event: ContactEvent, name = null): TemplateResult {
@@ -967,7 +1060,7 @@ export class Chat extends RapidElement {
         ${message.msg.text
           ? html`<div class="bubble">
               ${name ? html`<div class="name">${name}</div>` : null}
-              <div class="message message-text">${message.msg.text}</div>
+              <div class="message-text">${message.msg.text}</div>
             </div>`
           : null}
 
@@ -1006,16 +1099,23 @@ export class Chat extends RapidElement {
     >
       <div class="scroll" @scroll=${this.handleScroll}>
         ${this.messageGroups
-          ? repeat(
-              this.messageGroups,
-              (msgGroup) => msgGroup.join(','),
-              (msgGroup, idx) =>
-                html`${this.renderMessageGroup(
+          ? (() => {
+              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 = [];
+              for (let idx = this.messageGroups.length - 1; idx >= 0; idx--) {
+                const msgGroup = this.messageGroups[idx];
+                const result = this.renderMessageGroup(
                   msgGroup,
                   idx,
-                  this.messageGroups
-                )}`
-            )
+                  lastTimestamp
+                );
+                lastTimestamp = result.timestamp;
+                results.unshift(result.html); // add to front since we're going backwards
+              }
+              return results;
+            })()
           : null}
 
         <temba-loading

package/src/live/ContactChat.ts

@@ -161,9 +161,9 @@ export const renderTicketAction = (
 
   const actionNote = event.note
     ? html`<div
-        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em 0; border: 1px solid #ffe97f;border-radius: var(--curvature);"
+        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;"
       >
-        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em">
+        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em; ">
           <strong>${event._user ? event._user.name : 'Someone'}</strong> added a
           note
           <temba-date
@@ -171,7 +171,7 @@ export const renderTicketAction = (
             display="relative"
           ></temba-date>
         </div>
-        ${event.note}
+        <div style="white-space: pre-wrap;">${event.note}</div>
       </div>`
     : null;
 

package/test-assets/contacts/history.json

@@ -83,7 +83,7 @@
       "created_on": "2025-09-23T20:40:27.239434+00:00",
       "msg": {
         "urn": "tel:+250788123123",
-        "text": "No problem, we are all done then!",
+        "text": "No problem.\nWe are all done here.",
         "channel": {
           "uuid": "8a81e9e0-10a0-4319-9b00-ce723cfa8303",
           "name": "SMS Channel"