@nyaruka/temba-components 0.163.0 → 0.165.0

package/src/live/ContactChat.ts

@@ -605,7 +605,13 @@ export class ContactChat extends ContactStoreElement {
     const channels = new Set<string>();
     if (this.isConnected && this.currentContact) {
       channels.add(`history:${this.currentContact.uuid}`);
-      if (this.currentTicket) {
+
+      // on a contact switch the new ticket is set before the new contact has
+      // finished fetching, so hold off on the ticket channel until they match
+      // - a ticket paired with another contact's channel is denied server-side
+      const contactPending =
+        this.contact && this.contact !== this.currentContact.uuid;
+      if (this.currentTicket && !contactPending) {
         channels.add(
           `history:${this.currentContact.uuid}:${this.currentTicket.uuid}`
         );

package/src/live/ContactDetails.ts

@@ -38,7 +38,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .label {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
         margin-top: 0.25em;
         margin-left: 0.25em;
@@ -46,7 +46,7 @@ export class ContactDetails extends ContactStoreElement {
 
       .row .value {
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
         display: flex;
         flex-wrap: wrap;
@@ -55,6 +55,12 @@ export class ContactDetails extends ContactStoreElement {
 
       .group {
       }
+
+      /* the last row needs no separator — the card edge closes it off */
+      temba-contact-field.last-field {
+        --contact-field-separator: none;
+        margin-bottom: 0;
+      }
     `;
   }
 
@@ -70,6 +76,17 @@ export class ContactDetails extends ContactStoreElement {
 
     return html`
       <div class="wrapper">
+        ${this.data.urns.map((urn) => {
+          let scheme = SCHEMES[urn.scheme];
+          if (!scheme) {
+            scheme = capitalize(urn.scheme as any);
+          }
+          return html`<temba-contact-field
+            name=${scheme}
+            value=${urn.display || urn.path}
+            disabled
+          ></temba-contact-field>`;
+        })}
         ${this.data.groups.length > 0
           ? html` <div class="row">
               <div class="label">Groups</div>
@@ -89,18 +106,6 @@ export class ContactDetails extends ContactStoreElement {
               </div>
             </div>`
           : null}
-        ${this.data.urns.map((urn) => {
-          const parts = urn.split(':');
-          let scheme = SCHEMES[parts[0]];
-          if (!scheme) {
-            scheme = capitalize(parts[0] as any);
-          }
-          return html`<temba-contact-field
-            name=${scheme}
-            value=${parts[1]}
-            disabled
-          ></temba-contact-field>`;
-        })}
         ${this.data.ref
           ? html`<temba-contact-field
               name="Ref"
@@ -129,6 +134,7 @@ export class ContactDetails extends ContactStoreElement {
           disabled
         ></temba-contact-field>
         <temba-contact-field
+          class="last-field"
           name="Last Seen"
           value=${this.data.last_seen_on}
           type="datetime"

package/src/live/ContactFieldEditor.ts

@@ -61,7 +61,7 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-bg-focused: #fff;
         --widget-box-shadow: none;
         padding-bottom: 0.6em;
-        border-bottom: 1px solid #ececec;
+        border-bottom: var(--contact-field-separator, 1px solid #ececec);
       }
 
       .wrapper.disabled {
@@ -108,9 +108,12 @@ export class ContactFieldEditor extends RapidElement {
         text-overflow: ellipsis;
       }
 
+      /* read-only rows set the label clearly apart from the value — the
+         same quiet label treatment as .field-label on the editable rows,
+         a touch smaller, over a full-color value */
       .label .name {
         color: var(--text-2);
-        font-size: 12px;
+        font-size: 11px;
         font-weight: var(--w-medium);
       }
 
@@ -120,8 +123,9 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       .disabled .value {
+        color: var(--text-1);
         margin-left: 0.25em;
-        margin-top: 0.1em;
+        margin-top: 0.35em;
         min-height: 1.75em;
       }
 

package/src/live/ContactFields.ts

@@ -151,7 +151,7 @@ export class ContactFields extends ContactStoreElement {
     const value = field.value;
 
     // TODO: Use contact.postChanges instead of postJSON
-    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
+    postJSON(this.endpoint + this.data.uuid, {
       fields: { [field.key]: value }
     })
       .then((response: any) => {

package/src/live/ContactNameFetch.ts

@@ -1,6 +1,6 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { ContactStoreElement } from './ContactStoreElement';
+import { ContactStoreElement, getDestinationURN } from './ContactStoreElement';
 
 export class ContactNameFetch extends ContactStoreElement {
   @property({ type: Number, attribute: 'icon-size' })
@@ -21,9 +21,12 @@ export class ContactNameFetch extends ContactStoreElement {
 
   public render(): TemplateResult {
     if (this.data) {
+      // show the URN that will be used when messaging the contact, falling
+      // back to their highest priority URN if none are sendable
+      const urn = getDestinationURN(this.data) || this.data.urns[0] || null;
       return html` <temba-contact-name
           name=${this.data.name || this.data.ref}
-          urn=${this.data.urns.length > 0 ? this.data.urns[0] : null}
+          urn=${urn ? `${urn.scheme}:${urn.display || urn.path}` : null}
         ></temba-contact-name>
         <slot></slot>`;
     }

package/src/live/ContactNotepad.ts

@@ -13,6 +13,11 @@ export class ContactNotepad extends ContactStoreElement {
   dirtyMessage =
     'You have unsaved changes to the contact notepad. Are you sure you want to contiunue?';
 
+  // grow with the note instead of filling the parent and scrolling —
+  // used when embedded in a card that must never scroll internally
+  @property({ type: Boolean, reflect: true })
+  autogrow = false;
+
   static get styles() {
     return css`
       ${designTokens}
@@ -52,6 +57,41 @@ export class ContactNotepad extends ContactStoreElement {
         outline: none;
       }
 
+      /* flex-grow only matters in a height-bounded flex parent (the tab
+         pane): the textarea stretches to fill the note surface, pinning
+         the attribution toolbar to the bottom. In the card column the
+         parent is a plain block, so the notepad still hugs its text. */
+      :host([autogrow]) {
+        height: auto;
+        margin-top: 0;
+        flex-grow: 1;
+        /* in a height-bounded flex parent (tab pane) the autosize can
+           measure while flex-stretched and overshoot — allow flex to
+           shrink us back so the toolbar never overflows the pane */
+        min-height: 0;
+      }
+
+      /* hug the text — the JS autosize sets the exact height, so the only
+         floor is a single line for an empty note. border-box so setting
+         height = scrollHeight doesn't re-add the padding. Snug under the
+         card title, aligned to the 12px inset, with breathing room under
+         the last line of text. */
+      :host([autogrow]) .notepad {
+        box-sizing: border-box;
+        overflow-y: hidden;
+        min-height: 2em;
+        height: 2em;
+        padding: 0.25em 10px 1em 10px;
+      }
+
+      /* embedded in a card that supplies the chrome — drop our own so the
+         note surface bleeds to the card's edges */
+      :host([autogrow]) .wrapper {
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
       .toolbar {
         background: rgba(0, 0, 0, 0.03);
         padding: 0.25em 0.5em;
@@ -73,8 +113,49 @@ export class ContactNotepad extends ContactStoreElement {
     `;
   }
 
+  private resizer: ResizeObserver;
+  private lastWidth = 0;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    // text rewraps when our width changes (browser resize, layout mode
+    // switches), changing the height the note needs — only react to width
+    // so our own height writes don't loop the observer
+    this.resizer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        const width = this.offsetWidth;
+        if (width > 0 && width !== this.lastWidth) {
+          this.lastWidth = width;
+          this.autosize();
+        }
+      });
+    });
+    this.resizer.observe(this);
+  }
+
+  public disconnectedCallback(): void {
+    this.resizer?.disconnect();
+    super.disconnectedCallback();
+  }
+
   private handleChange() {
     this.markDirty();
+    // surface the unsaved state so a wrapping card can show its dirty mark
+    this.fireCustomEvent(CustomEventType.DetailsChanged, { dirty: true });
+    this.autosize();
+  }
+
+  private autosize() {
+    if (!this.autogrow) {
+      return;
+    }
+    const notepad = this.shadowRoot.querySelector(
+      '.notepad'
+    ) as HTMLTextAreaElement;
+    if (notepad) {
+      notepad.style.height = 'auto';
+      notepad.style.height = notepad.scrollHeight + 'px';
+    }
   }
 
   private submitChanges() {
@@ -94,14 +175,19 @@ export class ContactNotepad extends ContactStoreElement {
 
     if (changes.has('data')) {
       this.note =
-        this.data?.notes.length > 0
+        this.data?.notes?.length > 0
           ? { ...this.data.notes[this.data.notes.length - 1] }
           : null;
       this.fireCustomEvent(CustomEventType.DetailsChanged, {
-        count: this.note && this.note.text.length > 0 ? 1 : 0
+        count: this.note && this.note.text.length > 0 ? 1 : 0,
+        dirty: false
       });
       this.markClean();
     }
+
+    if (changes.has('note') || changes.has('data')) {
+      this.autosize();
+    }
   }
 
   public render(): TemplateResult {

package/src/live/ContactStoreElement.ts

@@ -1,8 +1,16 @@
 import { PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Contact, Group } from '../interfaces';
+import { Contact, Group, URN } from '../interfaces';
 import { EndpointMonitorElement } from '../store/EndpointMonitorElement';
 
+/**
+ * Returns the URN that will be used to message the given contact — URNs are
+ * ordered by priority and only ones with a channel are sendable.
+ */
+export const getDestinationURN = (contact: Contact | null): URN | null => {
+  return (contact?.urns || []).find((urn) => !!urn.channel) || null;
+};
+
 export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: String })
   contact: string;
@@ -10,8 +18,10 @@ export class ContactStoreElement extends EndpointMonitorElement {
   @property({ type: Object, attribute: false })
   data: Contact;
 
+  // expand_urns resolves each URN against a channel so we know which one
+  // will be used when messaging the contact
   @property({ type: String })
-  endpoint = '/api/v2/contacts.json?uuid=';
+  endpoint = '/api/v2/contacts.json?expand_urns=true&uuid=';
 
   prepareData(data: any) {
     if (data && data.length > 0) {
@@ -56,7 +66,8 @@ export class ContactStoreElement extends EndpointMonitorElement {
   }
 
   public willUpdate(changed: PropertyValues): void {
-    super.willUpdate(changed);
+    // derive our url before the base class runs so it sees the url change
+    // in this same pass (clearing stale data when the contact is unset)
     if (changed.has('contact') || changed.has('endpoint')) {
       if (this.contact) {
         this.url = `${this.endpoint}${this.contact}`;
@@ -64,5 +75,6 @@ export class ContactStoreElement extends EndpointMonitorElement {
         this.url = null;
       }
     }
+    super.willUpdate(changed);
   }
 }

package/src/live/ContactTimeline.ts

@@ -115,7 +115,9 @@ export class ContactTimeline extends EndpointMonitorElement {
         flex-direction: column;
         align-items: center;
         text-align: center;
-        padding: 7em 1em 4em;
+        /* a host card sets --empty-padding to compact this treatment —
+           the default suits a full-height tab pane */
+        padding: var(--empty-padding, 7em 1em 4em);
         color: var(--text-color);
       }
 
@@ -124,9 +126,17 @@ export class ContactTimeline extends EndpointMonitorElement {
         --icon-color: var(--text-3, #7b8593);
       }
 
+      /* the icon / blurb / link around the title — a host card hides
+         these so the empty card is just the stylized message */
+      .empty-extras {
+        display: var(--empty-extras-display, contents);
+      }
+
       .empty-title {
         font-weight: 600;
         margin-bottom: 0.4em;
+        font-size: var(--empty-title-size, inherit);
+        color: var(--empty-title-color, inherit);
       }
 
       .empty-help {
@@ -547,7 +557,14 @@ export class ContactTimeline extends EndpointMonitorElement {
             : Array.isArray(this.data.future)
               ? this.data.future.length
               : 0;
-        this.fireCustomEvent(CustomEventType.DetailsChanged, { count });
+        // empty mirrors the render()'s empty-state condition so a host
+        // card can drop its chrome entirely when there's nothing to show
+        const empty =
+          count === 0 &&
+          !(Array.isArray(this.data.campaigns) && this.data.campaigns.length) &&
+          !(Array.isArray(this.data.future) && this.data.future.length) &&
+          !(Array.isArray(this.data.past) && this.data.past.length);
+        this.fireCustomEvent(CustomEventType.DetailsChanged, { count, empty });
       }
     }
   }
@@ -810,12 +827,16 @@ export class ContactTimeline extends EndpointMonitorElement {
     ) {
       return html`<div class="empty">
         <slot name="empty">
-          <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          <div class="empty-extras">
+            <temba-icon name=${Icon.schedule} size="2"></temba-icon>
+          </div>
           <div class="empty-title">${this.lang_empty}</div>
-          <div class="empty-help">${this.lang_empty_help}</div>
-          <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
-            >${this.lang_campaigns_link}</a
-          >
+          <div class="empty-extras">
+            <div class="empty-help">${this.lang_empty_help}</div>
+            <a class="empty-link" href="/campaign/" onclick="goto(event, this)"
+              >${this.lang_campaigns_link}</a
+            >
+          </div>
         </slot>
       </div>`;
     }

package/src/locales/es.ts

@@ -13,6 +13,10 @@
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,

package/src/locales/fr.ts

@@ -13,6 +13,10 @@
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,

package/src/locales/pt.ts

@@ -13,6 +13,10 @@
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
 's81f17cfc89a04338': `Interrupt flow`,
+'s122d4de68bcfcdf4': `It's okay to restart`,
+'s3eb2567092b4d7c1': `from the beginning`,
+'s28f37776b3901438': `It's okay to interrupt`,
+'s6838d20b10f7512a': `and start this one`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,

package/src/utils.ts

@@ -17,6 +17,25 @@ export { isSystemCategory } from './flow/categoryUtils';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
+/**
+ * Normalize a message attachment into the `contentType:url` string that
+ * `temba-thumbnail` expects. The messages CRUDL endpoint serializes
+ * attachments as `{content_type, url}` objects, while other message
+ * surfaces (e.g. realtime contact events) carry them already as strings —
+ * accept either shape.
+ */
+export const attachmentAsString = (attachment: string | Attachment): string => {
+  if (typeof attachment === 'string') {
+    return attachment;
+  }
+  // guard against malformed objects — an empty result is a no-op for
+  // temba-thumbnail, which beats rendering "undefined:…"
+  if (!attachment?.content_type || !attachment?.url) {
+    return '';
+  }
+  return `${attachment.content_type}:${attachment.url}`;
+};
+
 export const colorHash = new ColorHash();
 
 export type Asset = KeyedAsset & Ticket & ContactField & Shortcut;