@nyaruka/temba-components 0.167.0 → 0.168.0

package/src/live/ContactFieldEditor.ts

@@ -37,12 +37,21 @@ export class ContactFieldEditor extends RapidElement {
   @property({ type: String })
   iconClass = '';
 
+  @property({ type: String })
+  valueIcon = '';
+
+  @property({ type: String })
+  valueIconLabel = '';
+
   @property({ type: String })
   status: Status = Status.Ready;
 
   @property({ type: Boolean })
   disabled = false;
 
+  @property({ type: Boolean })
+  searchable = true;
+
   @property({ type: Boolean })
   dirty = false;
 
@@ -60,7 +69,7 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-bg: transparent;
         --color-widget-bg-focused: #fff;
         --widget-box-shadow: none;
-        padding-bottom: 0.6em;
+        padding-bottom: var(--contact-field-padding-bottom, 0.6em);
         border-bottom: var(--contact-field-separator, 1px solid #ececec);
       }
 
@@ -94,7 +103,7 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       .wrapper {
-        margin-bottom: 0.5em;
+        margin-bottom: var(--contact-field-wrapper-margin-bottom, 0.5em);
       }
 
       .field-label {
@@ -123,10 +132,19 @@ export class ContactFieldEditor extends RapidElement {
       }
 
       .disabled .value {
-        color: var(--text-1);
+        color: var(--contact-field-value-color, var(--text-1));
         margin-left: 0.25em;
         margin-top: 0.35em;
         min-height: 1.75em;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .value-prefix {
+        display: flex;
+        align-items: center;
+        --icon-color: var(--contact-field-value-icon-color, var(--text-3));
       }
 
       .postfix {
@@ -337,9 +355,12 @@ export class ContactFieldEditor extends RapidElement {
     evt.stopPropagation();
   }
 
-  public handleResponse(response: WebResponse) {
+  public handleResponse(response: WebResponse, savedValue?: string) {
     if (response.status === 200) {
-      this.value = response.json.fields[this.key];
+      this.value =
+        savedValue !== undefined
+          ? savedValue
+          : response.json.fields?.[this.key] || '';
       // this.status = Status.Success;
       // on success lets go back to ready state for now
       this.status = Status.Ready;
@@ -452,12 +473,14 @@ export class ContactFieldEditor extends RapidElement {
             @click=${this.handleIconClick}
           >
             ${state}
-            <temba-icon
-              class="search"
-              icon-action="search"
-              name="${Icon.search}"
-              animateclick="pulse"
-            ></temba-icon>
+            ${this.searchable
+              ? html`<temba-icon
+                  class="search"
+                  icon-action="search"
+                  name="${Icon.search}"
+                  animateclick="pulse"
+                ></temba-icon>`
+              : null}
             <temba-icon
               class="copy"
               icon-action="copy"
@@ -528,6 +551,18 @@ export class ContactFieldEditor extends RapidElement {
       >
         <div class="label"><div class="name">${this.name}</div></div>
         <div class="value">
+          ${this.valueIcon
+            ? html`<temba-tip
+                class="value-prefix"
+                text=${this.valueIconLabel}
+                position="top"
+              >
+                <temba-icon
+                  name=${this.valueIcon}
+                  aria-label=${this.valueIconLabel}
+                ></temba-icon>
+              </temba-tip>`
+            : null}
           ${this.type === 'datetime'
             ? this.value
               ? html`<temba-date

package/src/live/ContactFields.ts

@@ -10,7 +10,7 @@ import { getClasses, postJSON } from '../utils';
 import { ContactFieldEditor } from './ContactFieldEditor';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Checkbox } from '../form/Checkbox';
-import { CustomEventType } from '../interfaces';
+import { ContactField, CustomEventType } from '../interfaces';
 
 const MIN_FOR_FILTER = 10;
 
@@ -123,13 +123,47 @@ export class ContactFields extends ContactStoreElement {
   }
 
   private isAgent(): boolean {
-    return this.role === 'T';
+    return this.role === 'T' || this.role?.toLowerCase() === 'agent';
+  }
+
+  private getAgentAccess(field: ContactField): 'none' | 'view' | 'edit' {
+    const access = field.agent_access?.toLowerCase();
+    if (access === 'n' || access === 'none') return 'none';
+    if (access === 'e' || access === 'edit') return 'edit';
+    return 'view';
+  }
+
+  private canViewField(field: ContactField): boolean {
+    return !this.isAgent() || this.getAgentAccess(field) !== 'none';
+  }
+
+  private canEditField(field: ContactField): boolean {
+    return (
+      !this.disabled &&
+      (!this.isAgent() || this.getAgentAccess(field) === 'edit')
+    );
+  }
+
+  private getVisibleFieldEntries(): [string, string][] {
+    if (!this.data || !this.fieldsReady) return [];
+    return Object.entries(this.data.fields).filter(
+      ([key]: [string, string]) => {
+        const field = this.store.getContactField(key);
+        return !!field && this.canViewField(field);
+      }
+    );
   }
 
   public willUpdate(changed: PropertyValues): void {
     super.willUpdate(changed);
-    if (changed.has('data') && this.data) {
-      if (Object.keys(this.data.fields).length <= MIN_FOR_FILTER) {
+    if (
+      (changed.has('data') ||
+        changed.has('fieldsReady') ||
+        changed.has('role')) &&
+      this.data &&
+      this.fieldsReady
+    ) {
+      if (this.getVisibleFieldEntries().length <= MIN_FOR_FILTER) {
         this.showAll = true;
       }
     }
@@ -139,19 +173,29 @@ export class ContactFields extends ContactStoreElement {
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
     super.updated(changes);
-    if (changes.has('data') && this.data) {
+    if (
+      (changes.has('data') ||
+        changes.has('fieldsReady') ||
+        changes.has('role')) &&
+      this.data &&
+      this.fieldsReady
+    ) {
       this.fireCustomEvent(CustomEventType.DetailsChanged, {
-        count: Object.values(this.data.fields).filter((value) => !!value).length
+        count: this.getVisibleFieldEntries().filter(([, value]) => !!value)
+          .length
       });
     }
   }
 
   public handleFieldChanged(evt: InputEvent) {
     const field = evt.currentTarget as ContactFieldEditor;
+    const definition = this.store.getContactField(field.key);
+    if (!definition || !this.canEditField(definition)) return;
+
     const value = field.value;
 
     // TODO: Use contact.postChanges instead of postJSON
-    postJSON(this.endpoint + this.data.uuid, {
+    postJSON(this.writeEndpoint + this.data.uuid, {
       fields: { [field.key]: value }
     })
       .then((response: any) => {
@@ -179,9 +223,8 @@ export class ContactFields extends ContactStoreElement {
       // guard against keys with no matching field definition (mid-load races
       // or fields that have since been deleted) so a single missing
       // definition can't throw and blank out the entire tab
-      const fieldsToShow = Object.entries(this.data.fields)
-        .filter(([key]: [string, string]) => !!this.store.getContactField(key))
-        .sort((a: [string, string], b: [string, string]) => {
+      const fieldsToShow = this.getVisibleFieldEntries().sort(
+        (a: [string, string], b: [string, string]) => {
           const [ak] = a;
           const [bk] = b;
           const fieldA = this.store.getContactField(ak);
@@ -243,7 +286,8 @@ export class ContactFields extends ContactStoreElement {
           }
 
           return ak.localeCompare(bk);
-        });
+        }
+      );
 
       if (fieldsToShow.length == 0) {
         return html`<slot name="empty"></slot>`;
@@ -260,17 +304,14 @@ export class ContactFields extends ContactStoreElement {
           type=${field.value_type}
           @change=${this.handleFieldChanged}
           timezone=${this.timezone}
-          ?disabled=${(this.isAgent() && field.agent_access === 'view') ||
-          this.disabled
-            ? true
-            : false}
+          ?disabled=${!this.canEditField(field)}
         ></temba-contact-field>`;
       });
 
       return html`
         <div class=${getClasses({ disabled: this.disabled })}>
           <div class="fields ${this.showAll ? 'show-all' : ''}">${fields}</div>
-          ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER
+          ${fieldsToShow.length >= MIN_FOR_FILTER
             ? html`<div class="toggle">
                 <div style="flex-grow: 1"></div>
                 <div>

package/src/live/ContactStoreElement.ts

@@ -18,14 +18,21 @@ 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
+  // Resolve each URN against a channel while retaining the user's priority
+  // order. Consumers can select the first channel-backed URN for messaging.
   @property({ type: String })
-  endpoint = '/api/v2/contacts.json?expand_urns=true&uuid=';
+  endpoint = '/api/v2/contacts.json?expand_urns=true&urn_order=priority&uuid=';
+
+  // Writes go through the internal API, which responds with the same shape
+  // as the read endpoint above.
+  @property({ type: String })
+  writeEndpoint = '/api/internal/contacts.json?uuid=';
 
   prepareData(data: any) {
-    if (data && data.length > 0) {
-      data = data[0];
+    if (data) {
+      data = Array.isArray(data) ? data[0] : data;
+    }
+    if (data) {
       data.groups.forEach((group: Group) => {
         group.is_dynamic = this.store.isDynamicGroup(group.uuid);
       });
@@ -53,16 +60,16 @@ export class ContactStoreElement extends EndpointMonitorElement {
     // clear our cache so we don't have any races
     this.store.removeFromCache(`${this.endpoint}${this.contact}`);
     return this.store
-      .postJSON(`${this.endpoint}${this.contact}`, payload)
+      .postJSON(`${this.writeEndpoint}${this.contact}`, payload)
       .then((response) => {
         this.setContact(response.json);
       });
   }
 
-  public setContact(contact: any) {
+  public setContact(contact: any, contactId = this.contact) {
     // make sure contact data is properly prepped
     this.data = this.prepareData([contact]);
-    this.store.updateCache(`${this.endpoint}${this.contact}`, this.data);
+    this.store.updateCache(`${this.endpoint}${contactId}`, this.data);
   }
 
   public willUpdate(changed: PropertyValues): void {

package/src/locales/es.ts

@@ -3,7 +3,7 @@
     // Re-generate this file by running lit-localize
 
     
-    
+    import {str} from '@lit/localize';
 
     /* eslint-disable no-irregular-whitespace */
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -12,7 +12,8 @@
       'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
-'s81f17cfc89a04338': `Interrupt flow`,
+'s7722a91d3a512442': str`Last seen ${0}`,
+'s22965bb9808befb0': `Interrupt`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/fr.ts

@@ -3,7 +3,7 @@
     // Re-generate this file by running lit-localize
 
     
-    
+    import {str} from '@lit/localize';
 
     /* eslint-disable no-irregular-whitespace */
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -12,7 +12,8 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
-'s81f17cfc89a04338': `Interrupt flow`,
+'s7722a91d3a512442': str`Last seen ${0}`,
+'s22965bb9808befb0': `Interrupt`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/locales/pt.ts

@@ -3,7 +3,7 @@
     // Re-generate this file by running lit-localize
 
     
-    
+    import {str} from '@lit/localize';
 
     /* eslint-disable no-irregular-whitespace */
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -12,7 +12,8 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
-'s81f17cfc89a04338': `Interrupt flow`,
+'s7722a91d3a512442': str`Last seen ${0}`,
+'s22965bb9808befb0': `Interrupt`,
 's122d4de68bcfcdf4': `It's okay to restart`,
 's3eb2567092b4d7c1': `from the beginning`,
 's28f37776b3901438': `It's okay to interrupt`,

package/src/simulator/Simulator.ts

@@ -822,6 +822,10 @@ export class Simulator extends RapidElement {
   private previousEventCount = 0;
   private chat: Chat = null;
 
+  // bumped on reset so in-flight sprint responses started against the old
+  // session are discarded instead of polluting the restarted one
+  private sessionGeneration = 0;
+
   @property({ type: Object })
   private session: Session | null = null;
 
@@ -1207,10 +1211,17 @@ export class Simulator extends RapidElement {
       }
     };
 
+    const generation = this.sessionGeneration;
     try {
       const response = await postJSON(this.endpoint, body);
+      if (generation !== this.sessionGeneration) {
+        return;
+      }
       this.updateRunContext(response.json as RunContext);
     } catch (error) {
+      if (generation !== this.sessionGeneration) {
+        return;
+      }
       console.error('Failed to start simulation:', error);
       const errorEvent = {
         uuid: generateUUIDv7(),
@@ -1510,6 +1521,9 @@ export class Simulator extends RapidElement {
   }
 
   private async handleReset() {
+    // invalidate any in-flight sprint responses from the old session
+    this.sessionGeneration++;
+
     // reset simulation state
     this.events = [];
     this.session = null;
@@ -2068,15 +2082,29 @@ export class Simulator extends RapidElement {
       }
     };
 
+    const generation = this.sessionGeneration;
     try {
       const response = await postJSON(this.endpoint, body);
 
       // add a small delay before showing the reply to simulate typing
       await new Promise((resolve) => setTimeout(resolve, 400));
 
+      // the simulation was reset while we were waiting, this reply belongs
+      // to the old session. we deliberately don't touch `sprinting` here:
+      // handleReset already cleared it when it bumped the generation (and
+      // clearing it now could stomp a sprint the new session has started).
+      // anything else that invalidates a generation must likewise reset
+      // `sprinting` or the input stays disabled.
+      if (generation !== this.sessionGeneration) {
+        return;
+      }
+
       // pass null for msgInEvt since we already added it
       this.updateRunContext(response.json as RunContext, null);
     } catch (error) {
+      if (generation !== this.sessionGeneration) {
+        return;
+      }
       console.error('Failed to resume simulation:', error);
       const errorEvent = {
         uuid: generateUUIDv7(),

package/src/styles/pillVariants.ts

@@ -43,7 +43,8 @@ export const PILL_TYPES: ReadonlySet<string> = new Set([
   'keyword',
   'channel',
   'topic',
-  'campaign'
+  'campaign',
+  'removed'
 ]);
 
 /** Default icon name for each pill variant. Used when a consumer
@@ -145,6 +146,17 @@ export const pillVariants = css`
     border-color: #fde68a;
     --icon-color: var(--field);
   }
+  .pill-removed {
+    /* Removal pill — used when an entity is taken away (e.g. removed
+       from a group in the chat history). Fixed at the Tailwind red
+       ramp (red-100 bg / red-200 border / red-800 text) for the same
+       reason .pill-field is fixed at yellow: color-mixing a light red
+       into white washes out before it reads as "red". */
+    background: #fee2e2;
+    color: #991b1b;
+    border-color: #fecaca;
+    --icon-color: #991b1b;
+  }
   .pill-keyword {
     background: var(--sunken);
     color: var(--text-1);

package/web-test-runner.config.mjs

@@ -432,6 +432,8 @@ export default {
   files: ['**/test/**/*.test.ts', '!**/test/utils.test.ts'],
   nodeResolve: true,
   concurrency: 4,
+  // screenshot-heavy test files can exceed the default 120s on slower CI runners
+  testsFinishTimeout: 240000,
   filterBrowserLogs(log) {
     return !log.args.some(
       (arg) => typeof arg === 'string' && arg.includes('Lit is in dev mode')

package/xliff/es.xlf

@@ -24,9 +24,6 @@
 <trans-unit id="sea4f08110bb8f15d">
   <source>Remove</source>
 </trans-unit>
-<trans-unit id="s81f17cfc89a04338">
-  <source>Interrupt flow</source>
-</trans-unit>
 <trans-unit id="s122d4de68bcfcdf4">
   <source>It's okay to restart</source>
 </trans-unit>
@@ -39,6 +36,12 @@
 <trans-unit id="s6838d20b10f7512a">
   <source>and start this one</source>
 </trans-unit>
+<trans-unit id="s22965bb9808befb0">
+  <source>Interrupt</source>
+</trans-unit>
+<trans-unit id="s7722a91d3a512442">
+  <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -23,9 +23,6 @@
 <trans-unit id="sea4f08110bb8f15d">
   <source>Remove</source>
 </trans-unit>
-<trans-unit id="s81f17cfc89a04338">
-  <source>Interrupt flow</source>
-</trans-unit>
 <trans-unit id="s122d4de68bcfcdf4">
   <source>It's okay to restart</source>
 </trans-unit>
@@ -38,6 +35,12 @@
 <trans-unit id="s6838d20b10f7512a">
   <source>and start this one</source>
 </trans-unit>
+<trans-unit id="s22965bb9808befb0">
+  <source>Interrupt</source>
+</trans-unit>
+<trans-unit id="s7722a91d3a512442">
+  <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -23,9 +23,6 @@
 <trans-unit id="sea4f08110bb8f15d">
   <source>Remove</source>
 </trans-unit>
-<trans-unit id="s81f17cfc89a04338">
-  <source>Interrupt flow</source>
-</trans-unit>
 <trans-unit id="s122d4de68bcfcdf4">
   <source>It's okay to restart</source>
 </trans-unit>
@@ -38,6 +35,12 @@
 <trans-unit id="s6838d20b10f7512a">
   <source>and start this one</source>
 </trans-unit>
+<trans-unit id="s22965bb9808befb0">
+  <source>Interrupt</source>
+</trans-unit>
+<trans-unit id="s7722a91d3a512442">
+  <source>Last seen <x id="0" equiv-text="${lastSeen.duration}"/></source>
+</trans-unit>
 </body>
 </file>
 </xliff>