@nyaruka/temba-components 0.132.0 → 0.134.0

package/out-tsc/src/display/Chat.js

@@ -1,21 +1,49 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
 import { DEFAULT_AVATAR } from '../webchat/assets';
-import { hashCode } from '../utils';
 const BATCH_TIME_WINDOW = 60 * 60 * 1000;
-const SCROLL_FETCH_BUFFER = 0.05;
+const SCROLL_FETCH_BUFFER = 200; // pixels from top
 const MIN_FETCH_TIME = 250;
+const getUnsendableReasonMessage = (reason) => {
+    switch (reason) {
+        case 'no_route':
+            return 'No channel available to send message';
+        case 'contact_blocked':
+            return 'Contact has been blocked';
+        case 'contact_stopped':
+            return 'Contact has been stopped';
+        case 'contact_archived':
+            return 'Contact is archived';
+        case 'org_suspended':
+            return 'Workspace is suspended';
+        case 'looping':
+            return 'Message loop detected';
+        default:
+            return 'Unable to send message';
+    }
+};
+const getStatusReasonMessage = (reason) => {
+    switch (reason) {
+        case 'error_limit':
+            return 'Error limit reached';
+        case 'too_old':
+            return 'Message is too old to send';
+        case 'channel_removed':
+            return 'Channel was removed';
+        default:
+            return 'Message failed to send';
+    }
+};
 export var MessageType;
 (function (MessageType) {
     MessageType["Inline"] = "inline";
     MessageType["Error"] = "error";
     MessageType["Collapse"] = "collapse";
     MessageType["Note"] = "note";
-    MessageType["MsgIn"] = "msg_in";
-    MessageType["MsgOut"] = "msg_out";
 })(MessageType || (MessageType = {}));
 const TIME_FORMAT = { hour: 'numeric', minute: '2-digit' };
 const VERBOSE_FORMAT = {
@@ -35,7 +63,12 @@ export class Chat extends RapidElement {
         this.hideBottomScroll = true;
         this.defaultAvatar = DEFAULT_AVATAR;
         this.agent = false;
+        this.endOfHistory = false;
+        this.oldestEventDate = null;
+        this.showNewMessageNotification = false;
+        this.hasFooter = false;
         this.msgMap = new Map();
+        this.metadataCache = new Map();
     }
     static get styles() {
         return css `
@@ -92,7 +125,8 @@ export class Chat extends RapidElement {
         text-align: center;
         font-size: 0.8em;
         color: #999;
-        margin-top: 2em;
+        margin-bottom: 2em;
+        margin-top: 1em;
         border-top: 1px solid #e9e9e9;
         padding: 1em;
         margin-left: 10%;
@@ -204,16 +238,24 @@ export class Chat extends RapidElement {
         color: rgba(0, 0, 0, 0.5);
       }
 
+      .failed .bubble,
+      .error .bubble {
+        border: 1px solid var(--color-error);
+        background: #ffe6e6;
+        color: #ad4747ff;
+      }
+
+      .error .bubble .name,
+      .failed .bubble .name {
+        color: #ad47479a;
+      }
+
       .message {
         margin-bottom: 0.5em;
         line-height: 1.2em;
         word-break: break-word;
       }
 
-      .message-text {
-        white-space: pre-line;
-      }
-
       .chat {
         width: 28rem;
         border-radius: var(--curvature);
@@ -424,19 +466,12 @@ export class Chat extends RapidElement {
         border-radius: var(--curvature);
       }
 
-      .error .bubble {
-        border: 1px solid var(--color-error);
-        background: white;
-        color: #333;
-      }
-
-      .error .bubble .name {
-        color: #999;
-      }
-
+      .failed temba-thumbnail,
       .error temba-thumbnail {
-        --thumb-background: var(--color-error);
-        --thumb-icon: white;
+        --thumb-background: #ffe6e6;
+        --thumb-border: var(--color-error);
+        border: 1px solid var(--color-error);
+        color: #ad4747a8;
       }
 
       .outgoing .popup {
@@ -480,6 +515,37 @@ export class Chat extends RapidElement {
         opacity: 1;
         transition-delay: 1s;
       }
+
+      .new-message-notification {
+        position: absolute;
+        bottom: 1em;
+        left: 50%;
+        transform: translateX(-50%) translateY(100px);
+        background: var(--color-primary-dark, #3c92dd);
+        color: white;
+        padding: 0.75em 1.5em;
+        border-radius: var(--curvature);
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 7px 0px,
+          rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
+        cursor: pointer;
+        opacity: 0;
+        transition: all 0.3s ease-out;
+        z-index: 100;
+        font-weight: 500;
+        pointer-events: none;
+      }
+
+      .new-message-notification.visible {
+        transform: translateX(-50%) translateY(0);
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .new-message-notification:hover {
+        background: var(--color-primary-darker, #2b7ac4);
+        box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px 0px,
+          rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
+      }
     `;
     }
     firstUpdated(changed) {
@@ -490,15 +556,6 @@ export class Chat extends RapidElement {
         this.hideTopScroll = !hasScroll;
     }
     addMessages(messages, startTime = null, append = false) {
-        // make sure our messages have ids
-        messages.forEach((m) => {
-            if (!m.id) {
-                m.id =
-                    hashCode((m.text.strings || []).join('')) +
-                        '_' +
-                        m.date.toISOString();
-            }
-        });
         if (!startTime) {
             startTime = new Date();
         }
@@ -508,8 +565,16 @@ export class Chat extends RapidElement {
             // first add messages to the map
             const newMessages = [];
             for (const m of messages) {
+                // filter out metadata events - they aren't rendered but cached for later reference
+                if (m.type === 'msg_deleted' || m.type === 'msg_status_changed') {
+                    const msgUuid = m.msg_uuid;
+                    if (msgUuid) {
+                        this.metadataCache.set(msgUuid, m);
+                    }
+                    continue;
+                }
                 if (this.addMessage(m)) {
-                    newMessages.push(m.id);
+                    newMessages.push(m.uuid);
                 }
             }
             if (newMessages.length === 0) {
@@ -517,10 +582,25 @@ export class Chat extends RapidElement {
             }
             const ele = this.shadowRoot.querySelector('.scroll');
             const prevTop = ele.scrollTop;
+            const prevScrollHeight = ele.scrollHeight;
+            const scrollableHeight = ele.scrollHeight - ele.clientHeight;
+            const isScrolledAway = scrollableHeight > 0 && Math.abs(ele.scrollTop) > 50;
             const grouped = this.groupMessages(newMessages);
             this.insertGroups(grouped, append);
+            // show notification if new messages are appended and user is scrolled away from bottom
+            if (append && isScrolledAway && newMessages.length > 0) {
+                this.showNewMessageNotification = true;
+            }
             window.setTimeout(() => {
-                ele.scrollTop = prevTop;
+                // when appending (new messages at bottom), adjust scroll to maintain visible content
+                // with column-reverse, new content at bottom increases scrollHeight
+                if (append && isScrolledAway) {
+                    const heightDiff = ele.scrollHeight - prevScrollHeight;
+                    ele.scrollTop = prevTop - heightDiff;
+                }
+                else {
+                    ele.scrollTop = prevTop;
+                }
                 this.fireCustomEvent(CustomEventType.FetchComplete);
             }, 100);
         }, 
@@ -531,18 +611,20 @@ export class Chat extends RapidElement {
     }
     addMessage(msg) {
         const isNew = !this.messageExists(msg);
-        this.msgMap.set(msg.id, msg);
+        this.msgMap.set(msg.uuid, msg);
         return isNew;
     }
     messageExists(msg) {
-        return this.msgMap.has(msg.id);
+        return this.msgMap.has(msg.uuid);
     }
     isSameGroup(msg1, msg2) {
         var _a, _b;
         if (msg1 && msg2) {
-            return (msg1.type === msg2.type &&
-                ((_a = msg1.user) === null || _a === void 0 ? void 0 : _a.name) === ((_b = msg2.user) === null || _b === void 0 ? void 0 : _b.name) &&
-                Math.abs(msg1.date.getTime() - msg2.date.getTime()) < BATCH_TIME_WINDOW);
+            const sameGroup = msg1.type === msg2.type &&
+                ((_a = msg1._user) === null || _a === void 0 ? void 0 : _a.name) === ((_b = msg2._user) === null || _b === void 0 ? void 0 : _b.name) &&
+                Math.abs(msg1.created_on.getTime() - msg2.created_on.getTime()) <
+                    BATCH_TIME_WINDOW;
+            return sameGroup;
         }
         return false;
     }
@@ -600,24 +682,39 @@ export class Chat extends RapidElement {
     }
     handleScroll(event) {
         const ele = event.target;
-        const top = ele.scrollHeight - ele.clientHeight;
-        const scroll = Math.round(top + ele.scrollTop);
-        const scrollPct = scroll / top;
-        this.hideTopScroll = scrollPct <= 0.01;
-        this.hideBottomScroll = scrollPct >= 0.99;
-        if (scrollPct < SCROLL_FETCH_BUFFER) {
+        const scrollableHeight = ele.scrollHeight - ele.clientHeight;
+        if (scrollableHeight <= 0) {
+            return;
+        }
+        // with column-reverse, scrollTop behavior depends on the browser
+        // check if scrollTop is negative (some browsers) or positive (others)
+        const absScrollTop = Math.abs(ele.scrollTop);
+        // when scrolling up to older messages, absScrollTop increases
+        // trigger when we're close to the maximum scroll (oldest messages)
+        const shouldFetch = absScrollTop >= scrollableHeight - SCROLL_FETCH_BUFFER;
+        this.hideTopScroll = absScrollTop >= scrollableHeight - 1;
+        this.hideBottomScroll = absScrollTop <= 1;
+        // hide notification when scrolled to bottom
+        if (absScrollTop <= 10) {
+            this.showNewMessageNotification = false;
+        }
+        if (shouldFetch) {
             this.fireCustomEvent(CustomEventType.ScrollThreshold);
         }
     }
     scrollToBottom() {
         const scroll = this.shadowRoot.querySelector('.scroll');
         if (scroll) {
-            scroll.scrollTop = scroll.scrollHeight;
+            scroll.scrollTop = 0;
             this.hideBottomScroll = true;
+            this.showNewMessageNotification = false;
         }
     }
+    handleNewMessageClick() {
+        this.scrollToBottom();
+    }
     renderMessageGroup(msgIds, idx, groups) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const today = new Date();
         const firstGroup = idx === groups.length - 1;
         let prevMsg;
@@ -632,91 +729,113 @@ export class Chat extends RapidElement {
         let timeDisplay = null;
         if (prevMsg &&
             !this.isSameGroup(prevMsg, currentMsg) &&
-            (Math.abs(currentMsg.date.getTime() - prevMsg.date.getTime()) >
-                BATCH_TIME_WINDOW ||
+            (Math.abs(currentMsg.created_on.getTime() - prevMsg.created_on.getTime()) > BATCH_TIME_WINDOW ||
                 idx === groups.length - 1)) {
-            if (today.getDate() !== prevMsg.date.getDate() ||
-                prevMsg.date.getDate() !== currentMsg.date.getDate()) {
+            if (today.getDate() !== prevMsg.created_on.getDate() ||
+                prevMsg.created_on.getDate() !== currentMsg.created_on.getDate()) {
                 timeDisplay = html `<div class="time ${firstGroup ? 'first' : ''}">
-          ${prevMsg.date.toLocaleTimeString(undefined, VERBOSE_FORMAT)}
+          ${prevMsg.created_on.toLocaleTimeString(undefined, VERBOSE_FORMAT)}
         </div>`;
             }
             else {
                 timeDisplay = html `<div class="time ${firstGroup ? 'first' : ''}">
-          ${prevMsg.date.toLocaleTimeString(undefined, TIME_FORMAT)}
+          ${prevMsg.created_on.toLocaleTimeString(undefined, TIME_FORMAT)}
         </div>`;
             }
         }
         const incoming = this.agent
-            ? currentMsg.type !== 'msg_in'
-            : currentMsg.type === 'msg_in';
-        const name = (_a = currentMsg.user) === null || _a === void 0 ? void 0 : _a.name;
-        const email = (_b = currentMsg.user) === null || _b === void 0 ? void 0 : _b.email;
-        const showAvatar = ((currentMsg.type === 'note' ||
-            currentMsg.type === 'msg_in' ||
-            currentMsg.type === 'msg_out') &&
+            ? currentMsg.type !== 'msg_received'
+            : currentMsg.type === 'msg_received';
+        const name = (_a = currentMsg._user) === null || _a === void 0 ? void 0 : _a.name;
+        const showAvatar = ((currentMsg.type === 'msg_received' ||
+            currentMsg.type === 'msg_created') &&
             this.agent) ||
             !incoming;
+        const isSystem = !((_b = currentMsg._user) === null || _b === void 0 ? void 0 : _b.uuid);
         return html `
-      ${!firstGroup ? timeDisplay : null}
-      <div
-        class="block  ${incoming ? 'incoming' : 'outgoing'} ${currentMsg.type}"
-      >
+      ${timeDisplay}
+      <div class="block  ${incoming ? 'incoming' : 'outgoing'}">
         <div class="group-messages" style="flex-grow:1">
-          ${msgIds.map((msgId, index) => {
+          ${repeat(msgIds, (msgId) => msgId, (msgId, index) => {
+            var _a, _b;
             const msg = this.msgMap.get(msgId);
-            return html `<div class="row message">
-              ${this.renderMessage(msg, index == 0 ? name : null)}
-            </div>`;
+            const msgEvent = msg;
+            const statusClass = msg._status
+                ? msg._status.status
+                : '';
+            const hasError = ((_a = msgEvent.msg) === null || _a === void 0 ? void 0 : _a.unsendable_reason) ||
+                (((_b = msgEvent._status) === null || _b === void 0 ? void 0 : _b.reason) &&
+                    (statusClass === 'failed' || statusClass === 'errored'));
+            const unsendableClass = hasError ? 'error' : '';
+            return html `<div
+                class="row message ${statusClass} ${unsendableClass}"
+              >
+                ${this.renderMessage(msg, index == 0 ? name : null)}
+              </div>`;
         })}
         </div>
         ${showAvatar
             ? html `<div class="avatar" style="align-self:flex-end">
               <temba-user
-                email=${email}
+                uuid=${(_c = currentMsg._user) === null || _c === void 0 ? void 0 : _c.uuid}
                 name=${name}
-                avatar=${(_c = currentMsg.user) === null || _c === void 0 ? void 0 : _c.avatar}
-                ?system=${!email && !name}
+                avatar=${(_d = currentMsg._user) === null || _d === void 0 ? void 0 : _d.avatar}
+                ?system=${isSystem}
               >
               </temba-user>
             </div>`
             : null}
       </div>
-      ${firstGroup ? timeDisplay : null}
     `;
     }
     renderMessage(event, name = null) {
-        if (event.type === MessageType.Error ||
-            event.type === MessageType.Collapse ||
-            event.type === MessageType.Inline) {
-            return html `<div class="event">${event.text}</div>`;
+        var _a, _b;
+        if (event._rendered) {
+            return html `<div class="event">${event._rendered.html}</div>`;
         }
         const message = event;
+        const unsendableReason = (_a = message.msg) === null || _a === void 0 ? void 0 : _a.unsendable_reason;
+        const statusReason = (_b = message._status) === null || _b === void 0 ? void 0 : _b.reason;
+        const errorMessage = unsendableReason
+            ? getUnsendableReasonMessage(unsendableReason)
+            : statusReason
+                ? getStatusReasonMessage(statusReason)
+                : null;
         return html `
-        <div class="bubble-wrap ${message.sendError ? 'error' : ''}">
-        ${message.popup
-            ? html `<div class="popup">
-                ${message.popup}
-                <div class="arrow">▼</div>
+      <div class="bubble-wrap">
+        <div class="popup" style="white-space: nowrap;">
+          ${errorMessage
+            ? html `<div style="color: var(--color-error); margin-right: 1em;">
+                ${errorMessage}
               </div>`
             : null}
-          
-          ${message.text
-            ? html `
-                  <div class="bubble">
-                    ${name ? html `<div class="name">${name}</div>` : null}
-                    <div class="message message-text">${message.text}</div>
-
-                    <!--div>${message.date.toLocaleDateString(undefined, VERBOSE_FORMAT)}</div-->
-                  </div>
-                `
+          <temba-date
+            value="${message.created_on.toISOString()}"
+            display="relative"
+          ></temba-date>
+          ${message._logs_url
+            ? html `<a
+                style="margin-left: 1em; color: var(--color-primary-dark);"
+                href="${message._logs_url}"
+                target="_blank"
+                rel="noopener noreferrer"
+                ><temba-icon name="log"></temba-icon
+              ></a>`
             : null}
 
-          <div class="attachments">
-            ${(message.attachments || []).map((attachment) => html `<temba-thumbnail
-                  attachment="${attachment}"
-                ></temba-thumbnail>`)}
-          </div>
+          <div class="arrow">▼</div>
+        </div>
+        ${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>`
+            : null}
+
+        <div class="attachments">
+          ${(message.msg.attachments || []).map((attachment) => html `<temba-thumbnail
+                attachment="${attachment}"
+              ></temba-thumbnail>`)}
         </div>
       </div>
     `;
@@ -726,6 +845,12 @@ export class Chat extends RapidElement {
         this.messageGroups = [];
         this.hideBottomScroll = true;
         this.hideTopScroll = true;
+        this.endOfHistory = false;
+        this.oldestEventDate = null;
+    }
+    setEndOfHistory(oldestDate) {
+        this.endOfHistory = true;
+        this.oldestEventDate = oldestDate;
     }
     render() {
         return html ` <div
@@ -736,13 +861,29 @@ export class Chat extends RapidElement {
     >
       <div class="scroll" @scroll=${this.handleScroll}>
         ${this.messageGroups
-            ? this.messageGroups.map((msgGroup, idx, groups) => html `${this.renderMessageGroup(msgGroup, idx, groups)}`)
+            ? repeat(this.messageGroups, (msgGroup) => msgGroup.join(','), (msgGroup, idx) => html `${this.renderMessageGroup(msgGroup, idx, this.messageGroups)}`)
             : 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
+            class="new-message-notification ${this.showNewMessageNotification
+                ? 'visible'
+                : ''}"
+            @click=${this.handleNewMessageClick}
+          >
+            New Messages
+          </div>`
+            : null}
       <slot class="header" name="header"></slot>
       <slot class="footer" name="footer"></slot>
     </div>`;
@@ -766,4 +907,16 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Chat.prototype, "agent", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], Chat.prototype, "endOfHistory", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], Chat.prototype, "oldestEventDate", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], Chat.prototype, "showNewMessageNotification", void 0);
+__decorate([
+    property({ type: Boolean })
+], Chat.prototype, "hasFooter", void 0);
 //# sourceMappingURL=Chat.js.map