@nyaruka/temba-components 0.156.18 → 0.157.1

package/src/live/ContactChat.ts

@@ -7,6 +7,7 @@ import {
   TemplateResult
 } from 'lit';
 import { property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import {
   Contact,
   CustomEventType,
@@ -313,45 +314,51 @@ export class ContactChat extends ContactStoreElement {
         border-color: #ccc;
       }
 
-      .action-bar {
-      }
-
+      /* "Currently in [flow]" treatment.
+         Lives in the chat footer to advertise the active run with an
+         optional Interrupt action (the chip's X). Sized to its
+         contents only (inline-flex) so the chat scrollbar to the
+         right remains clickable, and pointer-events:none on the
+         wrapping footer means the rest of the row doesn't intercept
+         scrollbar drags either. Translucent white bg + backdrop
+         blur keeps the chat history legible through the chip. */
       .in-flow {
-        border-radius: 0.8em;
-        align-items: center;
-        background: #666;
-        padding: 0.5em 1em;
-        margin: 1em;
-        margin-right: 2em;
         display: inline-flex;
-        opacity: 0.9;
+        align-items: center;
+        gap: 8px;
+        padding: 0.4em 0.75em;
+        margin: 0.5em;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.75);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        box-shadow: var(--shadow-1);
       }
 
       .flow-footer {
         text-align: center;
         pointer-events: none;
+        /* The chat history has a scrollbar on the right edge; the
+           footer overlay spans the full container width, so centering
+           inside it lands the chip slightly right-of-center relative
+           to the visible message area. Reserve the scrollbar width on
+           the right so the chip is centered to what the user sees. */
+        padding-right: 15px;
       }
 
       .flow-footer .in-flow {
         pointer-events: auto;
       }
 
-      .in-flow:hover {
-        opacity: 1;
-      }
-
       .in-flow .flow-name {
-        display: flex;
-        color: #fff;
-      }
-
-      .in-flow a {
-        font-weight: bold;
-        color: #fff;
-      }
-
-      .in-flow .interrupt-button {
-        margin-left: 1em;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        /* Match the chat history event text — same hue + size — so
+           the "Currently in" line reads as one of the events rather
+           than its own UI chrome. */
+        font-size: 13.5px;
+        color: #8e8e93;
       }
 
       .in-flow .interrupt {
@@ -389,6 +396,18 @@ export class ContactChat extends ContactStoreElement {
         background: rgba(0, 0, 0, 0.03);
       }
 
+      /* Keep the assignment + topic controls the same height as the
+         Close button so the row reads as one strip. Shrink the user
+         avatars (--temba-scale) so they fit in the smaller box. */
+      .in-ticket temba-user-select,
+      .in-ticket temba-select {
+        --temba-select-min-height: 28px;
+      }
+
+      .in-ticket temba-user-select {
+        --temba-scale: 0.75;
+      }
+
       temba-user {
         border: 1px solid #ddd;
         padding: 0.2em 0.5em;
@@ -1003,8 +1022,11 @@ export class ContactChat extends ContactStoreElement {
         if (
           event.type === 'msg_created' ||
           event.type === 'msg_received' ||
-          event.type === 'ivr_created'
+          event.type === 'ivr_created' ||
+          event.type === 'ticket_note_added'
         ) {
+          // Notes render as chat-style bubbles (see Chat.ts), so push them
+          // through directly rather than prerendering into an inline event.
           messages.push(event);
         } else {
           this.prerender(event);
@@ -1420,26 +1442,21 @@ export class ContactChat extends ContactStoreElement {
                       <div slot="footer" class="flow-footer">
                         <div class="in-flow">
                           <div class="flow-name">
-                            <temba-icon name="flow" size="1.2"></temba-icon>
-                            <div>
-                              Currently in
-                              <a
-                                href="/flow/editor/${this.currentContact.flow
-                                  .uuid}/"
-                                >${this.currentContact.flow.name}</a
-                              >
-                            </div>
+                            <span>Currently in</span>
+                            <a
+                              href="/flow/editor/${this.currentContact.flow
+                                .uuid}/"
+                              onclick="goto(event, this)"
+                              ><temba-label
+                                type="flow"
+                                clickable
+                                ?removable=${this.showInterrupt}
+                                removeLabel=${msg('Interrupt flow')}
+                                @temba-remove=${this.handleInterrupt}
+                                >${this.currentContact.flow.name}</temba-label
+                              ></a
+                            >
                           </div>
-                          ${this.showInterrupt
-                            ? html`<temba-button
-                                class="interrupt-button"
-                                destructive
-                                small
-                                @click=${this.handleInterrupt}
-                                name="Interrupt"
-                              >
-                              </temba-button>`
-                            : null}
                         </div>
                       </div>
                     `

package/src/live/ContactDetails.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { ContactStoreElement } from './ContactStoreElement';
 import { Icon } from '../Icons';
 import { capitalize } from '../utils';
+import { getLanguageName } from '../languages';
 
 const STATUS = {
   active: 'Active',
@@ -62,7 +63,7 @@ export class ContactDetails extends ContactStoreElement {
       return;
     }
 
-    const lang = this.store.getLanguageName(this.data.language);
+    const lang = getLanguageName(this.data.language);
 
     return html`
       <div class="wrapper">
@@ -75,6 +76,7 @@ export class ContactDetails extends ContactStoreElement {
                   onclick="goto(event)"
                   href="/contact/group/${group.uuid}/"
                   icon=${group.is_dynamic ? Icon.group_smart : Icon.group}
+                  type="group"
                   clickable
                 >
                   ${group.name}

package/src/live/ContactFieldEditor.ts

@@ -101,16 +101,20 @@ export class ContactFieldEditor extends RapidElement {
         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;
-        margin-top: -0.6em;
-        margin-left: 0.5em;
+        top: -0.6em;
+        left: 0.5em;
         pointer-events: none;
         background: #fff;
         border-radius: var(--curvature);
       }
 
       temba-select .prefix {
-        margin-top: -1em;
+        top: -0.7em;
       }
 
       .wrapper {
@@ -191,19 +195,22 @@ export class ContactFieldEditor extends RapidElement {
         display: none;
       }
 
+      /* Keep popper icons within the widget's 34px content area so
+         the field height doesn't change when the search/copy buttons
+         appear (i.e. when a value is set). Horizontal padding only —
+         vertical sizing comes from align-items: stretch on the
+         flex .input-container. Inner elements (icons, save button)
+         own their own horizontal spacing via margin, so the popper
+         itself doesn't add asymmetric padding (which would offset
+         its contents and prevent centering). */
       .popper temba-icon {
-        padding: 0.5em 0em;
-        padding-right: 1em;
+        padding: 0 0.6em 0 0;
       }
 
-      .popper:first-child {
-        padding: 0.5em 0em;
-        padding-right: 0.5em;
-        padding-left: 1em;
-      }
-
-      .popper:last-child {
-        padding-right: 0em;
+      /* First icon gets extra left padding so it doesn't hug the
+         popper's left edge — visually balances the inter-icon gap. */
+      .popper temba-icon:first-of-type {
+        padding-left: 0.6em;
       }
 
       .copy.clicked temba-icon {
@@ -223,8 +230,19 @@ export class ContactFieldEditor extends RapidElement {
         align-items: center;
       }
 
-      .save-button {
-        padding-right: 1em;
+      /* .save-button is the class on the <temba-button> element
+         itself. Use tag+class selector and !important to outrank
+         :host { align-self: stretch } from inside Button.ts. min/max
+         height pin the button size so it can't grow with the parent
+         line height (relevant in DatePicker, where the container
+         wraps and the line is ~50px tall). */
+      temba-button.save-button {
+        align-self: center !important;
+        height: 22px !important;
+        min-height: 22px !important;
+        max-height: 22px !important;
+        margin: 5px 6px;
+        font-size: 12px;
       }
 
       .dirty .copy,
@@ -272,22 +290,6 @@ export class ContactFieldEditor extends RapidElement {
         padding: 0;
       }
 
-      .dirty temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .success temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .failure temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
-      .saving temba-datepicker .popper:first-child {
-        padding-left: 1em;
-      }
-
       temba-datepicker .postfix {
         margin-left: 0;
       }
@@ -305,6 +307,9 @@ export class ContactFieldEditor extends RapidElement {
 
       temba-select {
         --color-widget-bg: white;
+        /* Let the slotted prefix label escape the widget's top edge
+           — same notched-border look as the textinput / datepicker. */
+        --temba-select-container-overflow: visible;
       }
 
       temba-option {

package/src/live/FieldManager.ts

@@ -247,14 +247,14 @@ export class FieldManager extends EndpointMonitorElement {
         <div
           style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
         >
-          <span
+          <temba-label
+            type="field"
+            clickable
             @click=${this.handleFieldAction}
             data-key=${field.key}
             data-action="update"
-            style="color: var(--color-link-primary); cursor:pointer;"
+            >${field.label}</temba-label
           >
-            ${field.label}
-          </span>
           ${this.hasUsages(field)
             ? html`
                 <temba-icon

package/src/store/AppState.ts

@@ -1,5 +1,6 @@
 import { createStore, StoreApi } from 'zustand/vanilla';
-import { fetchResults, generateUUID } from '../utils';
+import { generateUUID } from '../utils';
+import { getLanguageName } from '../languages';
 import {
   Action,
   Exit,
@@ -193,7 +194,6 @@ export interface AppState {
   issuesByAction: Map<string, FlowIssue[]>;
 
   languageCode: string;
-  languageNames: { [code: string]: string };
   workspace: Workspace;
   isTranslating: boolean;
   viewingRevision: boolean;
@@ -209,7 +209,6 @@ export interface AppState {
   getCurrentActivity: () => Activity | null;
   fetchRevision: (endpoint: string, id?: string) => Promise<void>;
   fetchWorkspace: (endpoint: string) => Promise<void>;
-  fetchAllLanguages: (endpoint: string) => Promise<void>;
   fetchActivity: (endpoint: string) => Promise<void>;
   setActivityEndpoint: (endpoint: string) => void;
   updateActivity: (activity: Activity) => void;
@@ -267,7 +266,6 @@ export const zustand = createStore<AppState>()(
     immer((set, get) => ({
       features: [] as string[],
       brand: '',
-      languageNames: {},
       canvasSize: { width: 0, height: 0 },
       languageCode: '',
       workspace: null,
@@ -331,21 +329,6 @@ export const zustand = createStore<AppState>()(
         set({ workspace: data });
       },
 
-      fetchAllLanguages: async (endpoint) => {
-        const results = await fetchResults(endpoint);
-
-        // convert array to map for easier lookup
-        const allLanguages = results.reduce(function (
-          languages: any,
-          result: any
-        ) {
-          languages[result.value] = result.name;
-          return languages;
-        }, {});
-
-        set({ languageNames: allLanguages });
-      },
-
       setActivityEndpoint: (endpoint: string) => {
         set({ activityEndpoint: endpoint });
       },
@@ -394,8 +377,7 @@ export const zustand = createStore<AppState>()(
       getLanguage: () => {
         const state = get();
         const languageCode = state.languageCode;
-        const languageNames = state.languageNames;
-        return { name: languageNames[languageCode], code: languageCode };
+        return { name: getLanguageName(languageCode), code: languageCode };
       },
 
       setFeatures: (features: string[]) => {

package/src/store/Store.ts

@@ -30,7 +30,6 @@ import { sourceLocale, targetLocales } from '../locales/locale-codes';
 import { getFullName } from '../display/TembaUser';
 import { AppState, zustand } from './AppState';
 import { StoreApi } from 'zustand/vanilla';
-import { getLanguageDisplayName } from '../flow/utils';
 
 const { setLocale } = configureLocalization({
   sourceLocale,
@@ -84,9 +83,6 @@ export class Store extends RapidElement {
   @property({ type: String, attribute: 'globals' })
   globalsEndpoint: string;
 
-  @property({ type: String, attribute: 'languages' })
-  languagesEndpoint: string;
-
   @property({ type: String, attribute: 'workspace' })
   workspaceEndpoint: string;
 
@@ -110,7 +106,6 @@ export class Store extends RapidElement {
   private fields: { [key: string]: ContactField } = {};
   private groups: { [uuid: string]: ContactGroup } = {};
   private shortcuts: Shortcut[] = [];
-  private languages: any = {};
   private workspace: Workspace;
   private featuredFields: ContactField[] = [];
 
@@ -196,22 +191,6 @@ export class Store extends RapidElement {
       );
     }
 
-    if (this.languagesEndpoint) {
-      appState.fetchAllLanguages(this.languagesEndpoint);
-      fetches.push(
-        getAssets(this.languagesEndpoint).then((results: any[]) => {
-          // convert array of objects to lookup
-          this.languages = results.reduce(function (
-            languages: any,
-            result: any
-          ) {
-            languages[result.value] = result.name;
-            return languages;
-          }, {});
-        })
-      );
-    }
-
     if (this.groupsEndpoint) {
       fetches.push(
         getAssets(this.groupsEndpoint).then((groups: any[]) => {
@@ -383,14 +362,6 @@ export class Store extends RapidElement {
     return this.featuredFields;
   }
 
-  public getLanguageName(iso: string) {
-    const name = this.languages[iso];
-    if (!name || name === 'und' || iso === 'und') {
-      return getLanguageDisplayName(iso);
-    }
-    return name;
-  }
-
   public isDynamicGroup(uuid: string): boolean {
     const group = this.groups[uuid];
     // we treat missing groups as dynamic since the

package/src/styles/designTokens.ts

@@ -0,0 +1,158 @@
+import { css } from 'lit';
+
+/**
+ * TextIt Design System tokens — single source of truth.
+ *
+ * Embedded in component shadow DOMs (via FieldElement :host) so the
+ * tokens apply regardless of host-page stylesheet. Host pages may still
+ * override these by re-declaring the variable on the component element
+ * itself (e.g. `temba-select { --accent: ... }`), which beats `:host`.
+ *
+ * Mirrored in static/css/temba-components.css for hosts that want the
+ * tokens at :root scope; keep both in sync if the design system evolves.
+ */
+export const designTokens = css`
+  :host {
+    /* accent ramp — the primary color sits at 400 and the ramp is
+       derived from it in both directions via sRGB mixing.
+       The anchor reads from --primary-rgb so host pages can re-theme
+       the entire ramp by setting e.g. --primary-rgb: 112, 0, 132. */
+    --accent: rgb(var(--primary-rgb, 98, 147, 201));
+    --accent-50: color-mix(in srgb, var(--accent) 6%, white);
+    --accent-100: color-mix(in srgb, var(--accent) 16%, white);
+    --accent-200: color-mix(in srgb, var(--accent) 32%, white);
+    --accent-300: color-mix(in srgb, var(--accent) 60%, white);
+    --accent-400: var(--accent);
+    --accent-500: color-mix(in srgb, var(--accent) 90%, black);
+    --accent-600: color-mix(in srgb, var(--accent) 80%, black);
+    --accent-700: color-mix(in srgb, var(--accent) 65%, black);
+    --accent-800: color-mix(in srgb, var(--accent) 50%, black);
+    --accent-900: color-mix(in srgb, var(--accent) 35%, black);
+
+    /* neutrals */
+    --bg: #f6f7f9;
+    --surface: #ffffff;
+    --sunken: #f1f3f5;
+    --border: #e6e8ec;
+    --border-strong: #d2d6dc;
+    --text-1: #1a1f26;
+    --text-2: #4d5664;
+    --text-3: #7b8593;
+    --text-4: #a2abb8;
+
+    /* status — full set */
+    --success: #16a34a;
+    --success-bg: #e8f6ee;
+    --success-border: #bfe5cd;
+    --info: #2563eb;
+    --info-bg: #e8f0fe;
+    --info-border: #c7d7f8;
+    --warning: #b45309;
+    --warning-bg: #fdf3e2;
+    --warning-border: #f2d9a9;
+    --danger: #d03f3f;
+    --danger-bg: #fcebeb;
+    --danger-border: #f4c8c8;
+    --neutral: #6b7280;
+    --neutral-bg: #eef0f3;
+    --neutral-border: #d8dce2;
+
+    /* Pill anchor hues — pillVariants derives bg/fg/border via
+       color-mix(in srgb, ...) so host pages can re-theme by
+       overriding just the anchor. These are intentionally fixed and
+       do NOT track --primary-rgb so that pill identity (group/flow/
+       field/channel) stays stable across brand themes. */
+    --recipient: #2a6fb5;
+    --flow: #16a34a;
+    --channel: #6b21a8;
+    --topic: #d97706;
+    /* Field stays slightly darker than the bright yellow-500 anchor
+       used for flow/channel — yellow-500 has too little contrast
+       against white to read as a foreground / icon hue on its own.
+       Yellow-700 doubles as the pill's icon color via .pill-field. */
+    --field: #a16207;
+
+    /* type */
+    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --font-mono:
+      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+    --w-regular: 400;
+    --w-medium: 500;
+    --w-semibold: 600;
+    --w-bold: 600;
+
+    /* shape */
+    --r: 8px;
+    --r-xs: 2px;
+    --r-sm: 4px;
+    --r-lg: 12px;
+
+    /* density */
+    --row-h: 36px;
+    --input-h: 34px;
+    --pad: 10px;
+    --gap: 14px;
+
+    /* shadows */
+    --shadow-1:
+      0 1px 1px rgba(15, 22, 36, 0.04), 0 1px 2px rgba(15, 22, 36, 0.04);
+    --shadow-2:
+      0 1px 1px rgba(15, 22, 36, 0.04), 0 4px 12px rgba(15, 22, 36, 0.06);
+    --shadow-3:
+      0 6px 20px rgba(15, 22, 36, 0.1), 0 2px 6px rgba(15, 22, 36, 0.06);
+
+    /* legacy aliases — point at the DS tokens above so existing
+       components pick up the new design language without code changes */
+    --font-family: var(--font);
+    --curvature: var(--r-sm);
+    --curvature-widget: var(--r-sm);
+    /* Focus styling.
+       --focus is the single hue, kept separate from --accent so
+       changing the focus color doesn't shift chip / recipient hues.
+       --focus-muted and --focus-halo are derived once here, so
+       everywhere that needs to draw a focus outline or ring can
+       consume the same values without re-doing the formula.
+       --color-focus / --widget-box-shadow-focused alias the muted
+       versions and are what most widgets reference — these get
+       overridden to error-red by FieldElement's .has-error rule.
+       Surfaces that should stay blue even during a parent field's
+       error state (e.g. the dropdown popup) reference --focus-muted
+       / --focus-halo directly to skip that override. */
+    --focus: rgb(var(--focus-rgb, 91, 156, 229));
+    --focus-50: color-mix(in srgb, var(--focus) 12%, white);
+    --focus-100: color-mix(in srgb, var(--focus) 24%, white);
+    --focus-200: color-mix(in srgb, var(--focus) 40%, white);
+    --focus-300: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-600: color-mix(in srgb, var(--focus) 60%, black);
+    --focus-700: color-mix(in srgb, var(--focus) 45%, black);
+    --focus-muted: color-mix(in srgb, var(--focus) 60%, white);
+    --focus-halo: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
+    --color-focus: var(--focus-muted);
+    --widget-box-shadow-focused: var(--focus-halo);
+
+    --color-widget-bg: var(--surface);
+    --color-widget-bg-focused: var(--surface);
+    --color-widget-border: var(--border-strong);
+    --color-options-bg: var(--surface);
+    --color-selection: var(--accent-50);
+    --color-success: var(--success);
+    --widget-box-shadow: none;
+    --shadow: var(--shadow-1);
+    --shadow-widget: var(--shadow-1);
+    --color-text: var(--text-1);
+    --color-widget-text: var(--text-1);
+    --color-borders: var(--border);
+    --color-placeholder: var(--text-3);
+    --color-primary-light: var(--sunken);
+    --color-label: var(--text-1);
+    --color-text-help: var(--text-3);
+
+    --temba-textinput-padding: 7px var(--pad);
+    --temba-textinput-font-size: 13.5px;
+    --temba-textinput-min-height: var(--input-h);
+    --temba-select-selected-padding: 0 var(--pad);
+    --temba-select-selected-line-height: 1.4;
+    --temba-select-selected-font-size: 13.5px;
+    --temba-select-min-height: var(--input-h);
+  }
+`;