@nyaruka/temba-components 0.133.0 → 0.134.1

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

@@ -123,17 +123,38 @@ 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 ? event._user.name : 'Someone'}</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) {
@@ -448,6 +469,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') ||
@@ -459,9 +481,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();
         }
     }
@@ -515,8 +543,9 @@ 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();
@@ -557,221 +586,153 @@ export class ContactChat extends ContactStoreElement {
             this.checkForNewMessages();
         }, 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) => {
                 // track the UUID of the newest event for polling
                 if (!this.afterUUID ||
                     event.uuid.toLowerCase() > this.afterUUID.toLowerCase()) {
                     this.afterUUID = event.uuid;
                 }
-                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
-                    });
-                }
-                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 [];
     }
@@ -782,7 +743,6 @@ export class ContactChat extends ContactStoreElement {
             return;
         }
         const chat = this.chat;
-        const contactChat = this;
         if (this.currentContact && this.afterUUID) {
             this.polling = true;
             this.lastFetchTime = Date.now();
@@ -792,13 +752,10 @@ export class ContactChat extends ContactStoreElement {
             }
             const fetchContact = this.currentContact.uuid;
             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) {
-                    const messages = this.createMessages(page);
                     const hasNewEvents = messages.length > 0;
-                    if (messages.length === 0) {
-                        contactChat.blockFetching = true;
-                    }
-                    messages.reverse();
                     chat.addMessages(messages, null, true);
                     this.polling = false;
                     this.scheduleRefresh(hasNewEvents);
@@ -951,15 +908,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];
+                }
             });
         }
     }
@@ -1000,6 +955,7 @@ export class ContactChat extends ContactStoreElement {
               @temba-fetch-complete=${this.fetchComplete}
               avatar=${this.avatar}
               agent
+              ?hasFooter=${inFlow}
             >
               ${inFlow
                 ? html `
@@ -1147,17 +1103,13 @@ export const fetchContactHistory = (endpoint, ticket = undefined, before = undef
         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