@nyaruka/temba-components 0.91.5 → 0.92.0

package/out-tsc/src/webchat/WebChat.js

@@ -4,30 +4,24 @@ import { LitElement, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { getCookie, setCookie } from '../utils';
 import { DEFAULT_AVATAR } from './assets';
+import { MessageType } from '../chat/Chat';
 var ChatStatus;
 (function (ChatStatus) {
     ChatStatus["DISCONNECTED"] = "disconnected";
     ChatStatus["CONNECTING"] = "connecting";
     ChatStatus["CONNECTED"] = "connected";
 })(ChatStatus || (ChatStatus = {}));
-// how long of a window to show time between batches
-const BATCH_TIME_WINDOW = 30 * 60 * 1000;
-const SCROLL_FETCH_BUFFER = 0.05;
-const MIN_FETCH_TIME = 250;
-const TIME_FORMAT = { hour: 'numeric', minute: '2-digit' };
-const DAY_FORMAT = {
-    weekday: undefined,
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-};
-const VERBOSE_FORMAT = {
-    weekday: undefined,
-    year: undefined,
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit'
+const sockToChat = function (msg) {
+    const type = msg.msg_in ? MessageType.MsgIn : MessageType.MsgOut;
+    const msgContent = msg.msg_in || msg.msg_out;
+    return {
+        id: msgContent.id,
+        type,
+        text: msgContent.text,
+        date: new Date(msgContent.time),
+        user: msgContent.user,
+        attachments: msgContent.attachments
+    };
 };
 export class WebChat extends LitElement {
     static get styles() {
@@ -108,6 +102,11 @@ export class WebChat extends LitElement {
         background: #fff;
       }
 
+      .border {
+        border-top: 1px solid #e9e9e9;
+        margin: 0 1em;
+      }
+
       .avatar {
         margin-top: 0.6em;
         margin-right: 0.6em;
@@ -180,6 +179,7 @@ export class WebChat extends LitElement {
       }
 
       .chat {
+        height: 40rem;
         width: 28rem;
         border-radius: var(--curvature);
         overflow: hidden;
@@ -192,6 +192,9 @@ export class WebChat extends LitElement {
         transform: scale(0.9);
         pointer-events: none;
         opacity: 0;
+        display: flex;
+        flex-direction: column;
+        background: #fff;
       }
 
       .chat.open {
@@ -201,61 +204,6 @@ export class WebChat extends LitElement {
         pointer-events: initial;
       }
 
-      .messages {
-        background: #fff;
-      }
-
-      .scroll {
-        height: 40rem;
-        max-height: 60vh;
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-        overflow-scrolling: touch;
-        padding: 1em 1em 0 1em;
-        display: flex;
-        flex-direction: column-reverse;
-      }
-
-      .messages:before {
-        content: '';
-        background:     /* Shadow TOP */ radial-gradient(
-            farthest-side at 50% 0,
-            rgba(0, 0, 0, 0.2),
-            rgba(0, 0, 0, 0)
-          )
-          center top;
-        height: 10px;
-        display: block;
-        position: absolute;
-        width: 28rem;
-        transition: opacity var(--toggle-speed) ease-out;
-      }
-
-      .messages:after {
-        content: '';
-        background:       /* Shadow BOTTOM */ radial-gradient(
-            farthest-side at 50% 100%,
-            rgba(0, 0, 0, 0.2),
-            rgba(0, 0, 0, 0)
-          )
-          center bottom;
-        height: 10px;
-        display: block;
-        position: absolute;
-        margin-top: -10px;
-        width: 28rem;
-        margin-right: 5em;
-        transition: opacity var(--toggle-speed) ease-out;
-      }
-
-      .scroll-at-top .messages:before {
-        opacity: 0;
-      }
-
-      .scroll-at-bottom .messages:after {
-        opacity: 0;
-      }
-
       .input {
         border: none;
         flex-grow: 1;
@@ -337,20 +285,22 @@ export class WebChat extends LitElement {
         this.status = ChatStatus.DISCONNECTED;
         // is the chat widget open
         this.open = false;
-        this.fetching = false;
         this.hasPendingText = false;
-        this.hideTopScroll = true;
-        this.hideBottomScroll = true;
         this.blockHistoryFetching = false;
-        this.msgMap = new Map();
         this.newMessageCount = 0;
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.chat = this.shadowRoot.querySelector('temba-chat');
+        const lightbox = document.createElement('temba-lightbox');
+        document.querySelector('body').appendChild(lightbox);
+    }
     handleReconnect() {
         this.openSocket();
     }
-    sendSockMessage(message) {
-        console.log('MO', message);
-        this.sock.send(JSON.stringify(message));
+    sendSockMessage(cmd) {
+        console.log('out', cmd);
+        this.sock.send(JSON.stringify(cmd));
     }
     openSocket() {
         if (this.status !== ChatStatus.DISCONNECTED) {
@@ -358,155 +308,89 @@ export class WebChat extends LitElement {
         }
         this.status = ChatStatus.CONNECTING;
         const webChat = this;
-        let url = `wss://localhost.textit.com/connect/${this.channel}/`;
+        let url = `wss://localhost.textit.com/wc/connect/${this.channel}/`;
         if (this.urn) {
             url = `${url}?chat_id=${this.urn}`;
         }
         const sock = new WebSocket(url);
         this.sock = sock;
-        this.sock.onclose = function (event) {
-            console.log('Socket closed', event);
+        this.sock.onclose = function () {
             webChat.status = ChatStatus.DISCONNECTED;
         };
-        this.sock.onopen = function (event) {
-            console.log('Socket opened', event);
+        this.sock.onopen = function () {
+            webChat.beforeTime = new Date().toISOString();
             webChat.status = ChatStatus.CONNECTED;
             webChat.urn = getCookie('temba-chat-urn');
-            const startChat = { type: 'start_chat' };
+            const cmd = { type: 'start_chat' };
             if (webChat.urn) {
-                startChat['chat_id'] = webChat.urn;
+                cmd.chat_id = webChat.urn;
             }
-            webChat.sendSockMessage(startChat);
+            webChat.sendSockMessage(cmd);
         };
         this.sock.onmessage = function (event) {
             webChat.status = ChatStatus.CONNECTED;
             const msg = JSON.parse(event.data);
-            console.log('MT', msg);
+            console.log('in', msg);
             if (msg.type === 'chat_started') {
-                if (webChat.urn !== msg.chat_id) {
+                const response = msg;
+                if (webChat.urn !== response.chat_id) {
                     webChat.messageGroups = [];
                 }
-                webChat.urn = msg.chat_id;
-                setCookie('temba-chat-urn', msg.chat_id);
+                webChat.urn = response.chat_id;
+                setCookie('temba-chat-urn', response.chat_id);
                 webChat.requestUpdate('messageGroups');
             }
             else if (msg.type === 'chat_resumed') {
-                webChat.oldestMessageDate = new Date(msg.time);
-                webChat.urn = msg.chat_id;
+                const response = msg;
+                webChat.urn = response.chat_id;
                 webChat.fetchPreviousMessages();
             }
-            else if (msg.type === 'msg_out') {
-                webChat.addMessage(msg);
-                webChat.insertGroups(webChat.groupMessages([msg.msg_id]), true);
+            else if (msg.type === 'chat_out') {
+                const response = msg;
+                webChat.chat.addMessages([sockToChat(response)], null, true);
+                // ack receipt
+                const ack = { type: 'ack_chat', msg_id: response.msg_out.id };
+                webChat.sendSockMessage(ack);
             }
             else if (msg.type === 'history') {
                 webChat.handleHistoryResponse(msg);
             }
         };
-    }
-    isSameGroup(msg1, msg2) {
-        var _a, _b;
-        if (msg1 && msg2) {
-            return (msg1.origin === msg2.origin &&
-                ((_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.timeAsDate.getTime() - msg2.timeAsDate.getTime()) <
-                    BATCH_TIME_WINDOW);
-        }
-        return false;
-    }
-    insertGroups(newGroups, append = false) {
-        newGroups.reverse();
-        for (const newGroup of newGroups) {
-            // see if our new group belongs to the most recent group
-            const group = this.messageGroups[append ? 0 : this.messageGroups.length - 1];
-            if (group) {
-                const lastMsgId = group[group.length - 1];
-                const lastMsg = this.msgMap.get(lastMsgId);
-                const newMsg = this.msgMap.get(newGroup[0]);
-                // if our message belongs to the previous group, in we go
-                if (this.isSameGroup(lastMsg, newMsg)) {
-                    group.push(...newGroup);
-                }
-                else {
-                    // otherwise, just add our entire group as a new one
-                    if (append) {
-                        this.messageGroups.splice(0, 0, newGroup);
-                    }
-                    else {
-                        this.messageGroups.push(newGroup);
-                    }
-                }
-            }
-            else {
-                if (append) {
-                    this.messageGroups.splice(0, 0, newGroup);
-                }
-                else {
-                    this.messageGroups.push(newGroup);
-                }
-            }
-        }
-        this.requestUpdate('messageGroups');
-    }
-    groupMessages(msgIds) {
-        // group our messages by origin and user
-        const groups = [];
-        let lastGroup = [];
-        let lastMsg = null;
-        for (const msgId of msgIds) {
-            const msg = this.msgMap.get(msgId);
-            if (!this.isSameGroup(msg, lastMsg)) {
-                lastGroup = [];
-                groups.push(lastGroup);
-            }
-            lastGroup.push(msgId);
-            lastMsg = msg;
-        }
-        return groups;
+        this.sock.onerror = function () {
+            webChat.status = ChatStatus.DISCONNECTED;
+        };
     }
     fetchPreviousMessages() {
         if (!this.blockHistoryFetching) {
+            this.fetchRequested = new Date();
             this.blockHistoryFetching = true;
-            this.fetching = true;
-            const getHistoryMsg = { type: 'get_history' };
-            if (this.oldestMessageDate) {
-                getHistoryMsg['before'] = this.oldestMessageDate.toISOString();
-            }
+            this.chat.fetching = true;
+            const cmd = {
+                type: 'get_history',
+                before: this.beforeTime
+            };
             this.fetchRequested = new Date();
-            this.sendSockMessage(getHistoryMsg);
+            this.sendSockMessage(cmd);
         }
     }
-    handleHistoryResponse(msg) {
-        const elapsed = new Date().getTime() - this.fetchRequested.getTime();
-        window.setTimeout(() => {
-            this.fetching = false;
-            // block of historical messages
-            const msgs = msg.history.reverse();
-            // first add messages to the map
-            const newMessages = [];
-            for (const m of msgs) {
-                if (this.addMessage(m)) {
-                    newMessages.push(m.msg_id);
-                }
+    handleHistoryResponse(response) {
+        const messages = response.history.reverse();
+        if (messages.length > 0) {
+            const oldestMessage = messages[0];
+            if (oldestMessage['msg_in']) {
+                const msgIn = oldestMessage.msg_in;
+                this.beforeTime = msgIn.time;
             }
-            if (newMessages.length === 0) {
-                return;
+            else if (oldestMessage['msg_out']) {
+                const msgOut = oldestMessage.msg_out;
+                this.beforeTime = msgOut.time;
             }
-            this.insertGroups(this.groupMessages(newMessages));
-            const ele = this.shadowRoot.querySelector('.scroll');
-            const prevTop = ele.scrollTop;
-            window.setTimeout(() => {
-                ele.scrollTop = prevTop;
-                this.blockHistoryFetching = false;
-            }, 100);
-        }, 
-        // if it's the first load don't wait, otherwise wait a minimum amount of time
-        this.messageGroups.length === 0
-            ? 0
-            : Math.max(0, MIN_FETCH_TIME - elapsed));
+        }
+        // convert messages to chat messages
+        this.chat.addMessages(messages.map(sockToChat), this.fetchRequested);
     }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
+    fetchComplete() {
+        this.blockHistoryFetching = false;
     }
     focusInput() {
         const input = this.shadowRoot.querySelector('.input');
@@ -517,11 +401,6 @@ export class WebChat extends LitElement {
     updated(changed) {
         super.updated(changed);
         if (this.open && changed.has('open') && changed.get('open') !== undefined) {
-            const scroll = this.shadowRoot.querySelector('.scroll');
-            const hasScroll = scroll.scrollHeight > scroll.clientHeight;
-            this.hideBottomScroll = true;
-            this.hideTopScroll = !hasScroll;
-            this.scrollToBottom();
             if (this.status === ChatStatus.DISCONNECTED) {
                 this.openSocket();
             }
@@ -532,22 +411,6 @@ export class WebChat extends LitElement {
             }
         }
     }
-    addMessage(msg) {
-        var _a;
-        if (msg.time && !msg.timeAsDate) {
-            msg.timeAsDate = new Date(msg.time);
-        }
-        if (!this.oldestMessageDate ||
-            msg.timeAsDate.getTime() < this.oldestMessageDate.getTime()) {
-            this.oldestMessageDate = msg.timeAsDate;
-        }
-        const isNew = !this.msgMap.has(msg.msg_id);
-        this.msgMap.set(msg.msg_id, msg);
-        if ((_a = msg.user) === null || _a === void 0 ? void 0 : _a.avatar) {
-            this.activeUserAvatar = msg.user.avatar;
-        }
-        return isNew;
-    }
     openChat() {
         this.open = true;
     }
@@ -563,109 +426,17 @@ export class WebChat extends LitElement {
             const text = input.value;
             input.value = '';
             const msg = {
-                msg_id: `pending-${this.newMessageCount++}`,
+                // msg_id: `pending-${this.newMessageCount++}`,
                 type: 'send_msg',
-                text: text,
-                time: new Date().toISOString()
+                text: text
+                // time: new Date().toISOString()
             };
-            this.addMessage(msg);
-            this.insertGroups(this.groupMessages([msg.msg_id]), true);
             this.sendSockMessage(msg);
+            const date = new Date();
+            this.chat.addMessages([{ type: MessageType.MsgIn, text, date }], date, true);
             this.hasPendingText = input.value.length > 0;
         }
     }
-    scrollToBottom() {
-        const scroll = this.shadowRoot.querySelector('.scroll');
-        if (scroll) {
-            scroll.scrollTop = scroll.scrollHeight;
-            this.hideBottomScroll = true;
-        }
-    }
-    renderMessageGroup(msgIds, idx, groups) {
-        var _a, _b;
-        const today = new Date();
-        let prevMsg;
-        if (idx > 0) {
-            const lastGroup = groups[idx - 1];
-            if (lastGroup && lastGroup.length > 0) {
-                prevMsg = this.msgMap.get(lastGroup[0]);
-            }
-        }
-        const currentMsg = this.msgMap.get(msgIds[msgIds.length - 1]);
-        let timeDisplay = null;
-        if (prevMsg &&
-            !this.isSameGroup(prevMsg, currentMsg) &&
-            prevMsg.timeAsDate.getTime() - currentMsg.timeAsDate.getTime() >
-                BATCH_TIME_WINDOW) {
-            const showDay = !prevMsg ||
-                prevMsg.timeAsDate.getDate() !== currentMsg.timeAsDate.getDate();
-            if (showDay) {
-                timeDisplay = html `<div class="time">
-          ${prevMsg.timeAsDate.toLocaleDateString(undefined, DAY_FORMAT)}
-        </div>`;
-            }
-            else {
-                if (prevMsg.timeAsDate.getDate() !== today.getDate()) {
-                    timeDisplay = html `<div class="time">
-            ${prevMsg.timeAsDate.toLocaleTimeString(undefined, VERBOSE_FORMAT)}
-          </div>`;
-                }
-                else {
-                    timeDisplay = html `<div class="time">
-            ${prevMsg.timeAsDate.toLocaleTimeString(undefined, TIME_FORMAT)}
-          </div>`;
-                }
-            }
-        }
-        const blockTime = new Date(this.msgMap.get(msgIds[msgIds.length - 1]).time);
-        const message = this.msgMap.get(msgIds[0]);
-        const incoming = !message.origin;
-        const avatar = (_a = message.user) === null || _a === void 0 ? void 0 : _a.avatar;
-        const name = (_b = message.user) === null || _b === void 0 ? void 0 : _b.name;
-        return html ` <div
-      class="block  ${incoming ? 'incoming' : 'outgoing'} ${idx === 0
-            ? 'first'
-            : ''}"
-      title="${blockTime.toLocaleTimeString(undefined, VERBOSE_FORMAT)}"
-    >
-      <div class="row">
-        ${!incoming
-            ? html `
-              <div
-                class="avatar"
-                style="background: center / contain no-repeat url(${avatar ||
-                DEFAULT_AVATAR})"
-              ></div>
-            `
-            : null}
-
-        <div class="bubble">
-          ${!incoming ? html `<div class="name">${name}</div>` : null}
-          ${msgIds.map((msgId) => html `<div class="message">${this.msgMap.get(msgId).text}</div>
-                <!--div style="font-size:10px">
-                  ${this.msgMap
-            .get(msgId)
-            .timeAsDate.toLocaleDateString(undefined, VERBOSE_FORMAT)}
-                </div-->`)}
-        </div>
-      </div>
-      ${timeDisplay}
-    </div>`;
-    }
-    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 (this.blockHistoryFetching) {
-            return;
-        }
-        if (scrollPct < SCROLL_FETCH_BUFFER) {
-            this.fetchPreviousMessages();
-        }
-    }
     handleClickInputPanel(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -677,13 +448,7 @@ export class WebChat extends LitElement {
     }
     render() {
         return html `
-      <div
-        class="chat ${this.status} ${this.hideTopScroll
-            ? 'scroll-at-top'
-            : ''} ${this.hideBottomScroll ? 'scroll-at-bottom' : ''} ${this.open
-            ? 'open'
-            : ''}"
-      >
+      <div class="chat ${this.status} ${this.open ? 'open' : ''}">
         <div class="header">
           <slot name="header">${this.urn ? this.urn : 'Chat'}</slot>
           <temba-icon
@@ -693,17 +458,11 @@ export class WebChat extends LitElement {
             @click=${this.toggleChat}
           ></temba-icon>
         </div>
-        <div class="messages">
-          <div class="scroll" @scroll=${this.handleScroll}>
-            ${this.messageGroups
-            ? this.messageGroups.map((msgGroup, idx, groups) => html `${this.renderMessageGroup(msgGroup, idx, groups)}`)
-            : null}
 
-            <temba-loading
-              class="${!this.fetching ? 'hidden' : ''}"
-            ></temba-loading>
-          </div>
-        </div>
+        <temba-chat
+          @temba-scroll-threshold=${this.fetchPreviousMessages}
+          @temba-fetch-complete=${this.fetchComplete}
+        ></temba-chat>
 
         ${this.status === ChatStatus.DISCONNECTED
             ? html `<div class="notice">
@@ -721,28 +480,29 @@ export class WebChat extends LitElement {
             </div>`
             : null}
         ${this.status === ChatStatus.CONNECTED
-            ? html ` <div
-              class="row input-panel ${this.hasPendingText ? 'pending' : ''}"
-              @click=${this.handleClickInputPanel}
-            >
-              <input
-                class="input ${this.status === ChatStatus.CONNECTED
+            ? html ` <div class="border"></div>
+              <div
+                class="row input-panel ${this.hasPendingText ? 'pending' : ''}"
+                @click=${this.handleClickInputPanel}
+              >
+                <input
+                  class="input ${this.status === ChatStatus.CONNECTED
                 ? 'active'
                 : 'inactive'}"
-                type="text"
-                placeholder="Message.."
-                ?disabled=${this.status !== ChatStatus.CONNECTED}
-                @keydown=${this.handleKeyUp}
-              />
-              <temba-icon
-                tabindex="1"
-                class="send-icon"
-                name="send"
-                size="1"
-                clickable
-                @click=${this.sendPendingMessage}
-              ></temba-icon>
-            </div>`
+                  type="text"
+                  placeholder="Message.."
+                  ?disabled=${this.status !== ChatStatus.CONNECTED}
+                  @keydown=${this.handleKeyUp}
+                />
+                <temba-icon
+                  tabindex="1"
+                  class="send-icon"
+                  name="send"
+                  size="1"
+                  clickable
+                  @click=${this.sendPendingMessage}
+                ></temba-icon>
+              </div>`
             : null}
       </div>
 
@@ -771,25 +531,16 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], WebChat.prototype, "open", void 0);
-__decorate([
-    property({ type: Boolean })
-], WebChat.prototype, "fetching", void 0);
 __decorate([
     property({ type: Boolean })
 ], WebChat.prototype, "hasPendingText", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], WebChat.prototype, "hideTopScroll", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], WebChat.prototype, "hideBottomScroll", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false })
-], WebChat.prototype, "blockHistoryFetching", void 0);
 __decorate([
     property({ type: String })
 ], WebChat.prototype, "host", void 0);
 __decorate([
     property({ type: String })
 ], WebChat.prototype, "activeUserAvatar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: false })
+], WebChat.prototype, "blockHistoryFetching", void 0);
 //# sourceMappingURL=WebChat.js.map