@nyaruka/temba-components 0.42.1 → 0.43.0

package/src/contacts/events.ts

@@ -1,6 +1,13 @@
 import { css, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
-import { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';
+import {
+  getClasses,
+  oxford,
+  oxfordFn,
+  oxfordNamed,
+  renderAvatar,
+  timeSince,
+} from '../utils';
 import { Icon } from '../vectoricon';
 import { getDisplayName } from './helpers';
 
@@ -165,11 +172,20 @@ export const getEventStyles = () => {
     }
 
     .msg {
-      padding: var(--event-padding);
-      border-radius: 8px;
+      border-radius: calc(var(--curvature) * 2.5);
       border: 2px solid rgba(100, 100, 100, 0.1);
       max-width: 300px;
       word-break: break-word;
+      overflow: hidden;
+    }
+
+    .msg.attachments-1.no-message {
+      border: 2px solid transparent;
+      background-color: transparent !important;
+    }
+
+    .msg .text {
+      padding: var(--event-padding);
     }
 
     .event.msg_received .msg {
@@ -186,7 +202,13 @@ export const getEventStyles = () => {
     .event.msg_created .msg,
     .event.broadcast_created .msg,
     .event.ivr_created .msg {
-      background: rgb(231, 243, 255);
+      background: var(--color-primary-dark);
+      color: white;
+      font-weight: 400;
+    }
+
+    .msg.automated {
+      background: var(--color-automated) !important;
     }
 
     .webhook_called {
@@ -439,7 +461,17 @@ export const getEventStyles = () => {
     }
 
     .attachments {
-      margin-top: 1em;
+      display: flex;
+      flex-wrap: wrap;
+      margin: -0.2em;
+    }
+
+    .attachment {
+      flex: 1 0 45%;
+      border-top: 0.05em solid transparent;
+      border-left: 0.05em solid transparent;
+      margin-top: 0.05em;
+      margin-left: 0.05em;
     }
   `;
 };
@@ -636,36 +668,10 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
   return 'verbose';
 };
 
-export const renderAvatar = (user: User, agent = '') => {
-  const current = user && user.email === agent;
-  if (user.email === FLOW_USER_ID || !user || !user.first_name) {
-    return html`<temba-tip text="Automated message" position="top"
-      ><div class="avatar flow" style="margin-top:0.5em">
-        <temba-icon size="1" name="${Icon.flow_user}" /></div
-    ></temba-tip>`;
-  } else {
-    return html`<temba-tip
-      text="${user.first_name + ' ' + user.last_name}"
-      position="top"
-    >
-      <div
-        class="avatar"
-        style="
-          border-radius: 9999px; 
-          display:flex;
-          align-items:center;
-          border: 2px solid rgba(0,0,0,.05);
-          background: ${current ? 'var(--color-primary-dark)' : '#eee'};
-          color: ${current ? '#fff' : '#999'} ;
-          font-weight: 400;
-          padding: 0.5em;
-          line-height:1.2em;
-        "
-      >
-        ${user.first_name[0] + user.last_name[0]}
-      </div>
-    </temba-tip>`;
-  }
+export const renderUserAvatar = (user: User) => {
+  return html`<div style="width:3.5em;font-size:0.8em">
+    ${renderAvatar({ user, position: 'left' })}
+  </div>`;
 };
 
 export const renderAttachment = (attachment: string): TemplateResult => {
@@ -676,10 +682,12 @@ export const renderAttachment = (attachment: string): TemplateResult => {
 
   let inner = null;
   if (mediaType === 'image') {
-    inner = html`<div class="linked" onclick="goto(event)" href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
+    inner = html`
+      <img src="${url}" style="height:auto;width:100%;display:block;" />
+    `;
   } else if (ext === 'pdf') {
     return html`<div
-      style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
+      style="width:100%;height:300px;border-radius:calc(var(--curvature) * 2.5);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
     ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
   } else if (mediaType === 'video') {
     return html`<video
@@ -724,11 +732,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
     </div>`;
   }
 
-  return html`<div
-    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden"
-  >
-    ${inner}
-  </div>`;
+  return html`<div style="">${inner}</div>`;
 };
 
 export const renderMsgEvent = (
@@ -741,6 +745,7 @@ export const renderMsgEvent = (
 
   // summary items which appear under the message bubble
   const summary: TemplateResult[] = [];
+
   if (event.logs_url) {
     summary.push(html` <div class="icon-link">
       <temba-icon
@@ -786,17 +791,32 @@ export const renderMsgEvent = (
 
   return html`<div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
-      ${event.msg.text ? html`<div class="msg">${event.msg.text}</div>` : null}
-      ${event.msg.attachments
-        ? html`<div class="attachments">
-            ${event.msg.attachments.map(attachment =>
-              renderAttachment(attachment)
-            )}
-          </div> `
-        : null}
+      <div
+        class="${event.msg.text ? '' : 'no-message'} attachments-${(
+          event.msg.attachments || []
+        ).length} ${getClasses({
+          msg: true,
+          automated: !isInbound && !event.msg.created_by,
+        })}"
+      >
+        ${event.msg.text
+          ? html` <div class="text">${event.msg.text}</div> `
+          : null}
+        ${event.msg.attachments
+          ? html`<div class="attachments">
+              ${event.msg.attachments.map(
+                attachment =>
+                  html` <div class="attachment">
+                    ${renderAttachment(attachment)}
+                  </div>`
+              )}
+            </div> `
+          : null}
+      </div>
       ${!event.msg.text && !event.msg.attachments
         ? html`<div class="unsupported">Unsupported Message</div>`
         : null}
+
       <div
         class="msg-summary"
         style="flex-direction:row${isInbound ? '-reverse' : ''}"
@@ -807,12 +827,10 @@ export const renderMsgEvent = (
     </div>
 
     ${!isInbound
-      ? html`<div style="margin-left:0.8em;margin-top:0.3em">
+      ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
           ${event.msg.created_by
-            ? html`<div style="font-size:0.8em">
-                ${renderAvatar(event.msg.created_by, agent)}
-              </div>`
-            : renderAvatar({ email: FLOW_USER_ID })}
+            ? renderUserAvatar(event.msg.created_by)
+            : renderUserAvatar(null)}
         </div>`
       : null}
   </div>`;
@@ -934,10 +952,7 @@ export const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {
   `;
 };
 
-export const renderNoteCreated = (
-  event: TicketEvent,
-  agent: string
-): TemplateResult => {
+export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
   return html`<div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
       <div class="description">${event.note}</div>
@@ -951,7 +966,7 @@ export const renderNoteCreated = (
       </div>
     </div>
     <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
-      ${renderAvatar(event.created_by, agent)}
+      ${renderUserAvatar(event.created_by)}
     </div>
   </div>`;
 };
@@ -1187,16 +1202,16 @@ export const renderCampaignFiredEvent = (
       Campaign
       <span
         class="linked"
-        onclick="goto(event)"
-        href="/campaign/read/${event.campaign.uuid}"
+        onclick="goto(event, this)"
+        href="/campaign/read/${event.campaign.uuid}/"
         >${event.campaign.name}</span
       >
       ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
       <span
         class="linked"
-        onclick="goto(event)"
+        onclick="goto(event, this)"
         href="/campaignevent/read/${event.campaign.uuid}/${event.campaign_event
-          .id}"
+          .id}/"
       >
         ${event.campaign_event.offset_display}
         ${event.campaign_event.relative_to.name}</span

package/src/lightbox/Lightbox.ts

@@ -0,0 +1,161 @@
+import { css, html, PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { getClasses } from '../utils';
+import { styleMap } from 'lit-html/directives/style-map.js';
+
+/**
+ * This component relies on a bit of sleight of hand magic
+ * to achieve it's effect. As such, it requires the use of
+ * computed animation times and window.setTimeout().
+ */
+export class Lightbox extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        position: absolute;
+      }
+
+      .mask {
+        display: flex;
+        opacity: 0;
+        background: rgba(0, 0, 0, 0.5);
+        position: absolute;
+        height: 100vh;
+        width: 100vw;
+        pointer-events: none;
+      }
+
+      .zoom .mask {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .matte {
+        position: absolute;
+        transform: translate(400, 400) scale(3, 3);
+        border-radius: 2%;
+        overflow: hidden;
+        box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  animationTime = 300;
+
+  @property({ type: Boolean })
+  show = false;
+
+  @property({ type: Boolean })
+  zoom = false;
+
+  @property({ type: Number })
+  zoomPct = 0.9;
+
+  private ele: HTMLElement;
+  private left: number;
+  private top: number;
+  private height: number;
+  private width: number;
+  private scale = 1;
+  private xTrans = '0px';
+  private yTrans = '0px';
+
+  protected updated(
+    changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    if (changed.has('show') && this.show) {
+      window.setTimeout(() => {
+        this.zoom = true;
+      }, 0);
+    }
+
+    if (changed.has('zoom') && !this.zoom && this.show) {
+      window.setTimeout(() => {
+        this.show = false;
+      }, this.animationTime);
+    }
+  }
+
+  public showElement(ele: HTMLElement) {
+    // size our matte according to the ele's boundaries
+    const bounds = ele.getBoundingClientRect();
+    this.ele = ele.cloneNode() as HTMLElement;
+    this.left = bounds.left;
+    this.top = bounds.top;
+    this.width = bounds.width;
+    this.height = bounds.height;
+
+    this.xTrans = '0px';
+    this.yTrans = '0px';
+    this.scale = 1;
+
+    let desiredWidth = this.width;
+    let desiredHeight = this.height;
+
+    // set our destination and size
+    if (this.height > this.width) {
+      desiredHeight = window.innerHeight * this.zoomPct;
+      this.scale = desiredHeight / this.height;
+      desiredWidth = this.width * this.scale;
+    }
+    // landscape
+    else {
+      desiredWidth = window.innerWidth * this.zoomPct;
+      this.scale = desiredWidth / this.width;
+      desiredHeight = this.height * this.scale;
+    }
+
+    const xGrowth = (desiredWidth - this.width) / 2;
+    const xDest = (window.innerWidth - desiredWidth) / 2;
+    this.xTrans = xDest - this.left + xGrowth + 'px';
+
+    const yGrowth = (desiredHeight - this.height) / 2;
+    const yDest = (window.innerHeight - desiredHeight) / 2;
+    this.yTrans = yDest - this.top + yGrowth + 'px';
+    this.show = true;
+  }
+
+  public handleClick() {
+    this.zoom = false;
+  }
+
+  public render() {
+    const styles = {
+      transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`,
+    };
+
+    if (this.show) {
+      styles['left'] = this.left + 'px';
+      styles['top'] = this.top + 'px';
+      styles['width'] = this.width + 'px';
+      styles['height'] = this.height + 'px';
+    }
+
+    if (this.zoom) {
+      styles[
+        'transform'
+      ] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;
+    }
+
+    return html`
+      <div
+        class=${getClasses({
+          container: true,
+          show: this.show,
+          zoom: this.zoom,
+        })}
+        @click=${this.handleClick}
+      >
+        <div
+          class=${getClasses({ mask: true })}
+          style="transition: all ${this.animationTime}ms; ease"
+        ></div>
+        <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
+          ${this.show ? this.ele : null}
+        </div>
+      </div>
+    `;
+  }
+}

package/src/list/TembaMenu.ts

@@ -2,9 +2,8 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
-import { debounce, fetchResults, getClasses } from '../utils';
+import { debounce, fetchResults, getClasses, renderAvatar } from '../utils';
 import { Icon } from '../vectoricon';
-import ColorHash from 'color-hash';
 
 export interface MenuItem {
   id?: string;
@@ -166,19 +165,6 @@ export class TembaMenu extends RapidElement {
         align-items: center;
       }
 
-      .avatar-circle {
-        box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.075);
-        display: flex;
-        margin: 0.4em 0em;
-        height: 2em;
-        width: 2em;
-        flex-direction: row;
-        align-items: center;
-        color: #fff;
-        border-radius: 100%;
-        font-weight: 400;
-      }
-
       temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {
         font-size: 0.7em;
       }
@@ -836,35 +822,6 @@ export class TembaMenu extends RapidElement {
     return expanded;
   }
 
-  private renderAvatar(avatar: string) {
-    const hash = new ColorHash();
-    const color = hash.hex(avatar);
-
-    let second = avatar.indexOf(' ') + 1;
-    if (second < 1) {
-      second = avatar.length > 1 ? 1 : 0;
-    }
-    let name = avatar.substring(0, 1) + avatar.substring(second, second + 1);
-    name = name.toUpperCase();
-
-    return html`
-      <div
-        style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
-      >
-        <div
-          class="avatar-circle"
-          style="border: 0px solid rgba(0,0,0,.1);background:${color}"
-        >
-          <div
-            style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
-          >
-            <div style="border:0px solid blue;">${name}</div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
   private renderMenuItem = (
     menuItem: MenuItem,
     parent: MenuItem = null
@@ -929,7 +886,7 @@ export class TembaMenu extends RapidElement {
     });
 
     if (menuItem.avatar) {
-      icon = this.renderAvatar(menuItem.avatar);
+      icon = renderAvatar({ name: menuItem.avatar });
     }
 
     const item = html` <div

package/src/list/TicketList.ts

@@ -3,7 +3,7 @@ import { property } from 'lit/decorators.js';
 import { TembaList } from './TembaList';
 import { timeSince } from '../utils';
 import { Contact } from '../interfaces';
-import { renderAvatar } from '../contacts/events';
+import { renderUserAvatar } from '../contacts/events';
 import { Icon } from '../vectoricon';
 
 export class TicketList extends TembaList {
@@ -84,7 +84,7 @@ export class TicketList extends TembaList {
               </div>
               <div style="font-size:0.7em;">
                 ${!contact.ticket.closed_on && contact.ticket.assignee
-                  ? html`${renderAvatar(contact.ticket.assignee, this.agent)}`
+                  ? html`${renderUserAvatar(contact.ticket.assignee)}`
                   : null}
               </div>
             </div>

package/src/untyped.d.ts

@@ -16,3 +16,4 @@ declare function moveMouse(x: number, y: number);
 declare function mouseDown();
 declare function mouseUp();
 declare function setViewport({}: any);
+declare function waitForNetworkIdle();

package/src/utils/index.ts

@@ -2,7 +2,10 @@
 import { html, TemplateResult } from 'lit-html';
 import { Button } from '../button/Button';
 import { Dialog } from '../dialog/Dialog';
-import { ContactField, Ticket } from '../interfaces';
+import { ContactField, Ticket, User } from '../interfaces';
+import ColorHash from 'color-hash';
+
+const colorHash = new ColorHash();
 
 export type Asset = KeyedAsset & Ticket & ContactField;
 
@@ -108,7 +111,7 @@ export const getClasses = (map: ClassMap): string => {
   if (result.trim().length > 0) {
     result = ' ' + result;
   }
-  return result;
+  return result.trim();
 };
 
 export const fetchResultsPage = (
@@ -613,3 +616,66 @@ export const formatFileSize = (bytes: number, decimalPoint: number): string => {
     i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 };
+
+export const renderAvatar = (input: {
+  name?: string;
+  user?: User;
+  icon?: string;
+  image?: string;
+  position?: string;
+}) => {
+  if (!input.position) {
+    input.position = 'right';
+  }
+
+  // just a url
+  if (input.image) {
+    return html`<img src="${input.image}" />`;
+  }
+
+  let text = input.name;
+  if (input.user) {
+    text = `${input.user.first_name} ${input.user.last_name}`;
+  }
+
+  if (!text) {
+    return null;
+  }
+
+  const color = colorHash.hex(text);
+  let second = text.indexOf(' ') + 1;
+  if (second < 1) {
+    second = text.length > 1 ? 1 : 0;
+  }
+  let initials = text.substring(0, 1) + text.substring(second, second + 1);
+  initials = initials.toUpperCase();
+
+  return html`
+    <temba-tip text=${text} position=${input.position}>
+      <div
+        style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
+      >
+        <div
+          class="avatar-circle"
+          style="
+            display: flex;
+            height: 2em;
+            width: 2em;
+            flex-direction: row;
+            align-items: center;
+            color: #fff;
+            border-radius: 100%;
+            font-weight: 400;
+            border: 0.3em solid rgba(0,0,0,.05);
+            background:${color}"
+        >
+          <div
+            style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
+          >
+            <div style="border:0px solid blue;">${initials}</div>
+          </div>
+        </div>
+      </div>
+    </temba-tip>
+  `;
+};

package/src/vectoricon/index.ts

@@ -40,7 +40,7 @@ export enum Icon {
   flow_interrupted = 'x-close',
   flow_ivr = 'phone-call-01',
   flow_message = 'message-square-02',
-  flow_user = 'activity',
+  flow_user = 'hard-drive',
   flows = 'flow',
   group = 'users-01',
   group_smart = 'atom-01',

package/static/css/temba-components.css

@@ -105,6 +105,8 @@
     --color-error: rgb(var(--error-rgb));
     --color-alert: rgb(var(--error-rgb));
 
+    --color-automated: rgb(78,205,106);
+
     --icon-color: var(--text-color);
     --icon-color-hover: var(--icon-color);
     --icon-color-circle-hover: rgba(245, 245, 245, .8);
@@ -139,7 +141,6 @@
     --button-y: 6px;  
     --button-x: 14px;
 
-    --menu-padding: 1em;
     --bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
     --temba-charcount-counts-margin-top: 4px;
@@ -148,6 +149,8 @@
     --temba-charcount-summary-right: 0px;
     --temba-charcount-summary-bottom: 0px;
 
+    --color-automated: rgb(78,205,106);
+
   }
 
   temba-button {

package/temba-modules.ts

@@ -45,6 +45,7 @@ import { ContentMenu } from './src/list/ContentMenu';
 import { TembaDate } from './src/date/TembaDate';
 import Remote from './src/remote/Remote';
 import { Compose } from './src/compose/Compose';
+import { Lightbox } from './src/lightbox/Lightbox';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -63,6 +64,7 @@ addCustomElement('temba-checkbox', Checkbox);
 addCustomElement('temba-select', Select);
 addCustomElement('temba-options', Options);
 addCustomElement('temba-loading', Loading);
+addCustomElement('temba-lightbox', Lightbox);
 addCustomElement('temba-button', Button);
 addCustomElement('temba-omnibox', Omnibox);
 addCustomElement('temba-tip', Tip);

package/test/temba-contact-chat.test.ts

@@ -536,13 +536,20 @@ describe('temba-contact-chat - ticket tests', () => {
     chat.refresh();
     await chat.httpComplete;
 
+    let lastScroll = 0;
     await assertScreenshot(
       'contacts/contact-active-ticket-closed-show-reopen-button',
       getClip(chat),
       {
         clock: clock,
         predicate: () => {
-          return chat.getContactHistory().getEventsPane().scrollTop === 921;
+          const currentScroll = chat
+            .getContactHistory()
+            .getEventsPane().scrollTop;
+          if (currentScroll !== 0 && currentScroll === lastScroll) {
+            return true;
+          }
+          lastScroll = currentScroll;
         },
       }
     );
@@ -562,14 +569,20 @@ describe('temba-contact-chat - ticket tests', () => {
     chat.currentTicket = tickets.items[0];
     chat.refresh();
     await chat.httpComplete;
-
+    let lastScroll = 0;
     await assertScreenshot(
       'contacts/contact-archived-ticket-closed-hide-chatbox',
       getClip(chat),
       {
         clock: clock,
         predicate: () => {
-          return chat.getContactHistory().getEventsPane().scrollTop === 870;
+          const currentScroll = chat
+            .getContactHistory()
+            .getEventsPane().scrollTop;
+          if (currentScroll !== 0 && currentScroll === lastScroll) {
+            return true;
+          }
+          lastScroll = currentScroll;
         },
       }
     );