@nyaruka/temba-components 0.157.1 → 0.158.1

package/src/list/FlowList.ts

@@ -0,0 +1,251 @@
+import { css, html, TemplateResult } from 'lit';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+
+/**
+ * Flow CRUDL list — drop-in replacement for the rapidpro
+ * `flows/flow_list.html` table. Each row's leading icon reflects
+ * the flow type (messaging / voice / background / surveyor).
+ * Columns: name, runs, ongoing, completion bar, status, modified.
+ */
+export class FlowList extends ContentList<any> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .flow-name {
+        color: inherit;
+        font-weight: var(--w-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .flow-labels {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: 4px;
+      }
+      .issue-icon {
+        --icon-color: var(--warning);
+      }
+      .num {
+        font-variant-numeric: tabular-nums;
+        color: inherit;
+      }
+      .completion-bar {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        justify-content: flex-end;
+      }
+      .completion-bar .bar {
+        width: 50px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--sunken);
+        overflow: hidden;
+      }
+      .completion-bar .fill {
+        height: 100%;
+        background: var(--success);
+        border-radius: 999px;
+      }
+      .completion-bar .pct {
+        font-variant-numeric: tabular-nums;
+        color: var(--text-2);
+        min-width: 36px;
+        text-align: right;
+      }
+      .sparkline {
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .sparkline .line {
+        fill: none;
+        stroke: var(--accent-600);
+        stroke-width: 1.25;
+        stroke-linejoin: round;
+        stroke-linecap: round;
+      }
+      .sparkline .area {
+        fill: var(--accent-100);
+        opacity: 0.7;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.valueKey = 'uuid';
+    this.emptyMessage = 'No flows';
+    this.searchPlaceholder = 'Search flows';
+    this.columns = [
+      { key: 'name', label: 'Name', sortable: true, grow: 3 },
+      {
+        key: 'status',
+        label: 'Status',
+        width: '110px',
+        grow: 0
+      },
+      {
+        key: 'runs',
+        label: 'Runs',
+        sortable: true,
+        width: '80px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'ongoing',
+        label: 'Ongoing',
+        sortable: true,
+        width: '80px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'completion',
+        label: 'Completion',
+        width: '120px',
+        grow: 0,
+        align: 'right'
+      },
+      {
+        key: 'activity',
+        label: 'Activity',
+        width: '120px',
+        grow: 0,
+        align: 'right'
+      }
+    ];
+    this.bulkActions = [
+      {
+        key: 'label',
+        label: 'Label',
+        icon: Icon.label,
+        labelsEndpoint: '/api/v2/flow-labels.json'
+      },
+      { key: 'export', label: 'Export results', icon: Icon.export },
+      { key: 'archive', label: 'Archive', icon: Icon.archive }
+    ];
+  }
+
+  protected getRowIcon(item: any): string | null {
+    switch (item?.type) {
+      case 'voice':
+      case 'ivr':
+        return Icon.flow_ivr;
+      case 'background':
+        return Icon.flow_background;
+      case 'survey':
+        return Icon.flow_surveyor;
+      default:
+        return Icon.flow_message;
+    }
+  }
+
+  protected getRowHref(item: any): string | null {
+    return item?.uuid ? `/flow/editor/${item.uuid}/` : null;
+  }
+
+  protected renderCell(
+    item: any,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'name': {
+        const labels = item.labels || [];
+        return html`<span class="flow-name"
+          >${item.name || ''}
+          ${item.has_issues
+            ? html`<temba-icon
+                class="issue-icon"
+                name=${Icon.issue}
+                size="0.9"
+              ></temba-icon>`
+            : null}
+          ${labels.length > 0
+            ? html`<span class="flow-labels">
+                ${labels.map(
+                  (l: any) =>
+                    html`<temba-label type="label" icon=${Icon.label}
+                      >${l.name}</temba-label
+                    >`
+                )}
+              </span>`
+            : null}
+        </span>`;
+      }
+      case 'runs':
+        return html`<span class="num"
+          >${(item.runs ?? 0).toLocaleString()}</span
+        >`;
+      case 'ongoing':
+        return html`<span class="num">${item.ongoing ?? 0}</span>`;
+      case 'completion':
+        return this.renderCompletion(item);
+      case 'activity':
+        return this.renderSparkline(item.activity || []);
+      case 'status':
+        return this.renderFlowStatus(item);
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+
+  private renderCompletion(item: any): TemplateResult {
+    const value = typeof item.completion === 'number' ? item.completion : 0;
+    const pct = Math.round(value * 100);
+    return html`
+      <div class="completion-bar">
+        <div class="bar">
+          <div class="fill" style="width: ${pct}%"></div>
+        </div>
+        <span class="pct">${pct}%</span>
+      </div>
+    `;
+  }
+
+  /** Render a tiny line+area sparkline from a numeric array.
+   * Values are normalized to the column's pixel viewBox; absolute
+   * magnitude isn't preserved — the goal is shape, not scale. */
+  private renderSparkline(values: number[]): TemplateResult {
+    if (!values || values.length < 2) return html``;
+    const w = 90;
+    const h = 22;
+    const max = Math.max(...values, 1);
+    const step = w / (values.length - 1);
+    const pts = values.map((v, i) => {
+      const x = i * step;
+      const y = h - (v / max) * (h - 2) - 1;
+      return [x.toFixed(1), y.toFixed(1)] as const;
+    });
+    const line = pts.map(([x, y]) => `${x},${y}`).join(' ');
+    const areaCmds = pts
+      .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x},${y}`)
+      .join(' ');
+    const area = `${areaCmds} L${w},${h} L0,${h} Z`;
+    return html`
+      <svg
+        class="sparkline"
+        width=${w}
+        height=${h}
+        viewBox="0 0 ${w} ${h}"
+        preserveAspectRatio="none"
+      >
+        <path class="area" d=${area}></path>
+        <polyline class="line" points=${line}></polyline>
+      </svg>
+    `;
+  }
+
+  private renderFlowStatus(item: any): TemplateResult {
+    const status = (item.status || 'active').toString().toLowerCase();
+    const kind = status === 'archived' ? 'archived' : 'active';
+    const label = status === 'archived' ? 'Archived' : 'Active';
+    return this.renderStatusPill(kind, label);
+  }
+}

package/src/list/MsgList.ts

@@ -0,0 +1,144 @@
+import { css, html, TemplateResult } from 'lit';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+
+/**
+ * Message CRUDL list — drop-in replacement for the rapidpro
+ * `msgs/msg_list.html` table. Reverse-chronological; rows carry
+ * contact name, message text + attachments + labels + active-flow
+ * pill, and a duration timestamp.
+ */
+export class MsgList extends ContentList<any> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .msg-meta {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+        font-size: 12px;
+        color: var(--text-3);
+      }
+      .msg-text {
+        display: block;
+        color: inherit;
+        font-weight: var(--w-regular);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .msg-row {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .attachment-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 0 6px 0 4px;
+        border-radius: 999px;
+        background: var(--sunken);
+        color: var(--text-3);
+        --icon-color: var(--text-3);
+        font-size: 11px;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+    this.valueKey = 'id';
+    this.emptyMessage = 'No messages';
+    this.searchPlaceholder = 'Search messages';
+    this.columns = [
+      { key: 'contact', label: 'Contact', width: '180px', grow: 0 },
+      { key: 'text', label: 'Message', grow: 2 },
+      {
+        key: 'created_on',
+        label: 'Sent',
+        width: '110px',
+        grow: 0,
+        align: 'right'
+      }
+    ];
+    this.bulkActions = [
+      {
+        key: 'label',
+        label: 'Label',
+        icon: Icon.label,
+        labelsEndpoint: '/api/v2/labels.json'
+      },
+      { key: 'archive', label: 'Archive', icon: Icon.archive },
+      { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
+    ];
+  }
+
+  protected renderCell(
+    item: any,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    switch (column.key) {
+      case 'contact': {
+        const contact = item.contact || {};
+        return html`<span class="msg-text"
+          >${contact.name || contact.urn || ''}</span
+        >`;
+      }
+      case 'text':
+        return this.renderMessageBody(item);
+      case 'created_on':
+        return html`<temba-date
+          value=${item.created_on}
+          display="duration"
+        ></temba-date>`;
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+
+  private renderMessageBody(item: any): TemplateResult {
+    const labels = item.labels || [];
+    const attachments = item.attachments || [];
+    const isOptin = item.msg_type === 'optin' || item.type === 'optin';
+
+    return html`
+      <div class="msg-row">
+        <span class="msg-text">
+          ${item.text || (isOptin ? 'Opt-in request' : '')}
+        </span>
+        ${labels.length || attachments.length || item.flow || isOptin
+          ? html`
+              <div class="msg-meta">
+                ${isOptin ? this.renderStatusPill('pending', 'opt-in') : null}
+                ${attachments.map(
+                  () => html`
+                    <span class="attachment-pill">
+                      <temba-icon
+                        name=${Icon.attachment}
+                        size="0.8"
+                      ></temba-icon>
+                      attachment
+                    </span>
+                  `
+                )}
+                ${item.flow
+                  ? html`<temba-label type="flow" icon=${Icon.flow}
+                      >${item.flow.name}</temba-label
+                    >`
+                  : null}
+                ${labels.map(
+                  (l: any) => html`
+                    <temba-label type="label" icon=${Icon.label}
+                      >${l.name}</temba-label
+                    >
+                  `
+                )}
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
+}

package/src/live/ContactChat.ts

@@ -64,11 +64,11 @@ export class ContactChat extends ContactStoreElement {
         display: flex;
         flex-direction: row;
         min-height: 0;
+        margin-top: var(--gap);
         --compose-shadow: none;
         --compose-border: none;
         --compose-padding: 3px;
         --compose-curvature: none;
-        border-top: 1px inset rgba(0, 0, 0, 0.05);
       }
 
       .chat-wrapper {
@@ -76,7 +76,11 @@ export class ContactChat extends ContactStoreElement {
         flex-grow: 1;
         flex-direction: column;
         min-height: 0;
-        background: #fff;
+        background: var(--surface);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       temba-contact-history {

package/src/live/ContactDetails.ts

@@ -21,36 +21,39 @@ const SCHEMES = {
 export class ContactDetails extends ContactStoreElement {
   static get styles() {
     return css`
-      .urn {
-        display: flex;
-        padding: 0.4em 1em 0.8em 1em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.5em;
+      .wrapper {
+        padding-top: 0em;
       }
 
-      .urn .path {
-        margin-left: 0.2em;
+      /* Mirrors the disabled <temba-contact-field> row so the Groups
+         entry reads as just another field — same label color/size,
+         same horizontal inset, same bottom separator. Margin matches
+         the combined .wrapper + :host margins of contact-field
+         (0.5em + 1em) so spacing between rows stays uniform. */
+      .row {
+        padding-bottom: 0.6em;
+        border-bottom: 1px solid #ececec;
+        margin-bottom: 1.5em;
       }
 
-      .wrapper {
-        padding-top: 0em;
+      .row .label {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
-      .groups {
-        padding: 0.4em 0.5em 0.6em 0.5em;
-        border-bottom: 1px solid #e6e6e6;
-        margin-bottom: 0.4em;
-      }
-      .group {
-        margin-right: 0.7em;
-        margin-bottom: 0.7em;
+      .row .value {
+        margin-left: 0.25em;
+        margin-top: 0.1em;
+        min-height: 1.75em;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4em;
       }
 
-      .label {
-        font-size: 0.8em;
-        color: rgb(136, 136, 136);
-        margin-left: 0.5em;
-        margin-bottom: 0.4em;
+      .group {
       }
     `;
   }
@@ -68,20 +71,22 @@ export class ContactDetails extends ContactStoreElement {
     return html`
       <div class="wrapper">
         ${this.data.groups.length > 0
-          ? html` <div class="groups">
+          ? html` <div class="row">
               <div class="label">Groups</div>
-              ${this.data.groups.map((group) => {
-                return html`<temba-label
-                  class="group"
-                  onclick="goto(event)"
-                  href="/contact/group/${group.uuid}/"
-                  icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
-                  type="group"
-                  clickable
-                >
-                  ${group.name}
-                </temba-label>`;
-              })}
+              <div class="value">
+                ${this.data.groups.map((group) => {
+                  return html`<temba-label
+                    class="group"
+                    onclick="goto(event)"
+                    href="/contact/group/${group.uuid}/"
+                    icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
+                    type="group"
+                    clickable
+                  >
+                    ${group.name}
+                  </temba-label>`;
+                })}
+              </div>
             </div>`
           : null}
         ${this.data.urns.map((urn) => {

package/src/live/ContactFieldEditor.ts

@@ -93,51 +93,34 @@ export class ContactFieldEditor extends RapidElement {
         --color-widget-border: rgb(235, 235, 235);
       }
 
-      .prefix {
-        border-top-left-radius: var(--curvature-widget);
-        border-bottom-left-radius: var(--curvature-widget);
-        cursor: pointer !important;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: flex;
-        /* Pin to the top-left of the host (temba-select :host is
-           position: relative). Using top rather than margin-top keeps
-           the absolute element out of the flex flow of .left-side so
-           it doesn't push the selected value down. */
-        position: absolute;
-        top: -0.6em;
-        left: 0.5em;
-        pointer-events: none;
-        background: #fff;
-        border-radius: var(--curvature);
-      }
-
-      temba-select .prefix {
-        top: -0.7em;
-      }
-
       .wrapper {
         margin-bottom: 0.5em;
       }
 
-      .prefix .name,
-      .label .name {
-        padding: 0em 0.4em;
-        color: rgba(100, 100, 100, 0.7);
+      .field-label {
+        display: block;
+        font-size: 12px;
+        font-weight: var(--w-medium);
+        color: var(--text-2);
+        margin: 0 0 4px 2px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        font-size: 0.8em;
+      }
+
+      .label .name {
+        color: var(--text-2);
+        font-size: 12px;
+        font-weight: var(--w-medium);
       }
 
       .disabled .name {
-        margin-top: 1em;
-        margin-left: 0.75em;
+        margin-top: 0.25em;
+        margin-left: 0.25em;
       }
 
       .disabled .value {
-        margin-left: 0.9em;
+        margin-left: 0.25em;
         margin-top: 0.1em;
         min-height: 1.75em;
       }
@@ -426,27 +409,30 @@ export class ContactFieldEditor extends RapidElement {
   }
 
   private renderDateField(state: TemplateResult) {
-    return html` <temba-datepicker
-      timezone=${this.timezone}
-      value="${this.value ? this.value : ''}"
-      @change=${this.handleDateChange}
-      ?disabled=${this.disabled}
-      time
-    >
-      <div class="prefix" slot="prefix">
-        <div class="name">${this.name}</div>
-      </div>
-      <div class="postfix" slot="postfix">
-        <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
-          ${state}
+    return html`
+      <label id="field-label" class="field-label">${this.name}</label>
+      <temba-datepicker
+        aria-labelledby="field-label"
+        timezone=${this.timezone}
+        value="${this.value ? this.value : ''}"
+        @change=${this.handleDateChange}
+        ?disabled=${this.disabled}
+        time
+      >
+        <div class="postfix" slot="postfix">
+          <div class="popper ${this.status}  ${this.dirty ? 'dirty' : ''}">
+            ${state}
+          </div>
         </div>
-      </div>
-    </temba-datepicker>`;
+      </temba-datepicker>
+    `;
   }
 
   private renderTextField(state: TemplateResult) {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-textinput
+        aria-labelledby="field-label"
         class="${this.status} ${this.dirty ? 'dirty' : ''}"
         value="${this.value ? this.value : ''}"
         @keyup=${this.handleInput}
@@ -454,10 +440,6 @@ export class ContactFieldEditor extends RapidElement {
         type=${this.getInputType(this.type)}
         ?disabled=${this.disabled}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
-
         <div class="postfix">
           <div
             class="popper ${this.iconClass} ${this.status}  ${this.dirty
@@ -506,7 +488,9 @@ export class ContactFieldEditor extends RapidElement {
 
   public renderLocationField(level: string = 'state') {
     return html`
+      <label id="field-label" class="field-label">${this.name}</label>
       <temba-select
+        aria-labelledby="field-label"
         endpoint="/api/internal/locations.json?level=${level}"
         nameKey="path"
         valueKey="path"
@@ -516,14 +500,10 @@ export class ContactFieldEditor extends RapidElement {
         queryParam="query"
         searchable
         clearable
-        inpsutStyle=${JSON.stringify({ 'margin-top': '1.1em !important;' })}
         values=${this.value
           ? JSON.stringify([{ path: this.value, osm_id: this.value }])
           : '[]'}
       >
-        <div class="prefix" slot="prefix">
-          <div class="name">${this.name}</div>
-        </div>
       </temba-select>
     `;
   }

package/src/live/ContactFields.ts

@@ -66,9 +66,8 @@ export class ContactFields extends ContactStoreElement {
 
       .toggle {
         display: flex;
-        background: #fff;
         align-items: center;
-        margin-bottom: 0.5em;
+        margin-top: 0.5em;
       }
 
       .disabled .toggle {