@nyaruka/temba-components 0.91.6 → 0.92.0

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

@@ -1,10 +1,189 @@
 import { __decorate } from "tslib";
+/* eslint-disable @typescript-eslint/no-this-alias */
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { postJSON } from '../utils';
+import { oxford, oxfordFn, postJSON } from '../utils';
 import { ContactStoreElement } from './ContactStoreElement';
-const DEFAULT_REFRESH = 10000;
+import { fetchContactHistory, getDisplayName } from './helpers';
+import { MessageType } from '../chat/Chat';
+import { getUserDisplay } from '../webchat';
+import { DEFAULT_AVATAR } from '../webchat/assets';
+export var Events;
+(function (Events) {
+    Events["MESSAGE_CREATED"] = "msg_created";
+    Events["MESSAGE_RECEIVED"] = "msg_received";
+    Events["BROADCAST_CREATED"] = "broadcast_created";
+    Events["IVR_CREATED"] = "ivr_created";
+    Events["FLOW_ENTERED"] = "flow_entered";
+    Events["FLOW_EXITED"] = "flow_exited";
+    Events["RUN_RESULT_CHANGED"] = "run_result_changed";
+    Events["CONTACT_FIELD_CHANGED"] = "contact_field_changed";
+    Events["CONTACT_GROUPS_CHANGED"] = "contact_groups_changed";
+    Events["CONTACT_NAME_CHANGED"] = "contact_name_changed";
+    Events["CONTACT_URNS_CHANGED"] = "contact_urns_changed";
+    Events["CAMPAIGN_FIRED"] = "campaign_fired";
+    Events["CHANNEL_EVENT"] = "channel_event";
+    Events["CONTACT_LANGUAGE_CHANGED"] = "contact_language_changed";
+    Events["WEBHOOK_CALLED"] = "webhook_called";
+    Events["AIRTIME_TRANSFERRED"] = "airtime_transferred";
+    Events["CALL_STARTED"] = "call_started";
+    Events["EMAIL_SENT"] = "email_sent";
+    Events["INPUT_LABELS_ADDED"] = "input_labels_added";
+    Events["NOTE_CREATED"] = "note_created";
+    Events["TICKET_ASSIGNED"] = "ticket_assigned";
+    Events["TICKET_NOTE_ADDED"] = "ticket_note_added";
+    Events["TICKET_CLOSED"] = "ticket_closed";
+    Events["TICKET_OPENED"] = "ticket_opened";
+    Events["TICKET_REOPENED"] = "ticket_reopened";
+    Events["OPTIN_REQUESTED"] = "optin_requested";
+    Events["ERROR"] = "error";
+    Events["FAILURE"] = "failure";
+})(Events || (Events = {}));
+const renderInfoList = (singular, plural, items) => {
+    if (items.length === 1) {
+        return `${singular} **${items[0].name}**`;
+    }
+    else {
+        const list = items.map((item) => `**${item.name}**`);
+        if (list.length === 2) {
+            return `${plural} ${list.join(' and ')}`;
+        }
+        else {
+            const last = list.pop();
+            return `${plural} ${list.join(', ')}, and ${last}`;
+        }
+    }
+};
+const toTitleCase = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+const renderChannelEvent = (event) => {
+    var _a, _b;
+    if (event.event.type === 'mt_miss') {
+        return 'Missed outgoing call';
+    }
+    else if (event.event.type === 'mo_miss') {
+        return 'Missed incoming call';
+    }
+    else if (event.event.type === 'new_conversation') {
+        return 'Started conversation';
+    }
+    else if (event.channel_event_type === 'welcome_message') {
+        return 'Welcome Message Sent';
+    }
+    else if (event.event.type === 'referral') {
+        return 'Referred';
+    }
+    else if (event.event.type === 'follow') {
+        return 'Followed';
+    }
+    else if (event.event.type === 'stop_contact') {
+        return 'Stopped';
+    }
+    else if (event.event.type === 'mt_call') {
+        return 'Outgoing Phone Call';
+    }
+    else if (event.event.type == 'mo_call') {
+        return 'Incoming Phone call';
+    }
+    else if (event.event.type == 'optin') {
+        return `Opted in to **${(_a = event.event.optin) === null || _a === void 0 ? void 0 : _a.name}**`;
+    }
+    else if (event.event.type == 'optout') {
+        return `Opted out of **${(_b = event.event.optin) === null || _b === void 0 ? void 0 : _b.name}**`;
+    }
+};
+const renderFlowEvent = (event) => {
+    let verb = 'Interrupted';
+    if (event.status !== 'I') {
+        if (event.type === Events.FLOW_ENTERED) {
+            verb = 'Started';
+        }
+        else {
+            verb = 'Completed';
+        }
+    }
+    return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
+};
+const renderResultEvent = (event) => {
+    if (!event.name.startsWith('_') && event.value) {
+        return `Updated flow result **${event.name}** to **${event.value}**`;
+    }
+};
+const renderUpdateEvent = (event) => {
+    return event.value
+        ? `Updated **${event.field.name}** to **${event.value.text}**`
+        : `Cleared **${event.field.name}**`;
+};
+const renderNameChanged = (event) => {
+    return `Updated **Contact Name** to **${event.name}**`;
+};
+const renderContactURNsChanged = (event) => {
+    return `Updated **URNs** to ${oxfordFn(event.urns, (urn) => `**${urn.split(':')[1].split('?')[0]}**`)}`;
+};
+const renderEmailSent = (event) => {
+    return `Email sent to **${oxford(event.to, 'and')}** with subject **${event.subject}**`;
+};
+const renderLabelsAdded = (event) => {
+    return `Applied ${renderInfoList('label', 'labels', event.labels)}`;
+};
+export const renderTicketAction = (event, action) => {
+    if (event.created_by) {
+        return `**${getUserDisplay(event.created_by)}** ${action} a **[ticket](/ticket/all/closed/${event.ticket.uuid}/)**`;
+    }
+    return `A **[ticket](/ticket/all/closed/${event.ticket.uuid}/)** was **${action}**`;
+};
+export const renderTicketAssigned = (event) => {
+    return event.assignee
+        ? event.assignee.id === event.created_by.id
+            ? `**${getDisplayName(event.created_by)}** took this ticket`
+            : `${getDisplayName(event.created_by)} assigned this ticket to **${getDisplayName(event.assignee)}**`
+        : `**${getDisplayName(event.created_by)}** unassigned this ticket`;
+};
+export const renderContactGroupsEvent = (event) => {
+    const groupsEvent = event;
+    if (groupsEvent.groups_added) {
+        return renderInfoList('Added to group', 'Added to groups', groupsEvent.groups_added);
+    }
+    else if (groupsEvent.groups_removed) {
+        return renderInfoList('Removed from group', 'Removed from groups', groupsEvent.groups_removed);
+    }
+};
+export const renderCampaignFiredEvent = (event) => {
+    return `Campaign ${event.campaign.name}
+      ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
+      ${event.campaign_event.offset_display}
+      ${event.campaign_event.relative_to.name}`;
+};
+export const renderTicketOpened = (event) => {
+    return `${event.ticket.topic.name} ticket was opened`;
+};
+export const renderErrorMessage = (event) => {
+    return `${event.text} ${event.type === Events.FAILURE
+        ? `Run ended prematurely, check the flow design`
+        : null}`;
+};
+export const renderWebhookEvent = (event) => {
+    return event.status === 'success'
+        ? `Successfully called ${event.url}`
+        : `Failed to call ${event.url}`;
+};
+export const renderAirtimeTransferredEvent = (event) => {
+    if (parseFloat(event.actual_amount) === 0) {
+        return `Airtime transfer failed`;
+    }
+    return `Transferred **${event.actual_amount}** ${event.currency} of airtime`;
+};
+export const renderCallStartedEvent = () => {
+    return `Call Started`;
+};
+export const renderContactLanguageChangedEvent = (event) => {
+    return `Language updated to **${event.language}**`;
+};
+export const renderOptinRequested = (event) => {
+    return `Requested opt-in for ${event.optin.name}`;
+};
 export class ContactChat extends ContactStoreElement {
     static get styles() {
         return css `
@@ -35,7 +214,7 @@ export class ContactChat extends ContactStoreElement {
       }
 
       .chatbox {
-        box-shadow: 0px -5px 1rem 0rem rgba(0, 0, 0, 0.07);
+        background: #fff;
         display: flex;
         flex-direction: column;
         --textarea-min-height: 1em;
@@ -43,10 +222,6 @@ export class ContactChat extends ContactStoreElement {
         --widget-box-shadow-focused: none;
       }
 
-      .chatbox:focus-within {
-        --textarea-height: 4em;
-      }
-
       .chatbox.full {
         border-bottom-right-radius: 0 !important;
       }
@@ -81,6 +256,11 @@ export class ContactChat extends ContactStoreElement {
         --color-focus: transparent;
         --color-widget-bg-focused: transparent;
       }
+
+      .border {
+        border-top: 1px solid #f1f1f1;
+        margin: 0 1em;
+      }
     `;
     }
     constructor() {
@@ -88,39 +268,27 @@ export class ContactChat extends ContactStoreElement {
         this.contactsEndpoint = '/api/v2/contacts.json';
         this.currentNote = '';
         this.showDetails = true;
-        this.monitor = false;
         this.currentTicket = null;
         this.currentContact = null;
         this.agent = '';
-        this.refreshInterval = null;
+        this.blockFetching = false;
+        this.avatar = DEFAULT_AVATAR;
+        this.ticket = null;
+        this.lastEventTime = null;
+        this.newestEventTime = null;
+        this.refreshId = null;
+        this.polling = false;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
     }
     connectedCallback() {
         super.connectedCallback();
-        if (this.monitor) {
-            this.refreshInterval = setInterval(() => {
-                if (this.currentTicket && this.currentTicket.closed_on) {
-                    return;
-                }
-                this.refresh();
-            }, DEFAULT_REFRESH);
-        }
+        this.chat = this.shadowRoot.querySelector('temba-chat');
     }
     disconnectedCallback() {
-        if (this.refreshInterval) {
-            clearInterval(this.refreshInterval);
-        }
-    }
-    getContactHistory() {
-        return this.shadowRoot.querySelector('temba-contact-history');
-    }
-    refresh(scrollToBottom = false) {
-        const contactHistory = this.getContactHistory();
-        if (contactHistory) {
-            if (scrollToBottom) {
-                contactHistory.scrollToBottom();
-            }
-            contactHistory.refresh();
-            // super.refresh();
+        if (this.refreshId) {
+            clearInterval(this.refreshId);
         }
     }
     updated(changedProperties) {
@@ -130,6 +298,22 @@ export class ContactChat extends ContactStoreElement {
             changedProperties.has('currentContact')) {
             this.currentContact = this.data;
         }
+        if (changedProperties.has('currentContact')) {
+            this.chat = this.shadowRoot.querySelector('temba-chat');
+            this.reset();
+            this.fetchPreviousMessages();
+        }
+    }
+    reset() {
+        this.blockFetching = false;
+        this.ticket = null;
+        this.lastEventTime = null;
+        this.newestEventTime = null;
+        this.refreshId = null;
+        this.polling = false;
+    }
+    refresh() {
+        this.checkForNewMessages();
     }
     handleSend(evt) {
         const buttonName = evt.detail.name;
@@ -156,8 +340,8 @@ export class ContactChat extends ContactStoreElement {
             postJSON(`/api/v2/messages.json`, payload)
                 .then((response) => {
                 if (response.status < 400) {
+                    this.checkForNewMessages();
                     compose.reset();
-                    this.refresh(true);
                     this.fireCustomEvent(CustomEventType.MessageSent, { msg: payload });
                 }
                 else if (response.status < 500) {
@@ -201,15 +385,290 @@ export class ContactChat extends ContactStoreElement {
     `;
         return html `${contactHistoryAndChatbox}`;
     }
+    getEndpoint() {
+        return `/contact/history/${this.currentContact.uuid}/?_format=json`;
+    }
+    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;
+        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);
+        this.refreshId = setTimeout(() => {
+            this.checkForNewMessages();
+        }, window);
+    }
+    getEventMessage(event) {
+        let message = null;
+        switch (event.type) {
+            case Events.ERROR:
+            case Events.FAILURE:
+                message = {
+                    type: MessageType.Inline,
+                    text: `Error during flow: ${toTitleCase(event.text)}`
+                };
+                break;
+            case Events.TICKET_OPENED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderTicketAction(event, 'opened')
+                };
+                break;
+            case Events.TICKET_ASSIGNED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderTicketAssigned(event)
+                };
+                break;
+            case Events.TICKET_REOPENED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderTicketAction(event, 'reopened')
+                };
+                break;
+            case Events.TICKET_CLOSED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderTicketAction(event, 'closed')
+                };
+                break;
+            case Events.FLOW_ENTERED:
+            case Events.FLOW_EXITED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderFlowEvent(event)
+                };
+                break;
+            case Events.RUN_RESULT_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderResultEvent(event)
+                };
+                break;
+            case Events.CONTACT_FIELD_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderUpdateEvent(event)
+                };
+                break;
+            case Events.CONTACT_NAME_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderNameChanged(event)
+                };
+                break;
+            case Events.CONTACT_URNS_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderContactURNsChanged(event)
+                };
+                break;
+            case Events.EMAIL_SENT:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderEmailSent(event)
+                };
+                break;
+            case Events.INPUT_LABELS_ADDED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderLabelsAdded(event)
+                };
+                break;
+            case Events.CONTACT_GROUPS_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderContactGroupsEvent(event)
+                };
+                break;
+            case Events.WEBHOOK_CALLED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderWebhookEvent(event)
+                };
+                break;
+            case Events.AIRTIME_TRANSFERRED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderAirtimeTransferredEvent(event)
+                };
+                break;
+            case Events.CALL_STARTED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderCallStartedEvent()
+                };
+                break;
+            case Events.CAMPAIGN_FIRED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderCampaignFiredEvent(event)
+                };
+                break;
+            case Events.CHANNEL_EVENT:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderChannelEvent(event)
+                };
+                break;
+            case Events.CONTACT_LANGUAGE_CHANGED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderContactLanguageChangedEvent(event)
+                };
+                break;
+            case Events.OPTIN_REQUESTED:
+                message = {
+                    type: MessageType.Inline,
+                    text: renderOptinRequested(event)
+                };
+                break;
+        }
+        message.date = new Date(event.created_on);
+        return message;
+    }
+    getUserForEvent(event) {
+        let user = null;
+        if (event.created_by) {
+            const storeUser = this.store.getUser(event.created_by.email);
+            if (storeUser) {
+                user = {
+                    email: event.created_by.email,
+                    name: [storeUser.first_name, storeUser.last_name].join(' '),
+                    avatar: storeUser.avatar
+                };
+            }
+        }
+        else if (event.type === 'msg_received') {
+            user = {
+                name: this.currentContact.name
+            };
+        }
+        return user;
+    }
+    createMessages(page) {
+        let messages = page.events.map((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;
+                return {
+                    type: MessageType.Note,
+                    id: event.created_on + event.type,
+                    user: this.getUserForEvent(ticketEvent),
+                    date: new Date(ticketEvent.created_on),
+                    text: ticketEvent.note
+                };
+            }
+            if (event.type === 'msg_created' || event.type === 'msg_received') {
+                const msgEvent = event;
+                return {
+                    type: msgEvent.type === 'msg_created' ? 'msg_out' : 'msg_in',
+                    id: msgEvent.msg.id + '',
+                    user: this.getUserForEvent(msgEvent),
+                    date: new Date(msgEvent.created_on),
+                    attachments: msgEvent.msg.attachments,
+                    text: msgEvent.msg.text,
+                    sendError: msgEvent.status === 'E' || msgEvent.status === 'F',
+                    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.failed_reason_display
+                        ? html `
+                    <div
+                      style="margin-top:0.2em;margin-right: 0.5em;min-width:10em;max-width:15em;color:var(--color-error);font-size:0.9em"
+                    >
+                      ${msgEvent.failed_reason_display}
+                    </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> `
+                };
+            }
+            else {
+                return this.getEventMessage(event);
+            }
+        });
+        // remove any messages we don't recognize
+        messages = messages.filter((msg) => !!msg);
+        return messages;
+    }
+    checkForNewMessages() {
+        var _a;
+        // we are already working on it
+        if (this.polling) {
+            return;
+        }
+        const chat = this.chat;
+        const contactChat = this;
+        if (this.currentContact && this.newestEventTime) {
+            this.polling = true;
+            const endpoint = this.getEndpoint();
+            fetchContactHistory(false, endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, null, this.newestEventTime).then((page) => {
+                this.lastEventTime = page.next_before;
+                const messages = this.createMessages(page);
+                if (messages.length === 0) {
+                    contactChat.blockFetching = true;
+                }
+                messages.reverse();
+                chat.addMessages(messages, null, true);
+                this.polling = false;
+                this.scheduleRefresh();
+            });
+        }
+    }
+    fetchPreviousMessages() {
+        var _a;
+        const chat = this.chat;
+        const contactChat = this;
+        if (!chat || chat.fetching || contactChat.blockFetching) {
+            return;
+        }
+        chat.fetching = true;
+        if (this.currentContact) {
+            const endpoint = this.getEndpoint();
+            fetchContactHistory(false, endpoint, (_a = this.currentTicket) === null || _a === void 0 ? void 0 : _a.uuid, this.lastEventTime).then((page) => {
+                this.lastEventTime = page.next_before;
+                const messages = this.createMessages(page);
+                messages.reverse();
+                if (messages.length === 0) {
+                    contactChat.blockFetching = true;
+                }
+                chat.addMessages(messages);
+                this.scheduleRefresh();
+            });
+        }
+    }
+    fetchComplete() {
+        this.chat.fetching = false;
+    }
     getTembaContactHistory() {
-        return html ` <temba-contact-history
-      .uuid=${this.currentContact.uuid}
-      .contact=${this.currentContact}
-      .ticket=${this.currentTicket ? this.currentTicket.uuid : null}
-      .endDate=${this.currentTicket ? this.currentTicket.closed_on : null}
-      .agent=${this.agent}
-    >
-    </temba-contact-history>`;
+        return html `<temba-chat
+      @temba-scroll-threshold=${this.fetchPreviousMessages}
+      @temba-fetch-complete=${this.fetchComplete}
+      avatar=${this.avatar}
+      agent
+    ></temba-chat>`;
     }
     getTembaChatbox() {
         if (this.currentTicket) {
@@ -237,16 +696,18 @@ export class ContactChat extends ContactStoreElement {
         }
     }
     getChatbox() {
-        return html `<div class="chatbox">
-      <temba-compose
-        chatbox
-        attachments
-        counter
-        button
-        @temba-button-clicked=${this.handleSend.bind(this)}
-      >
-      </temba-compose>
-    </div>`;
+        return html `<div class="border"></div>
+      <div class="chatbox">
+        <temba-compose
+          chatbox
+          attachments
+          counter
+          button
+          autogrow
+          @temba-button-clicked=${this.handleSend.bind(this)}
+        >
+        </temba-compose>
+      </div>`;
     }
 }
 __decorate([
@@ -261,9 +722,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ContactChat.prototype, "showDetails", void 0);
-__decorate([
-    property({ type: Boolean })
-], ContactChat.prototype, "monitor", void 0);
 __decorate([
     property({ type: Object })
 ], ContactChat.prototype, "currentTicket", void 0);
@@ -273,4 +731,10 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ContactChat.prototype, "agent", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactChat.prototype, "blockFetching", void 0);
+__decorate([
+    property({ type: String })
+], ContactChat.prototype, "avatar", void 0);
 //# sourceMappingURL=ContactChat.js.map