@nyaruka/temba-components 0.26.1 → 0.26.2

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"e477aebd.js",revision:"62def47eb1a57e5802a8fb9d83259307"},{url:"templates/components-body.html",revision:"9640c1247f2893b595a5d959c133f24a"},{url:"templates/components-head.html",revision:"30ba9439aa2d34c688cae95d4095b234"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let r=Promise.resolve();return t[e]||(r=new Promise(async r=>{if("document"in self){const t=document.createElement("script");t.src=e,document.head.appendChild(t),t.onload=r}else importScripts(e),r()})),r.then(()=>{if(!t[e])throw new Error(`Module ${e} didn’t register its module`);return t[e]})},r=(r,t)=>{Promise.all(r.map(e)).then(e=>t(1===e.length?e[0]:e))},t={require:Promise.resolve(r)};self.define=(r,s,o)=>{t[r]||(t[r]=Promise.resolve().then(()=>{let t={};const n={uri:location.origin+r.slice(1)};return Promise.all(s.map(r=>{switch(r){case"exports":return t;case"module":return n;default:return e(r)}})).then(e=>{const r=o(...e);return t.default||(t.default=r),t})}))}}define("./sw.js",["./workbox-80efdfd1"],(function(e){"use strict";e.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"4f80c187.js",revision:"d60c39cb449ca5ab882bf01302e8e733"},{url:"templates/components-body.html",revision:"8f833c9bc89413160bce470ea2ba670d"},{url:"templates/components-head.html",revision:"562f5b9ecb905279fe16b0b5e071507b"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../tmp/d329ec7cda7baeffdb5809006c148d63/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"e477aebd.js\",\n    \"revision\": \"62def47eb1a57e5802a8fb9d83259307\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"9640c1247f2893b595a5d959c133f24a\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"30ba9439aa2d34c688cae95d4095b234\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../../../../tmp/2302fdcdc06aab7d06d90a0b66b9dc19/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/home/runner/work/temba-components/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"4f80c187.js\",\n    \"revision\": \"d60c39cb449ca5ab882bf01302e8e733\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"8f833c9bc89413160bce470ea2ba670d\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"562f5b9ecb905279fe16b0b5e071507b\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"k1BAmCoC,CAClC,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,qCAEb,oBAE2B,IAAIA,kBAAgCC,0BAA2C,iCAG/E,iBAAkB,IAAIC,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/e477aebd.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.26.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/4f80c187.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.26.2"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/e477aebd.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/4f80c187.js" crossorigin="anonymous">

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

@@ -13,6 +13,7 @@ export class ContactChat extends RapidElement {
         this.currentChat = '';
         this.currentNote = '';
         this.showDetails = true;
+        this.toolbar = false;
         this.monitor = false;
         this.currentTicket = null;
         this.currentContact = null;
@@ -22,35 +23,36 @@ export class ContactChat extends RapidElement {
     }
     static get styles() {
         return css `
-      :host {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-        height: 100%;
-        border-radius: var(--curvature);
-
-        flex-grow: 1;
-        width: 100%;
-        display: block;
-        background: #f2f2f2;
-        overflow: hidden;
-      }
-
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
       }
 
       .left-pane.open {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);
         z-index: 1000;
       }
 
+      :host {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        min-height: 0;
+        border-radius: var(--curvature);
+      }
+
       .chat-wrapper {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
-        height: 100%;
         overflow: hidden;
+        min-height: 0;
+      }
+
+      temba-contact-history {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
       }
 
       .chatbox {
@@ -61,6 +63,11 @@ export class ContactChat extends RapidElement {
         flex-direction: column;
         z-index: 3;
         border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .chatbox.full {
+        border-bottom-right-radius: 0 !important;
       }
 
       .closed-footer {
@@ -268,14 +275,13 @@ export class ContactChat extends RapidElement {
     }
     render() {
         return html `
-      <div style="display: flex; height: 100%;">
-        <div
-          style="flex-grow: 1; margin-right: 0em;"
-          class="left-pane  ${this.showDetails ? 'open' : ''}"
-        >
-          <div class="chat-wrapper">
-            ${this.currentContact
-            ? html ` <temba-contact-history
+      <div
+        style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
+        class="left-pane  ${this.showDetails ? 'open' : ''}"
+      >
+        <div class="chat-wrapper">
+          ${this.currentContact
+            ? html `<temba-contact-history
                     .uuid=${this.currentContact.uuid}
                     .contact=${this.currentContact}
                     .ticket=${this.currentTicket ? this.currentTicket.uuid : null}
@@ -291,7 +297,9 @@ export class ContactChat extends RapidElement {
                             @click=${this.handleReopen}
                           ></temba-button>
                         </div>`
-                : html ` <div class="chatbox">
+                : html ` <div
+                          class="chatbox ${this.toolbar ? 'full' : ''}"
+                        >
                           <temba-completion
                             @change=${this.handleChatChange}
                             .value=${this.currentChat}
@@ -317,76 +325,78 @@ export class ContactChat extends RapidElement {
                         </div>`}
                   </div>`
             : null}
-          </div>
         </div>
-        ${this.currentContact
-            ? html `<temba-contact-details
-              style="z-index: 10"
-              class="${this.showDetails ? '' : 'hidden'}"
-              showGroups="true"
-              .visible=${this.showDetails}
-              .ticket=${this.currentTicket}
-              .contact=${this.currentContact}
-            ></temba-contact-details>`
-            : null}
+      </div>
+
+      ${this.toolbar
+            ? html `${this.currentContact
+                ? html `<temba-contact-details
+                  style="z-index: 10"
+                  class="${this.showDetails ? '' : 'hidden'}"
+                  showGroups="true"
+                  .visible=${this.showDetails}
+                  .ticket=${this.currentTicket}
+                  .contact=${this.currentContact}
+                ></temba-contact-details>`
+                : null}
 
         <div class="toolbar ${this.showDetails ? '' : 'closed'}">
           ${this.currentContact
-            ? html `
-                <temba-tip
-                  style="margin-top:5px"
-                  text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-                  position="left"
-                  hideOnChange
-                >
-                  <temba-icon
-                    id="details-button"
-                    name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
-                    @click="${this.handleDetailSlider}"
-                    clickable
-                    animatechange="spin"
-                  ></temba-icon>
-                </temba-tip>
+                ? html `
+                  <temba-tip
+                    style="margin-top:5px"
+                    text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
+                    position="left"
+                    hideOnChange
+                  >
+                    <temba-icon
+                      id="details-button"
+                      name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
+                      @click="${this.handleDetailSlider}"
+                      clickable
+                      animatechange="spin"
+                    ></temba-icon>
+                  </temba-tip>
 
-                ${this.currentTicket
-                ? html `<temba-tip
-                        style="margin-top:5px"
-                        text="Assign"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="assign-button"
-                          name="user"
-                          @click="${() => {
-                    const modax = this.shadowRoot.getElementById('assign-dialog');
-                    modax.open = true;
-                }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>
-                      <temba-tip
-                        style="margin-top:5px"
-                        text="Add Note"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="add-note-button"
-                          name="edit"
-                          @click="${() => {
-                    const note = this.shadowRoot.getElementById('note-dialog');
-                    note.open = true;
-                }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>`
+                  ${this.currentTicket
+                    ? html `<temba-tip
+                          style="margin-top:5px"
+                          text="Assign"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="assign-button"
+                            name="user"
+                            @click="${() => {
+                        const modax = this.shadowRoot.getElementById('assign-dialog');
+                        modax.open = true;
+                    }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>
+                        <temba-tip
+                          style="margin-top:5px"
+                          text="Add Note"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="add-note-button"
+                            name="edit"
+                            @click="${() => {
+                        const note = this.shadowRoot.getElementById('note-dialog');
+                        note.open = true;
+                    }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>`
+                    : null}
+                `
                 : null}
-              `
-            : null}
         </div>
       </div>
 
       ${this.currentTicket
-            ? html `<temba-modax
+                ? html `<temba-modax
               header="Add Note"
               id="note-dialog"
               @temba-submitted=${this.refresh}
@@ -398,6 +408,7 @@ export class ContactChat extends RapidElement {
               @temba-submitted=${this.handleTicketAssigned}
               endpoint="/ticket/assign/${this.currentTicket.uuid}/"
             /></temba-modax>`
+                : null}`
             : null}
     `;
     }
@@ -420,6 +431,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ContactChat.prototype, "showDetails", void 0);
+__decorate([
+    property({ type: Boolean })
+], ContactChat.prototype, "toolbar", void 0);
 __decorate([
     property({ type: Boolean })
 ], ContactChat.prototype, "monitor", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { fetchContact } from './helpers';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends RapidElement {\n  public static get styles() {\n    return css`\n      :host {\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n\n        height: 100%;\n        border-radius: var(--curvature);\n\n        flex-grow: 1;\n        width: 100%;\n        display: block;\n        background: #f2f2f2;\n        overflow: hidden;\n      }\n\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);\n        z-index: 1000;\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'contact' })\n  contactUUID: string;\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // we were provided a uuid, fetch our contact details\n    if (changedProperties.has('contactUUID') && this.contactUUID) {\n      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(\n        contact => {\n          this.currentContact = contact;\n        }\n      );\n    }\n\n    // if we don't have an endpoint infer one\n    if (changedProperties.has('currentContact')) {\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div style=\"display: flex; height: 100%;\">\n        <div\n          style=\"flex-grow: 1; margin-right: 0em;\"\n          class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n        >\n          <div class=\"chat-wrapper\">\n            ${this.currentContact\n              ? html` <temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div class=\"chatbox\">\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n              : null}\n          </div>\n        </div>\n        ${this.currentContact\n          ? html`<temba-contact-details\n              style=\"z-index: 10\"\n              class=\"${this.showDetails ? '' : 'hidden'}\"\n              showGroups=\"true\"\n              .visible=${this.showDetails}\n              .ticket=${this.currentTicket}\n              .contact=${this.currentContact}\n            ></temba-contact-details>`\n          : null}\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${this.currentContact\n            ? html`\n                <temba-tip\n                  style=\"margin-top:5px\"\n                  text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                  position=\"left\"\n                  hideOnChange\n                >\n                  <temba-icon\n                    id=\"details-button\"\n                    name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                    @click=\"${this.handleDetailSlider}\"\n                    clickable\n                    animatechange=\"spin\"\n                  ></temba-icon>\n                </temba-tip>\n\n                ${this.currentTicket\n                  ? html`<temba-tip\n                        style=\"margin-top:5px\"\n                        text=\"Assign\"\n                        position=\"left\"\n                      >\n                        <temba-icon\n                          id=\"assign-button\"\n                          name=\"user\"\n                          @click=\"${() => {\n                            const modax = this.shadowRoot.getElementById(\n                              'assign-dialog'\n                            ) as Modax;\n                            modax.open = true;\n                          }}\"\n                          clickable\n                        ></temba-icon>\n                      </temba-tip>\n                      <temba-tip\n                        style=\"margin-top:5px\"\n                        text=\"Add Note\"\n                        position=\"left\"\n                      >\n                        <temba-icon\n                          id=\"add-note-button\"\n                          name=\"edit\"\n                          @click=\"${() => {\n                            const note = this.shadowRoot.getElementById(\n                              'note-dialog'\n                            ) as Modax;\n                            note.open = true;\n                          }}\"\n                          clickable\n                        ></temba-icon>\n                      </temba-tip>`\n                  : null}\n              `\n            : null}\n        </div>\n      </div>\n\n      ${this.currentTicket\n        ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n        : null}\n    `;\n  }\n}\n"]}
+{"version":3,"file":"ContactChat.js","sourceRoot":"","sources":["../../../src/contacts/ContactChat.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { Contact, CustomEventType, Ticket } from '../interfaces';\nimport { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { Completion } from '../completion/Completion';\nimport { ContactHistory } from './ContactHistory';\nimport { Modax } from '../dialog/Modax';\nimport { fetchContact } from './helpers';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class ContactChat extends RapidElement {\n  public static get styles() {\n    return css`\n      .left-pane {\n        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);\n        transition: box-shadow 600ms linear;\n      }\n\n      .left-pane.open {\n        z-index: 1000;\n      }\n\n      :host {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: row;\n        min-height: 0;\n        border-radius: var(--curvature);\n      }\n\n      .chat-wrapper {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        overflow: hidden;\n        min-height: 0;\n      }\n\n      temba-contact-history {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n      }\n\n      .chatbox {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        z-index: 3;\n        border-bottom-left-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n      }\n\n      .chatbox.full {\n        border-bottom-right-radius: 0 !important;\n      }\n\n      .closed-footer {\n        padding: 1em;\n        background: #f2f2f2;\n        border-top: 3px solid #e1e1e1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n      }\n\n      temba-completion {\n        --textarea-height: 2.5em;\n      }\n\n      a {\n        color: var(--color-link-primary);\n      }\n\n      a:hover {\n        text-decoration: underline;\n        color: var(--color-link-primary-hover);\n      }\n\n      temba-button#send-button {\n        --button-y: 1px;\n        --button-x: 12px;\n        margin-top: 0.8em;\n        align-self: flex-end;\n      }\n\n      temba-button#reopen-button {\n        --button-y: 1px;\n        --button-x: 12px;\n      }\n\n      .toolbar {\n        position: relative;\n        width: 2.5em;\n        background: #e6e6e6;\n        transition: all 600ms ease-in;\n        z-index: 10;\n        flex-shrink: 0;\n        border-top-right-radius: var(--curvature);\n        border-bottom-right-radius: var(--curvature);\n        padding: 0.5em 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      .toolbar temba-icon {\n        fill: rgb(60, 60, 60);\n        margin-bottom: 0.5em;\n      }\n\n      .toolbar.closed {\n        box-shadow: inset 10px 0px 10px -11px rgb(0 0 0 / 15%);\n      }\n\n      temba-contact-details {\n        flex-basis: 16em;\n        flex-grow: 0;\n        flex-shrink: 0;\n        transition: margin 600ms cubic-bezier(0.68, -0.55, 0.265, 1.05),\n          opacity 600ms ease-in-out 200ms;\n        z-index: 5;\n      }\n\n      temba-contact-details.hidden {\n        margin-right: -16em;\n        opacity: 0;\n      }\n\n      @media only screen and (max-width: 768px) {\n        temba-contact-details {\n          flex-basis: 12em;\n          flex-shrink: 0;\n        }\n\n        temba-contact-details.hidden {\n          margin-right: -12em;\n        }\n      }\n\n      #close-button,\n      #open-button {\n        margin-top: 1em;\n      }\n\n      #details-button {\n        margin-top: 0.25em;\n        transform: rotate(180deg);\n      }\n\n      #note-dialog,\n      #assign-dialog {\n        --header-bg: rgb(255, 249, 194);\n        --header-text: #555;\n        --textarea-height: 5em;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'contact' })\n  contactUUID: string;\n\n  @property({ type: String, attribute: 'ticket' })\n  ticketUUID: string;\n\n  @property({ type: String })\n  contactsEndpoint = '/api/v2/contacts.json';\n\n  @property({ type: String })\n  currentChat = '';\n\n  @property({ type: String })\n  currentNote = '';\n\n  @property({ type: Boolean })\n  showDetails = true;\n\n  @property({ type: Boolean })\n  toolbar = false;\n\n  @property({ type: Boolean })\n  monitor = false;\n\n  @property({ type: Object })\n  currentTicket: Ticket = null;\n\n  @property({ type: Object })\n  currentContact: Contact = null;\n\n  @property({ type: String })\n  agent = '';\n\n  constructor() {\n    super();\n    this.showDetails = getCookieBoolean(COOKIE_KEYS.TICKET_SHOW_DETAILS);\n  }\n\n  refreshInterval = null;\n\n  public connectedCallback() {\n    super.connectedCallback();\n    if (this.monitor) {\n      this.refreshInterval = setInterval(() => {\n        if (this.currentTicket && this.currentTicket.closed_on) {\n          return;\n        }\n        this.refresh();\n      }, DEFAULT_REFRESH);\n    }\n  }\n\n  public disconnectedCallback() {\n    if (this.refreshInterval) {\n      clearInterval(this.refreshInterval);\n    }\n  }\n\n  public getContactHistory(): ContactHistory {\n    return this.shadowRoot.querySelector(\n      'temba-contact-history'\n    ) as ContactHistory;\n  }\n\n  public refresh(scrollToBottom = false): void {\n    const contactHistory = this.getContactHistory();\n    if (contactHistory) {\n      if (scrollToBottom) {\n        contactHistory.scrollToBottom();\n      }\n      contactHistory.refresh();\n    }\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // we were provided a uuid, fetch our contact details\n    if (changedProperties.has('contactUUID') && this.contactUUID) {\n      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(\n        contact => {\n          this.currentContact = contact;\n        }\n      );\n    }\n\n    // if we don't have an endpoint infer one\n    if (changedProperties.has('currentContact')) {\n      // focus our completion on load\n      const prevContact = changedProperties.get('contact');\n      if (\n        !prevContact ||\n        (this.currentContact &&\n          this.currentContact.ticket &&\n          this.currentContact.ticket.uuid !== prevContact.ticket.uuid)\n      ) {\n        const completion = this.shadowRoot.querySelector(\n          'temba-completion'\n        ) as Completion;\n        if (completion) {\n          window.setTimeout(() => {\n            completion.click();\n          }, 0);\n        }\n      }\n    }\n  }\n\n  private handleChatChange(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const chat = event.currentTarget as TextInput;\n    this.currentChat = chat.value;\n  }\n\n  private handleReopen() {\n    const uuid = this.currentTicket.uuid;\n    postJSON(`/api/v2/ticket_actions.json`, {\n      tickets: [uuid],\n      action: 'reopen',\n    })\n      .then(() => {\n        this.refresh();\n        this.fireCustomEvent(CustomEventType.ContentChanged, {\n          ticket: { uuid, status: 'open' },\n        });\n      })\n      .catch((response: any) => {\n        console.error(response);\n      });\n  }\n\n  private handleSend() {\n    const payload = {\n      contacts: [this.currentContact.uuid],\n      text: this.currentChat,\n    };\n\n    if (this.currentTicket) {\n      payload['ticket'] = this.currentTicket.uuid;\n    }\n\n    postJSON(`/api/v2/broadcasts.json`, payload)\n      .then(() => {\n        this.currentChat = '';\n        this.refresh(true);\n      })\n      .catch(err => {\n        // error message dialog?\n        console.error(err);\n      });\n  }\n\n  private handleTicketAssigned() {\n    this.refresh();\n    this.getContactHistory().checkForAgentAssignmentEvent(this.agent);\n  }\n\n  private handleDetailSlider(): void {\n    this.showDetails = !this.showDetails;\n    setCookie(COOKIE_KEYS.TICKET_SHOW_DETAILS, this.showDetails);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        style=\"flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;\"\n        class=\"left-pane  ${this.showDetails ? 'open' : ''}\"\n      >\n        <div class=\"chat-wrapper\">\n          ${this.currentContact\n            ? html`<temba-contact-history\n                    .uuid=${this.currentContact.uuid}\n                    .contact=${this.currentContact}\n                    .ticket=${\n                      this.currentTicket ? this.currentTicket.uuid : null\n                    }\n                    .endDate=${\n                      this.currentTicket ? this.currentTicket.closed_on : null\n                    }\n                    .agent=${this.agent}\n                  ></temba-contact-history>\n\n                  ${\n                    this.currentTicket && this.currentTicket.closed_on\n                      ? html`<div class=\"closed-footer\">\n                          <temba-button\n                            id=\"reopen-button\"\n                            name=\"Reopen\"\n                            @click=${this.handleReopen}\n                          ></temba-button>\n                        </div>`\n                      : html` <div\n                          class=\"chatbox ${this.toolbar ? 'full' : ''}\"\n                        >\n                          <temba-completion\n                            @change=${this.handleChatChange}\n                            .value=${this.currentChat}\n                            @keydown=${(e: KeyboardEvent) => {\n                              if (e.key === 'Enter' && !e.shiftKey) {\n                                const chat = e.target as Completion;\n                                if (!chat.hasVisibleOptions()) {\n                                  this.handleSend();\n                                  e.preventDefault();\n                                  e.stopPropagation();\n                                }\n                              }\n                            }}\n                            textarea\n                          >\n                          </temba-completion>\n                          <temba-button\n                            id=\"send-button\"\n                            name=\"Send\"\n                            @click=${this.handleSend}\n                            ?disabled=${this.currentChat.trim().length === 0}\n                          ></temba-button>\n                        </div>`\n                  }\n                  </div>`\n            : null}\n        </div>\n      </div>\n\n      ${this.toolbar\n        ? html`${\n            this.currentContact\n              ? html`<temba-contact-details\n                  style=\"z-index: 10\"\n                  class=\"${this.showDetails ? '' : 'hidden'}\"\n                  showGroups=\"true\"\n                  .visible=${this.showDetails}\n                  .ticket=${this.currentTicket}\n                  .contact=${this.currentContact}\n                ></temba-contact-details>`\n              : null\n          }\n\n        <div class=\"toolbar ${this.showDetails ? '' : 'closed'}\">\n          ${\n            this.currentContact\n              ? html`\n                  <temba-tip\n                    style=\"margin-top:5px\"\n                    text=\"${this.showDetails ? 'Hide Details' : 'Show Details'}\"\n                    position=\"left\"\n                    hideOnChange\n                  >\n                    <temba-icon\n                      id=\"details-button\"\n                      name=\"${this.showDetails ? 'chevrons-left' : 'sidebar'}\"\n                      @click=\"${this.handleDetailSlider}\"\n                      clickable\n                      animatechange=\"spin\"\n                    ></temba-icon>\n                  </temba-tip>\n\n                  ${this.currentTicket\n                    ? html`<temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Assign\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"assign-button\"\n                            name=\"user\"\n                            @click=\"${() => {\n                              const modax = this.shadowRoot.getElementById(\n                                'assign-dialog'\n                              ) as Modax;\n                              modax.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>\n                        <temba-tip\n                          style=\"margin-top:5px\"\n                          text=\"Add Note\"\n                          position=\"left\"\n                        >\n                          <temba-icon\n                            id=\"add-note-button\"\n                            name=\"edit\"\n                            @click=\"${() => {\n                              const note = this.shadowRoot.getElementById(\n                                'note-dialog'\n                              ) as Modax;\n                              note.open = true;\n                            }}\"\n                            clickable\n                          ></temba-icon>\n                        </temba-tip>`\n                    : null}\n                `\n              : null\n          }\n        </div>\n      </div>\n\n      ${\n        this.currentTicket\n          ? html`<temba-modax\n              header=\"Add Note\"\n              id=\"note-dialog\"\n              @temba-submitted=${this.refresh}\n              endpoint=\"/ticket/note/${this.currentTicket.uuid}/\"\n            ></temba-modax>\n            <temba-modax\n              header=\"Assign Ticket\"\n              id=\"assign-dialog\"\n              @temba-submitted=${this.handleTicketAssigned}\n              endpoint=\"/ticket/assign/${this.currentTicket.uuid}/\"\n            /></temba-modax>`\n          : null\n      }`\n        : null}\n    `;\n  }\n}\n"]}

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

@@ -63,22 +63,24 @@ export class ContactHistory extends RapidElement {
         return css `
       ${getEventStyles()}
 
-      :host {
-        flex-grow: 1;
-        flex-direction: column;
+      .wrapper {
+        border: 0px solid green;
         display: flex;
         flex-direction: column;
         align-items: items-stretch;
+        flex-grow: 1;
+        min-height: 0;
       }
 
       .events {
-        height: 200px;
         overflow-y: scroll;
         overflow-x: hidden;
-        flex-grow: 1;
-        border-top-left-radius: var(--curvature);
-        padding-top: 1em;
         background: #fff;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        padding-top: 3em;
       }
 
       temba-loading {
@@ -133,12 +135,9 @@ export class ContactHistory extends RapidElement {
       }
 
       .sticky-bin {
-        display: flex;
-        flex-direction: column;
-        z-index: 2;
         border-top-left-radius: var(--curvature);
-        overflow: hidden;
-        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        z-index: 2;
+        box-shadow: rgb(0 0 0 / 15%) 0px 3px 3px 0px;
         background: rgb(240, 240, 240);
       }
 
@@ -403,7 +402,6 @@ export class ContactHistory extends RapidElement {
                 }
                 eventGroup = {
                     open: false,
-                    closing: false,
                     events: [event],
                     type: currentEventGroupType,
                 };
@@ -467,18 +465,13 @@ export class ContactHistory extends RapidElement {
         this.requestUpdate('eventGroups');
     }
     handleEventGroupHide(event) {
+        event.preventDefault();
+        event.stopPropagation();
         const grouping = event.currentTarget;
         const groupIndex = parseInt(grouping.getAttribute('data-group-index'));
         const eventGroup = this.eventGroups[this.eventGroups.length - groupIndex - 1];
-        // mark us as closing
-        eventGroup.closing = true;
+        eventGroup.open = false;
         this.requestUpdate('eventGroups');
-        // after our animation, close it up for real
-        setTimeout(() => {
-            eventGroup.closing = false;
-            eventGroup.open = false;
-            this.requestUpdate('eventGroups');
-        }, 300);
     }
     handleScroll() {
         const events = this.getEventsPane();
@@ -697,7 +690,6 @@ export class ContactHistory extends RapidElement {
                 grouping: true,
                 [grouping]: true,
                 expanded: eventGroup.open,
-                closing: eventGroup.closing,
             });
             return html `<div class="${classes}">
             ${grouping === 'verbose'
@@ -706,22 +698,22 @@ export class ContactHistory extends RapidElement {
                   @click=${this.handleEventGroupShow}
                   data-group-index="${groupIndex}"
                 >
-                  ${eventGroup.events.length}
-                  ${eventGroup.events.length === 1 ? html `event` : html `events`}
+                  ${eventGroup.open
+                    ? html `<temba-icon
+                        @click=${this.handleEventGroupHide}
+                        data-group-index="${groupIndex}"
+                        name="x"
+                        clickable
+                      ></temba-icon>`
+                    : html `${eventGroup.events.length}
+                      ${eventGroup.events.length === 1
+                        ? html `event`
+                        : html `events`} `}
                 </div>`
                 : null}
-            ${grouping === 'verbose'
-                ? html `
-                  <temba-icon
-                    @click=${this.handleEventGroupHide}
-                    data-group-index="${groupIndex}"
-                    class="grouping-close-button"
-                    name="x"
-                    clickable
-                  ></temba-icon>
-                `
-                : null}
-            ${eventGroup.events.map((event) => {
+
+            <div class="items">
+              ${eventGroup.events.map((event) => {
                 if (event.type === Events.TICKET_ASSIGNED &&
                     event.note) {
                     const noteEvent = { ...event };
@@ -732,6 +724,7 @@ export class ContactHistory extends RapidElement {
                     return this.renderEventContainer(event);
                 }
             })}
+            </div>
           </div>`;
         })}
       </div>
@@ -748,6 +741,7 @@ export class ContactHistory extends RapidElement {
           New Messages
         </div>
       </div>
+      </div>
     `;
     }
 }