@nyaruka/temba-components 0.156.18 → 0.157.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.18",
+  "version": "0.157.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Button.ts

@@ -7,170 +7,148 @@ export class Button extends LitElement {
   static get styles() {
     return css`
       :host {
-        display: flex;
+        display: inline-flex;
         align-self: stretch;
-        font-family: var(--font-family);
-        font-weight: 400;
-      }
-
-      .small {
-        font-size: 0.8em;
-        --button-y: 0px;
-        --button-x: 0.5em;
-      }
-
-      .v-2.button-container {
-        background: var(--button-bg);
-        background-image: var(--button-bg-img);
-        color: var(--button-text);
-        box-shadow: var(--button-shadow);
-        transition: all calc(var(--transition-speed) / 2) ease-in;
+        font-family: var(--font);
       }
 
+      /* DS .btn-sm — sizing, type, transition, shape */
       .button-container {
-        color: #fff;
-        cursor: pointer;
-        display: flex;
+        display: inline-flex;
+        align-items: center;
+        justify-content: var(--button-justify, center);
+        gap: 6px;
         flex-grow: 1;
-        border-radius: var(--curvature);
-        outline: none;
-        transition: background ease-in var(--transition-speed);
+        height: 28px;
+        padding: 0 10px;
+        border: 1px solid transparent;
+        border-radius: var(--r-sm);
+        font-size: 12.5px;
+        font-weight: var(--w-regular);
+        letter-spacing: -0.005em;
+        line-height: 1;
+        white-space: nowrap;
+        cursor: pointer;
         user-select: none;
         -webkit-user-select: none;
-        text-align: center;
-        border: var(--button-border, none);
-      }
-
-      .button-name {
-        white-space: nowrap;
-      }
-
-      .secondary-button:hover .button-mask {
-        border: 1px solid rgba(0, 0, 0, 0.15);
-      }
-
-      .button-mask:hover {
-        background: rgba(0, 0, 0, 0.05);
-      }
-
-      .button-mask:active {
-        background: rgba(0, 0, 0, 0.12);
-      }
-
-      .button-container:focus {
         outline: none;
-      }
-
-      /* Only show the focus ring for keyboard navigation, never on click. */
-      .button-container:focus-visible {
-        box-shadow: var(--widget-box-shadow-focused);
-      }
-
-      .button-container.secondary-button:focus-visible .button-mask {
-        background: transparent;
+        box-sizing: border-box;
+        transition:
+          background 120ms,
+          border-color 120ms,
+          color 120ms,
+          box-shadow 120ms;
       }
 
       .button-mask {
-        padding: var(--button-y) var(--button-x);
-        border-radius: var(--curvature);
-        border: 1px solid transparent;
-        transition: var(--transition-speed);
-        background: var(--button-mask);
-        display: flex;
+        display: inline-flex;
         align-items: center;
+        gap: 6px;
+        line-height: 1;
       }
 
-      .button-container.disabled-button {
-        background: rgba(0, 0, 0, 0.05);
-        color: rgba(255, 255, 255, 0.45);
-        cursor: default;
+      .button-name {
+        white-space: nowrap;
       }
 
-      .button-container.disabled-button .button-mask {
-        box-shadow: 0 0 0px 1px var(--color-button-disabled);
+      /* even smaller variant (compact lists, list-row actions, etc.) */
+      .small {
+        height: 24px;
+        padding: 0 8px;
+        font-size: 12px;
       }
 
-      .button-container.disabled-button:hover .button-mask {
-        box-shadow: 0 0 0px 1px var(--color-button-disabled);
-        background: rgba(0, 0, 0, 0.05);
+      /* DS .btn-primary — solid accent fill with a slightly darker
+         1px border so the visible box matches the secondary's
+         1px-bordered box. */
+      .primary-button {
+        background: var(--accent-600);
+        border-color: var(--accent-700);
+        color: #fff;
       }
-
-      .button-container.active-button .button-mask {
+      .primary-button:hover {
+        background: var(--accent-700);
       }
 
-      .secondary-button.active-button {
-        background: transparent;
-        color: var(--color-text);
+      /* DS .btn-secondary — surface bg with a 1px gray outline. */
+      .secondary-button {
+        background: var(--surface);
+        border-color: var(--border-strong);
+        color: var(--text-1);
       }
-
-      .secondary-button.active-button .button-mask {
-        border: 1px solid transparent;
+      .secondary-button:hover {
+        background: var(--sunken);
       }
 
-      .button-container.secondary-button.active-button:focus-visible
-        .button-mask {
-        background: transparent;
-        box-shadow: none;
+      /* affirmative + attention share DS .btn-primary chrome but tint
+         green; treat them as solid CTAs. */
+      .attention-button,
+      .affirmative {
+        background: var(--success, #16a34a);
+        border-color: color-mix(in srgb, var(--success, #16a34a) 80%, black);
+        color: #fff;
       }
-
-      .primary-button {
-        background: var(--color-button-primary);
-        color: var(--color-button-primary-text);
+      .attention-button:hover,
+      .affirmative:hover {
+        background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
       }
 
-      .affirmative {
-        background: var(--color-button-attention);
+      /* DS .btn-danger */
+      .destructive-button {
+        background: var(--danger, #d03f3f);
+        border-color: color-mix(in srgb, var(--danger, #d03f3f) 80%, black);
+        color: #fff;
       }
-
-      .light-button {
-        background: var(--color-button-light);
-        color: var(--color-button-light-text);
+      .destructive-button:hover {
+        background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
       }
 
+      /* DS .btn-ghost — text-only, hover fills with sunken */
+      .light-button,
       .lined-button {
-        border: 1px solid rgba(0, 0, 0, 0.1);
-        color: rgba(0, 0, 0, 0.7);
-        background: transparent;
+        background: var(--surface);
+        border-color: var(--border-strong);
+        color: var(--text-1);
       }
-
-      .lined-button .button-mask {
-        flex-grow: 1;
-      }
-
-      .lined-button .button-mask:hover {
-        background: rgba(0, 0, 0, 0.03);
+      .light-button:hover,
+      .lined-button:hover {
+        background: var(--sunken);
       }
 
+      /* icon-only button — square footprint, ghost chrome */
       .icon-button {
-        --button-y: 0.2em;
-        --button-x: 0em;
+        width: 28px;
+        padding: 0;
+        background: transparent;
+        border-color: transparent;
+        color: var(--text-2);
       }
-
-      .icon-button temba-icon {
-        padding: 0 0.5em;
+      .icon-button:hover {
+        background: var(--sunken);
+        color: var(--text-1);
       }
-
-      .attention-button {
-        background: var(--color-button-attention);
-        color: var(--color-button-primary-text);
+      .icon-button.small {
+        width: 24px;
       }
 
-      .secondary-button {
-        background: transparent;
-        color: var(--color-text);
+      /* active = pressed-down look — slightly inset */
+      .button-container.active-button {
+        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
       }
-
-      .destructive-button {
-        background: var(--color-button-destructive);
-        color: var(--color-button-destructive-text);
+      .secondary-button.active-button {
+        background: var(--sunken);
       }
 
-      .button-mask.disabled-button {
-        background: rgba(0, 0, 0, 0.1);
+      /* disabled */
+      .button-container.disabled-button {
+        opacity: 0.45;
+        cursor: not-allowed;
+        pointer-events: none;
       }
 
-      .secondary-button .button-mask:hover {
-        background: transparent;
+      /* focus ring — keyboard nav only */
+      .button-container:focus-visible {
+        box-shadow: var(--widget-box-shadow-focused);
       }
 
       .submit-animation {
@@ -278,6 +256,9 @@ export class Button extends LitElement {
             (!this.primary &&
               !this.secondary &&
               !this.attention &&
+              !this.destructive &&
+              !this.lined &&
+              !this.light &&
               this.v == 1),
           'secondary-button': this.secondary,
           'disabled-button': this.disabled,
@@ -286,7 +267,7 @@ export class Button extends LitElement {
           'destructive-button': this.destructive,
           'light-button': this.light,
           'lined-button': this.lined,
-          'icon-button': !!this.icon,
+          'icon-button': !!this.icon && !this.name,
           small: this.small
         })}"
         tabindex="0"

package/src/display/Chat.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { RapidElement } from '../RapidElement';
 import { CustomEventType } from '../interfaces';
+import { TicketEvent } from '../events';
 import { DEFAULT_AVATAR } from '../webchat/assets';
 
 const BATCH_TIME_WINDOW = 60 * 60 * 1000;
@@ -67,6 +68,8 @@ export interface ObjectReference {
 interface User extends ObjectReference {
   avatar?: string;
   email: string;
+  first_name?: string;
+  last_name?: string;
 }
 
 export interface Msg {
@@ -153,6 +156,11 @@ export class Chat extends RapidElement {
         left: 0;
         right: 0;
         display: block;
+        /* The slot overlays the bottom of the chat history, so clicks
+           on the chat scrollbar or messages behind it must pass
+           through. Slotted footer content can opt back in with
+           pointer-events: auto on its interactive bits. */
+        pointer-events: none;
       }
 
       .block {
@@ -307,11 +315,18 @@ export class Chat extends RapidElement {
 
       .note .bubble {
         background: #fffac3;
-        color: rgba(0, 0, 0, 0.7);
+        border: 1px solid #e8d169;
+        color: #5d4e1e;
       }
 
       .note .bubble .name {
-        color: rgba(0, 0, 0, 0.5);
+        color: rgba(93, 78, 30, 0.65);
+      }
+
+      .note-time {
+        margin-top: 0.35em;
+        font-size: 0.9em;
+        color: rgba(93, 78, 30, 0.65);
       }
 
       .warning .bubble {
@@ -447,6 +462,9 @@ export class Chat extends RapidElement {
         display: none;
       }
 
+      /* Top/bottom scroll-shadow indicators. Decorative only — they
+         must not intercept clicks (would otherwise block the chat
+         scrollbar and the bottom edge of the messages area). */
       .messages:before {
         content: '';
         background: radial-gradient(
@@ -461,6 +479,7 @@ export class Chat extends RapidElement {
         width: 100%;
         transition: opacity var(--toggle-speed, 200ms) ease-out;
         z-index: 1;
+        pointer-events: none;
       }
 
       .messages:after {
@@ -480,6 +499,7 @@ export class Chat extends RapidElement {
         margin-right: 5em;
         transition: opacity var(--toggle-speed, 200ms) ease-out;
         z-index: 1;
+        pointer-events: none;
       }
 
       .bubble-wrap {
@@ -620,6 +640,10 @@ export class Chat extends RapidElement {
         padding: 0;
       }
 
+      .event strong {
+        font-weight: 500;
+      }
+
       .collapse {
       }
 
@@ -941,15 +965,19 @@ export class Chat extends RapidElement {
       return { same: true };
     }
 
-    // for type equivalence, treat all non-message types as the same
+    // for type equivalence, treat all non-message types as the same.
+    // Notes are treated like messages so they group with other notes
+    // only when type + author match (and split from non-note events).
     const isMsg1 =
       msg1.type === 'msg_created' ||
       msg1.type === 'msg_received' ||
-      msg1.type === 'ivr_created';
+      msg1.type === 'ivr_created' ||
+      msg1.type === 'ticket_note_added';
     const isMsg2 =
       msg2.type === 'msg_created' ||
       msg2.type === 'msg_received' ||
-      msg2.type === 'ivr_created';
+      msg2.type === 'ivr_created' ||
+      msg2.type === 'ticket_note_added';
     const typeMatch =
       isMsg1 && isMsg2 ? msg1.type === msg2.type : isMsg1 === isMsg2;
 
@@ -1180,7 +1208,8 @@ export class Chat extends RapidElement {
     const isMessageType =
       currentMsg.type === 'msg_received' ||
       currentMsg.type === 'msg_created' ||
-      currentMsg.type === 'ivr_created';
+      currentMsg.type === 'ivr_created' ||
+      currentMsg.type === 'ticket_note_added';
     const showAvatar =
       this.avatars && ((isMessageType && this.agent) || !incoming);
 
@@ -1246,13 +1275,18 @@ export class Chat extends RapidElement {
               const deletedClass = msgEvent._deleted ? 'deleted' : '';
               const latestClass = index === msgIds.length - 1 ? 'latest' : '';
               const eventClass = msg._rendered ? 'is-event' : '';
+              const noteClass = msg.type === 'ticket_note_added' ? 'note' : '';
               const matchClass =
                 this.highlightMessageUuid === msg.uuid ? 'search-match' : '';
               return html`<div
-                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${latestClass} ${eventClass} ${matchClass}"
+                class="row message ${statusClass} ${unsendableClass} ${deletedClass} ${latestClass} ${eventClass} ${noteClass} ${matchClass}"
                 data-uuid=${msg.uuid || nothing}
               >
-                ${this.renderMessage(msg, index == 0 ? name : null)}
+                ${this.renderMessage(
+                  msg,
+                  index == 0 ? name : null,
+                  index === msgIds.length - 1
+                )}
               </div>`;
             }
           )}
@@ -1262,6 +1296,8 @@ export class Chat extends RapidElement {
               <temba-user
                 uuid=${currentMsg._user?.uuid}
                 name=${name}
+                first_name=${currentMsg._user?.first_name}
+                last_name=${currentMsg._user?.last_name}
                 avatar=${currentMsg._user?.avatar}
                 ?system=${isSystem}
               >
@@ -1278,11 +1314,40 @@ export class Chat extends RapidElement {
     return { html: resultHtml, timestamp: newLastShownTimestamp };
   }
 
-  private renderMessage(event: ContactEvent, name = null): TemplateResult {
+  private renderNote(
+    event: TicketEvent,
+    name: string | null,
+    isLast: boolean
+  ): TemplateResult {
+    return html`<div class="bubble-wrap">
+      <div class="bubble">
+        ${name ? html`<div class="name">${name}</div>` : null}
+        <div style="white-space: pre-wrap;">${event.note}</div>
+      </div>
+      ${isLast
+        ? html`<div class="note-time">
+            <temba-date
+              value=${event.created_on.toISOString()}
+              display="relative"
+            ></temba-date>
+          </div>`
+        : null}
+    </div>`;
+  }
+
+  private renderMessage(
+    event: ContactEvent,
+    name = null,
+    isLast = false
+  ): TemplateResult {
     if (event._rendered) {
       return html`<div class="event">${event._rendered.html}</div>`;
     }
 
+    if (event.type === 'ticket_note_added') {
+      return this.renderNote(event as TicketEvent, name, isLast);
+    }
+
     const message = event as MsgEvent;
 
     // safety check: if msg doesn't exist, return nothing

package/src/display/Dropdown.ts

@@ -233,6 +233,17 @@ export class Dropdown extends RapidElement {
         arrowLeft = 10;
       }
 
+      // safety: keep dropdown off the viewport's left edge so popups
+      // anchored to far-left toggles (e.g. rail items) don't rub against
+      // the window edge. Shift the dropdown right and slide the arrow
+      // back the same amount so it still points at the toggle.
+      const MIN_LEFT = 8;
+      if (dropdownBounds.left < MIN_LEFT && !bumpedLeft) {
+        const shift = MIN_LEFT - dropdownBounds.left;
+        dropdownStyle['left'] = MIN_LEFT + 'px';
+        arrowLeft -= shift;
+      }
+
       const arrowStyle = {
         left: arrowLeft + 'px',
         borderWidth: this.arrowSize + 'px',