@nyaruka/temba-components 0.132.0 → 0.134.0

package/out-tsc/src/live/ContactChat.js

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { fetchResults, getUrl, oxfordFn, postJSON, postUrl } from '../utils';
+import { fetchResults, generateUUIDv7, getUrl, oxfordFn, postJSON, postUrl } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
 import { MessageType } from '../display/Chat';
 import { DEFAULT_AVATAR } from '../webchat/assets';
@@ -123,17 +123,37 @@ const renderContactURNsChanged = (event) => {
 export const renderTicketAction = (event, action) => {
     var _a;
     const ticketUUID = ((_a = event.ticket) === null || _a === void 0 ? void 0 : _a.uuid) || event.ticket_uuid;
-    if (event._user) {
-        return html `<div>
-      <strong>${event._user.name}</strong> ${action} a
-      <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
-    </div>`;
+    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);"
+      >
+        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em">
+          <strong>${event._user.name}</strong> added a note
+          <temba-date
+            value=${event.created_on.toISOString()}
+            display="relative"
+          ></temba-date>
+        </div>
+        ${event.note}
+      </div>`
+        : null;
+    if (action === 'noted') {
+        return html `${actionNote}`;
     }
-    return html `<div>
-    A
-    <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong> was
-    <strong>${action}</strong>
-  </div>`;
+    const description = event._user
+        ? html `<div>
+        <strong>${event._user.name}</strong> ${action} a
+        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+      </div>`
+        : html `<div>
+        A
+        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+        was <strong>${action}</strong>
+      </div>`;
+    return html `<div style="${actionNote ? 'margin-bottom: 1em;' : ''}">
+      ${description}
+    </div>
+    ${actionNote}`;
 };
 export const renderTicketAssigneeChanged = (event) => {
     if (event._user) {
@@ -427,10 +447,12 @@ export class ContactChat extends ContactStoreElement {
         this.showInterrupt = false;
         this.avatar = DEFAULT_AVATAR;
         this.ticket = null;
-        this.lastEventTime = null;
-        this.newestEventTime = null;
+        this.beforeUUID = null; // for scrolling back through history
+        this.afterUUID = null; // for polling new messages
         this.refreshId = null;
         this.polling = false;
+        this.pollingInterval = 2000; // start at 2 seconds
+        this.lastFetchTime = null;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -446,6 +468,7 @@ export class ContactChat extends ContactStoreElement {
         }
     }
     updated(changedProperties) {
+        var _a;
         super.updated(changedProperties);
         // if we don't have an endpoint infer one
         if (changedProperties.has('data') ||
@@ -457,9 +480,15 @@ export class ContactChat extends ContactStoreElement {
             }
             this.currentContact = this.data;
         }
-        if (changedProperties.has('currentContact')) {
+        if (changedProperties.has('currentContact') && this.currentContact) {
             this.chat = this.shadowRoot.querySelector('temba-chat');
-            this.reset();
+            if (this.currentContact.uuid !==
+                ((_a = changedProperties.get('currentContact')) === null || _a === void 0 ? void 0 : _a.uuid)) {
+                this.reset();
+            }
+            else {
+                setTimeout(() => this.checkForNewMessages(), 500);
+            }
             this.fetchPreviousMessages();
         }
     }
@@ -469,10 +498,12 @@ export class ContactChat extends ContactStoreElement {
         }
         this.blockFetching = false;
         this.ticket = null;
-        this.lastEventTime = null;
-        this.newestEventTime = null;
+        this.beforeUUID = null;
+        this.afterUUID = null;
         this.refreshId = null;
         this.polling = false;
+        this.pollingInterval = 2000;
+        this.lastFetchTime = null;
         this.errorMessage = null;
         const compose = this.shadowRoot.querySelector('temba-compose');
         if (compose) {
@@ -511,8 +542,11 @@ export class ContactChat extends ContactStoreElement {
         postJSON(`/contact/chat/${this.currentContact.uuid}/`, payload)
             .then((response) => {
             if (response.status < 400) {
-                const msg = this.createChatForMessageEvent(response.json.event);
-                this.chat.addMessages([msg], null, true);
+                const event = response.json.event;
+                event.created_on = new Date(event.created_on);
+                this.chat.addMessages([event], null, true);
+                // reset polling interval to 2 seconds after sending a message
+                this.pollingInterval = 2000;
                 this.checkForNewMessages();
                 composeEle.reset();
                 this.fireCustomEvent(CustomEventType.MessageSent, {
@@ -530,240 +564,174 @@ export class ContactChat extends ContactStoreElement {
     }
     getEndpoint() {
         if (this.contact) {
-            return `/contact/history/${this.contact}/?_format=json`;
+            return `/contact/chat/${this.contact}/`;
         }
         return null;
     }
-    scheduleRefresh() {
-        // knock five seconds off the newest event time so we are
-        // a little more aggressive about refreshing short term
-        let window = new Date().getTime() - this.newestEventTime / 1000 - 5000;
+    scheduleRefresh(hasNewEvents = false) {
         if (this.refreshId) {
             clearTimeout(this.refreshId);
             this.refreshId = null;
         }
-        // wait no longer than 15 seconds
-        window = Math.min(window, 15000);
-        // wait at least 2 seconds
-        window = Math.max(window, 2000);
+        // reset to 2 seconds if we received new events
+        if (hasNewEvents) {
+            this.pollingInterval = 2000;
+        }
+        else {
+            // increase interval by 1 second up to max of 15 seconds
+            this.pollingInterval = Math.min(this.pollingInterval + 1000, 15000);
+        }
         this.refreshId = setTimeout(() => {
             this.checkForNewMessages();
-        }, window);
+        }, this.pollingInterval);
     }
-    getEventMessage(event) {
-        let message = null;
+    prerender(event) {
         switch (event.type) {
             case Events.AIRTIME_TRANSFERRED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderAirtimeTransferredEvent(event)
+                event._rendered = {
+                    html: renderAirtimeTransferredEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CALL_CREATED:
             case Events.CALL_MISSED:
             case Events.CALL_RECEIVED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderCallEvent(event)
+                event._rendered = {
+                    html: renderCallEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CHAT_STARTED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderChatStartedEvent(event)
+                event._rendered = {
+                    html: renderChatStartedEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_FIELD_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderUpdateEvent(event)
+                event._rendered = {
+                    html: renderUpdateEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_GROUPS_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderContactGroupsEvent(event)
+                event._rendered = {
+                    html: renderContactGroupsEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_LANGUAGE_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderContactLanguageChangedEvent(event)
+                event._rendered = {
+                    html: renderContactLanguageChangedEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_NAME_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderNameChanged(event)
+                event._rendered = {
+                    html: renderNameChanged(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_STATUS_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderContactStatusChangedEvent(event)
+                event._rendered = {
+                    html: renderContactStatusChangedEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CONTACT_URNS_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderContactURNsChanged(event)
+                event._rendered = {
+                    html: renderContactURNsChanged(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.OPTIN_REQUESTED:
             case Events.OPTIN_STARTED:
             case Events.OPTIN_STOPPED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderOptInEvent(event)
+                event._rendered = {
+                    html: renderOptInEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.RUN_STARTED:
             case Events.RUN_ENDED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderRunEvent(event)
+                event._rendered = {
+                    html: renderRunEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.TICKET_ASSIGNEE_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderTicketAssigneeChanged(event)
+                event._rendered = {
+                    html: renderTicketAssigneeChanged(event),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.TICKET_CLOSED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderTicketAction(event, 'closed')
+                event._rendered = {
+                    html: renderTicketAction(event, 'closed'),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.TICKET_OPENED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderTicketAction(event, 'opened')
+                event._rendered = {
+                    html: renderTicketAction(event, 'opened'),
+                    type: MessageType.Inline
+                };
+                break;
+            case Events.TICKET_NOTE_ADDED:
+                event._rendered = {
+                    html: renderTicketAction(event, 'noted'),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.TICKET_REOPENED:
-                message = {
-                    type: MessageType.Inline,
-                    text: renderTicketAction(event, 'reopened')
+                event._rendered = {
+                    html: renderTicketAction(event, 'reopened'),
+                    type: MessageType.Inline
                 };
                 break;
             case Events.TICKET_TOPIC_CHANGED:
-                message = {
-                    type: MessageType.Inline,
-                    text: html `<div>
+                event._rendered = {
+                    html: html `<div>
             Topic changed to
             <strong>${event.topic.name}</strong>
-          </div>`
+          </div>`,
+                    type: MessageType.Inline
                 };
                 break;
             case Events.CHANNEL_EVENT: // deprecated
-                message = {
-                    type: MessageType.Inline,
-                    text: renderChannelEvent(event)
+                event._rendered = {
+                    html: renderChannelEvent(event),
+                    type: MessageType.Inline
                 };
                 break;
             default:
                 console.error('Unknown event type', event);
         }
-        if (message) {
-            message.id = event.uuid;
-            message.date = new Date(event.created_on);
-        }
-        return message;
-    }
-    getUserForEvent(event) {
-        if (event.type === 'msg_received') {
-            return {
-                name: this.currentContact.name
-            };
-        }
-        else if (event._user) {
-            return event._user;
-        }
-        return null;
-    }
-    createChatForMessageEvent(msgEvent) {
-        return {
-            id: msgEvent.uuid,
-            type: msgEvent.type === 'msg_received' ? 'msg_in' : 'msg_out',
-            user: this.getUserForEvent(msgEvent),
-            date: new Date(msgEvent.created_on),
-            attachments: msgEvent.msg.attachments,
-            text: msgEvent.msg.text,
-            sendError: msgEvent._status &&
-                (msgEvent._status.status === 'errored' ||
-                    msgEvent._status.status === 'failed'),
-            popup: html `<div
-        style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
-      >
-        <div style="justify-content:left;text-align:left">
-          <temba-date
-            value=${msgEvent.created_on}
-            display="duration"
-          ></temba-date>
-
-          ${msgEvent.optin
-                ? html `<div style="font-size:0.9em;color:#aaa">
-                ${msgEvent.optin.name}
-              </div>`
-                : null}
-        </div>
-        ${msgEvent._logs_url
-                ? html `<a style="margin-left:0.5em" href="${msgEvent._logs_url}"
-              ><temba-icon name="log"></temba-icon
-            ></a>`
-                : null}
-      </div> `
-        };
     }
     createMessages(page) {
         if (page.events) {
-            let messages = [];
+            const messages = [];
             page.events.forEach((event) => {
-                const ts = new Date(event.created_on).getTime() * 1000;
-                if (ts > this.newestEventTime) {
-                    this.newestEventTime = ts;
-                }
-                if (event.type === 'ticket_note_added') {
-                    const ticketEvent = event;
-                    messages.push({
-                        type: MessageType.Note,
-                        id: event.created_on + event.type,
-                        user: this.getUserForEvent(ticketEvent),
-                        date: new Date(ticketEvent.created_on),
-                        text: ticketEvent.note
-                    });
+                // track the UUID of the newest event for polling
+                if (!this.afterUUID ||
+                    event.uuid.toLowerCase() > this.afterUUID.toLowerCase()) {
+                    this.afterUUID = event.uuid;
                 }
-                else if (event.type === 'ticket_opened') {
-                    // ticket open events can have a note attached
-                    const ticketEvent = event;
-                    messages.push({
-                        type: MessageType.Note,
-                        id: event.created_on + event.type + '_note',
-                        user: this.getUserForEvent(ticketEvent),
-                        date: new Date(ticketEvent.created_on),
-                        text: ticketEvent.note
-                    });
-                    // but the opening of the ticket is a normal event
-                    messages.push(this.getEventMessage(event));
-                }
-                else if (event.type === 'msg_created' ||
+                // convert to dates
+                event.created_on = new Date(event.created_on);
+                if (event.type === 'msg_created' ||
                     event.type === 'msg_received' ||
                     event.type === 'ivr_created') {
-                    const msgEvent = event;
-                    messages.push(this.createChatForMessageEvent(msgEvent));
+                    messages.push(event);
                 }
                 else {
-                    const msg = this.getEventMessage(event);
-                    if (msg) {
-                        messages.push(msg);
+                    this.prerender(event);
+                    if (event._rendered) {
+                        messages.push(event);
                     }
                 }
             });
             // remove any messages we don't recognize
-            messages = messages.filter((msg) => !!msg);
-            return messages;
+            return messages.filter((msg) => !!msg);
         }
         return [];
     }
@@ -774,26 +742,26 @@ export class ContactChat extends ContactStoreElement {
             return;
         }
         const chat = this.chat;
-        const contactChat = this;
-        if (this.currentContact && this.newestEventTime) {
+        if (this.currentContact && this.afterUUID) {
             this.polling = true;
+            this.lastFetchTime = Date.now();
             const endpoint = this.getEndpoint();
             if (!endpoint) {
                 return;
             }
             const fetchContact = this.currentContact.uuid;
-            fetchContactHistory(false, endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, null, this.newestEventTime).then((page) => {
+            fetchContactHistory(endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, null, this.afterUUID).then((page) => {
+                const messages = this.createMessages(page);
+                messages.reverse();
                 if (fetchContact === this.currentContact.uuid) {
-                    this.lastEventTime = page.next_before;
-                    const messages = this.createMessages(page);
-                    if (messages.length === 0) {
-                        contactChat.blockFetching = true;
-                    }
-                    messages.reverse();
+                    const hasNewEvents = messages.length > 0;
                     chat.addMessages(messages, null, true);
+                    this.polling = false;
+                    this.scheduleRefresh(hasNewEvents);
+                }
+                else {
+                    this.polling = false;
                 }
-                this.polling = false;
-                this.scheduleRefresh();
             });
         }
     }
@@ -810,13 +778,31 @@ export class ContactChat extends ContactStoreElement {
             if (!endpoint) {
                 return;
             }
-            fetchContactHistory(false, endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, this.lastEventTime).then((page) => {
-                this.lastEventTime = page.next_before;
+            // initialize anchor UUID if not set (first fetch)
+            if (!this.beforeUUID && !this.afterUUID) {
+                // generate a UUID v7 for current time as the anchor
+                const anchorUUID = generateUUIDv7();
+                this.beforeUUID = anchorUUID;
+                this.afterUUID = anchorUUID;
+            }
+            fetchContactHistory(endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, this.beforeUUID, null).then((page) => {
                 const messages = this.createMessages(page);
                 messages.reverse();
                 if (messages.length === 0) {
                     contactChat.blockFetching = true;
                 }
+                else if (page.next) {
+                    // update beforeUUID for next fetch of older messages
+                    this.beforeUUID = page.next;
+                }
+                else {
+                    // no more history, mark end and show oldest event date
+                    contactChat.blockFetching = true;
+                    if (page.events && page.events.length > 0) {
+                        const oldestEvent = page.events[page.events.length - 1];
+                        chat.setEndOfHistory(new Date(oldestEvent.created_on));
+                    }
+                }
                 chat.addMessages(messages);
                 this.scheduleRefresh();
             });
@@ -921,15 +907,13 @@ export class ContactChat extends ContactStoreElement {
     refreshTicket() {
         if (this.currentTicket) {
             fetchResults(`/api/v2/tickets.json?uuid=${this.currentTicket.uuid}`).then((values) => {
-                this.store.resolveUsers(values, ['assignee']).then(() => {
-                    if (values.length > 0) {
-                        this.fireCustomEvent(CustomEventType.TicketUpdated, {
-                            ticket: values[0],
-                            previous: this.currentTicket
-                        });
-                        this.currentTicket = values[0];
-                    }
-                });
+                if (values.length > 0) {
+                    this.fireCustomEvent(CustomEventType.TicketUpdated, {
+                        ticket: values[0],
+                        previous: this.currentTicket
+                    });
+                    this.currentTicket = values[0];
+                }
             });
         }
     }
@@ -970,6 +954,7 @@ export class ContactChat extends ContactStoreElement {
               @temba-fetch-complete=${this.fetchComplete}
               avatar=${this.avatar}
               agent
+              ?hasFooter=${inFlow}
             >
               ${inFlow
                 ? html `
@@ -1099,37 +1084,31 @@ export const fetchContact = (endpoint) => {
         });
     });
 };
-export const fetchContactHistory = (reset, endpoint, ticket, before = undefined, after = undefined) => {
-    if (reset) {
-        pendingRequests.forEach((controller) => {
-            controller.abort();
-        });
-        pendingRequests = [];
-    }
+export const fetchContactHistory = (endpoint, ticket = undefined, before = undefined, after = undefined) => {
     return new Promise((resolve) => {
         const controller = new AbortController();
         pendingRequests.push(controller);
         let url = endpoint;
+        const params = [];
         if (before) {
-            url += `&before=${before}`;
+            params.push(`before=${before}`);
         }
         if (after) {
-            url += `&after=${after}`;
+            params.push(`after=${after}`);
         }
         if (ticket) {
-            url += `&ticket=${ticket}`;
+            params.push(`ticket=${ticket}`);
+        }
+        if (params.length > 0) {
+            url += (url.includes('?') ? '&' : '?') + params.join('&');
         }
-        const store = document.querySelector('temba-store');
         getUrl(url, controller)
             .then((response) => {
             // on success, remove our abort controller
             pendingRequests = pendingRequests.filter((controller) => {
                 return response.controller === controller;
             });
-            const page = response.json;
-            store.resolveUsers(page.events, ['created_by']).then(() => {
-                resolve(page);
-            });
+            resolve(response.json);
         })
             .catch(() => {
             // canceled