@nyaruka/temba-components 0.156.17 → 0.157.0

package/src/flow/RevisionsWindow.ts

@@ -9,6 +9,7 @@ import { fetchResults } from '../utils';
 import { FLOW_SPEC_VERSION } from '../store/AppState';
 import {
   labelsFor,
+  normalizeChanges,
   RevisionChanges,
   summarizeChanges
 } from './revision-summary';
@@ -151,7 +152,7 @@ export class RevisionsWindow extends RapidElement {
                             value=${rev.created_on}
                             display="duration"
                           ></temba-date>
-                          · ${rev.user.name || rev.user.username}
+                          · ${this.renderUser(rev.user)}
                         </div>
                         ${isCurrent
                           ? html`<div
@@ -192,6 +193,13 @@ export class RevisionsWindow extends RapidElement {
 
   // --- Private ---
 
+  private renderUser(user: Revision['user']): TemplateResult | string {
+    if (user?.email === 'system') {
+      return html`<em>System update</em>`;
+    }
+    return user?.name || user?.username || '';
+  }
+
   private async fetchRevisions() {
     const requestId = ++this.fetchRequestId;
     this.isLoading = true;
@@ -217,19 +225,36 @@ export class RevisionsWindow extends RapidElement {
   // the window. The merged revision is capped at three distinct displayed
   // labels — once a fourth would be introduced we break out into a new row.
   private collapseRevisions(revisions: Revision[]): Revision[] {
+    // Normalize at the boundary so the rest of the logic reasons about real
+    // edits only. After this step, `changes === null` is the single signal
+    // for "no-op" — used both for the author-barrier bypass and for keeping
+    // housekeeping tags out of the merged tag set and label cap.
+    const cleaned = revisions.map((r) => ({
+      ...r,
+      changes: normalizeChanges(r.changes)
+    }));
     // The API returns newest-first today; sort defensively so the head/window
     // logic stays correct if that ever changes.
-    const sorted = [...revisions].sort(
+    const sorted = [...cleaned].sort(
       (a, b) =>
         new Date(b.created_on).getTime() - new Date(a.created_on).getTime()
     );
     const result: Revision[] = [];
     let group: Revision[] = [];
     let groupLabels = new Set<string>();
+    let groupHasRealChange = false;
 
     const flush = () => {
       if (group.length === 0) return;
       const head = group[0];
+      // Pick the user from the most recent real-change revision in the
+      // group. No-op authors (typically the system, doing spec bumps)
+      // shouldn't appear as the editor when a real user's edit was
+      // absorbed into the row — that would mislabel the change as
+      // "System update" even though a real person did the work. Fall back
+      // to the head if every revision was a no-op.
+      const realChange = group.find((r) => r.changes);
+      const displayUser = realChange?.user ?? head.user;
       const tagSet = new Set<string>();
       let anyKnown = false;
       for (const r of group) {
@@ -240,41 +265,60 @@ export class RevisionsWindow extends RapidElement {
       }
       result.push({
         ...head,
+        user: displayUser,
         changes: anyKnown ? { tags: Array.from(tagSet) } : null
       });
       group = [];
       groupLabels = new Set();
+      groupHasRealChange = false;
     };
 
     for (const rev of sorted) {
       if (group.length === 0) {
         group.push(rev);
         groupLabels = labelsFor(rev.changes);
+        groupHasRealChange = !!rev.changes;
         continue;
       }
       const head = group[0];
       const headTime = new Date(head.created_on).getTime();
       const revTime = new Date(rev.created_on).getTime();
-      const withinWindow = headTime - revTime < GROUP_WINDOW_MS;
       // Compare on whichever identifier the server provides — real data
       // arrives with `email`, while test fixtures use `username`. Falling
       // back through the chain keeps both shapes working.
       const headId = head.user?.email ?? head.user?.username;
       const revId = rev.user?.email ?? rev.user?.username;
-      const sameAuthor = headId === revId;
-      const prospective = new Set([
-        ...groupLabels,
-        ...labelsFor(rev.changes)
-      ]);
-      const fitsLabelCap = prospective.size <= MAX_GROUP_LABELS;
+      // Two conditions bypass the time/author barriers:
+      //   1. The incoming rev is itself a no-op — it carries no editorial
+      //      intent and should disappear into whichever group it neighbors.
+      //   2. The group hasn't accumulated a real change yet — we never want
+      //      to surface a row showing "nothing changed", so a no-op-only
+      //      chain reaches forward to absorb the first real edit even if
+      //      that edit is far away in time or by a different author.
+      const isNoOp = !rev.changes;
+      const bypassBarriers = isNoOp || !groupHasRealChange;
+      const withinWindow =
+        bypassBarriers || headTime - revTime < GROUP_WINDOW_MS;
+      const sameAuthor = bypassBarriers || headId === revId;
+      const prospective = new Set([...groupLabels, ...labelsFor(rev.changes)]);
+      // The label cap is meaningful only when adding a real change to a
+      // group that already has one. A no-op contributes zero labels by
+      // construction, so it never trips the cap; and a no-op-only chain
+      // reaching forward to absorb its first real edit must ignore the cap
+      // too, or a sweeping edit (4+ label areas) would still strand the
+      // no-op group as an empty-summary row.
+      const fitsLabelCap =
+        isNoOp || !groupHasRealChange || prospective.size <= MAX_GROUP_LABELS;
 
       if (withinWindow && sameAuthor && fitsLabelCap) {
         group.push(rev);
         groupLabels = prospective;
+        if (!isNoOp) groupHasRealChange = true;
       } else {
         flush();
         group.push(rev);
         groupLabels = labelsFor(rev.changes);
+        groupHasRealChange = !!rev.changes;
       }
     }
     flush();

package/src/flow/nodes/shared.ts

@@ -69,6 +69,14 @@ const advancedSection = {
     !!(formData.localizeRules || formData.localizeCategories)
 };
 
+const categoriesLocalizationSection = {
+  label: 'Localization',
+  localizable: false,
+  items: ['localizeCategories'],
+  collapsed: true,
+  getValueCount: (formData: FormData) => !!formData.localizeCategories
+};
+
 export const nodeOptionsAccordion: AccordionLayoutConfig = {
   type: 'accordion',
   multi: true,
@@ -81,6 +89,12 @@ export const nodeOptionsAccordionSimple: AccordionLayoutConfig = {
   sections: [resultNameSection]
 };
 
+export const nodeOptionsAccordionCategoriesOnly: AccordionLayoutConfig = {
+  type: 'accordion',
+  multi: true,
+  sections: [resultNameSection, categoriesLocalizationSection]
+};
+
 /**
  * Shared category localization functions for router nodes.
  * These provide a consistent way to localize category names across all router types.

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -1,16 +1,25 @@
-import { FormData, NodeConfig, ACTION_GROUPS, Features } from '../types';
+import {
+  FormData,
+  NodeConfig,
+  ACTION_GROUPS,
+  FlowTypes
+} from '../types';
 import { CallLLM, Node } from '../../store/flow-definition';
 import { generateUUID, createMultiCategoryRouter } from '../../utils';
 import { html } from 'lit';
 import { validateWith } from '../utils';
 import { LLMModel, hasLLMRole } from '../flow-utils';
+import {
+  resultNameField,
+  localizeCategoriesField,
+  nodeOptionsAccordionCategoriesOnly
+} from './shared';
 
 export const split_by_llm_categorize: NodeConfig = {
   type: 'split_by_llm_categorize',
   name: 'Split by AI',
   group: ACTION_GROUPS.services,
-  flowTypes: [],
-  features: [Features.AI],
+  flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   form: {
     llm: {
       type: 'select',
@@ -49,9 +58,11 @@ export const split_by_llm_categorize: NodeConfig = {
           required: true
         }
       }
-    }
+    },
+    result_name: resultNameField,
+    localizeCategories: localizeCategoriesField
   },
-  layout: ['llm', 'input', 'categories'],
+  layout: ['llm', 'input', 'categories', nodeOptionsAccordionCategoriesOnly],
   validate: validateWith((formData, errors) => {
     if (!formData.categories || !Array.isArray(formData.categories)) return;
 
@@ -91,7 +102,7 @@ export const split_by_llm_categorize: NodeConfig = {
       <div class="body">Categorize with ${callLlmAction.llm.name}</div>
     `;
   },
-  toFormData: (node: Node) => {
+  toFormData: (node: Node, nodeUI?: any) => {
     // Extract data from the existing node structure
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
@@ -105,9 +116,18 @@ export const split_by_llm_categorize: NodeConfig = {
       uuid: node.uuid,
       llm: callLlmAction?.llm ? [callLlmAction.llm] : [],
       input: callLlmAction?.input || '@input',
-      categories: categories
+      categories: categories,
+      result_name: node.router?.result_name || '',
+      localizeCategories: nodeUI?.config?.localizeCategories || false
     };
   },
+  toUIConfig: (formData: FormData) => {
+    const config: Record<string, any> = {};
+    config.localizeCategories = formData.result_name
+      ? !!formData.localizeCategories
+      : false;
+    return config;
+  },
   fromFormData: (formData: FormData, originalNode: Node): Node => {
     // Get LLM selection
     const llmSelection =
@@ -158,11 +178,16 @@ export const split_by_llm_categorize: NodeConfig = {
       existingCases
     );
 
+    const finalRouter: any = { ...router };
+    if (formData.result_name && formData.result_name.trim() !== '') {
+      finalRouter.result_name = formData.result_name.trim();
+    }
+
     // Return the complete node
     return {
       uuid: originalNode.uuid,
       actions: [callLlmAction],
-      router: router,
+      router: finalRouter,
       exits: exits
     };
   },

package/src/flow/revision-summary.ts

@@ -2,6 +2,23 @@ export interface RevisionChanges {
   tags: string[];
 }
 
+// "spec" is the housekeeping tag the system attaches when it bumps a flow's
+// spec version. It carries no editorial intent, so we strip it at the
+// boundary — every downstream consumer (summaries, label caps, no-op
+// detection) then operates on a clean tag set without needing special cases.
+const NOOP_TAGS = new Set(['spec']);
+
+// Drop tags that don't represent real edits and collapse to null when nothing
+// meaningful remains. Returning null lets `isNoOpChanges` and the collapse
+// logic treat empty-after-filtering and originally-null the same way.
+export function normalizeChanges(
+  changes: RevisionChanges | null | undefined
+): RevisionChanges | null {
+  if (!changes) return null;
+  const tags = (changes.tags || []).filter((t) => !NOOP_TAGS.has(t));
+  return tags.length === 0 ? null : { tags };
+}
+
 const TAG_LABELS: Record<string, { label: string; order: number }> = {
   metadata: { label: 'metadata', order: 0 },
   nodes: { label: 'nodes', order: 1 },
@@ -32,6 +49,14 @@ export function labelsFor(
   return result;
 }
 
+// A revision is a no-op when, after stripping housekeeping tags, nothing
+// meaningful is left. These shouldn't break up adjacent edits in the browser.
+export function isNoOpChanges(
+  changes: RevisionChanges | null | undefined
+): boolean {
+  return normalizeChanges(changes) === null;
+}
+
 export function summarizeChanges(
   changes: RevisionChanges | null | undefined
 ): string {

package/src/flow/utils.ts

@@ -1,4 +1,5 @@
 import { html, TemplateResult } from 'lit-html';
+import { iconToPillType } from '../styles/pillVariants';
 import { Action, NamedObject, FlowPosition } from '../store/flow-definition';
 import { FlowIssue, zustand } from '../store/AppState';
 import { CustomEventType } from '../interfaces';
@@ -256,6 +257,15 @@ export const renderClamped = (
   </div>`;
 };
 
+/**
+ * Inline margin for stacked pills — the previous implementation used
+ * `class="mr-1 mb-1"` (Tailwind utility classes), but this package
+ * doesn't ship Tailwind, so the classes resolved to no-ops in any host
+ * page that didn't already include it. Inline style is predictable
+ * across hosts.
+ */
+const PILL_MARGIN_STYLE = 'margin: 0 4px 4px 0;';
+
 /**
  * Renders a single line item with optional icon.
  * Content can be plain text or a TemplateResult (e.g. highlighted text).
@@ -265,17 +275,14 @@ export const renderLineItem = (
   icon?: string,
   content?: TemplateResult
 ) => {
-  return html`<div style="display:flex;align-items:center;">
-    ${icon
-      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
-      : null}
-    <div
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;"
-      title="${name}"
-    >
-      ${content || name}
-    </div>
-  </div>`;
+  const pillType = iconToPillType(icon);
+  return html`<temba-label
+    icon=${icon || ''}
+    type=${pillType || 'neutral'}
+    style=${PILL_MARGIN_STYLE}
+    title="${name}"
+    >${content || name}</temba-label
+  >`;
 };
 
 /**
@@ -319,12 +326,9 @@ export const renderStringList = (
   if (items.length > maxDisplay && items.length !== 4) {
     const remainingCount = items.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        ${icon
-          ? html`<div style="margin-right:0.4em; width: 1em;"></div>` // spacing placeholder
-          : null}
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;
@@ -368,17 +372,16 @@ export const renderMixedList = (items: MixedListItem[]) => {
   if (items.length > maxDisplay && items.length !== 4) {
     const remainingCount = items.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        <div style="margin-right:0.4em; width: 1em;"></div>
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;
 };
 
 /**
- * Renders a named object as a clickable link that fires a custom event
+ * Renders a named object as a clickable DS pill that fires a custom event
  */
 const renderLinkedObject = (
   obj: NamedObject,
@@ -400,18 +403,16 @@ const renderLinkedObject = (
     }
   };
 
-  return html`<div style="display:flex;align-items:center;max-width:100%;">
-    ${icon
-      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
-      : null}
-    <div
-      class="linked-name"
-      @click=${handleClick}
-      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; text-decoration: underline; cursor: pointer;"
-    >
-      ${obj.name}
-    </div>
-  </div>`;
+  const pillType = iconToPillType(icon);
+  return html`<temba-label
+    icon=${icon || ''}
+    type=${pillType || 'neutral'}
+    clickable
+    style=${PILL_MARGIN_STYLE}
+    title="${obj.name}"
+    @click=${handleClick}
+    >${obj.name}</temba-label
+  >`;
 };
 
 /**
@@ -436,12 +437,9 @@ const renderLinkedObjects = (
   if (objects.length > maxDisplay && objects.length !== 4) {
     const remainingCount = objects.length - maxDisplay;
     itemElements.push(
-      html`<div style="display:flex;align-items:center;margin-top:0.2em;">
-        ${icon
-          ? html`<div style="margin-right:0.4em; width: 1em;"></div>`
-          : null}
-        <div style="font-size:0.8em">+${remainingCount} more</div>
-      </div>`
+      html`<temba-label type="neutral" style=${PILL_MARGIN_STYLE}
+        >+${remainingCount} more</temba-label
+      >`
     );
   }
   return itemElements;

package/src/form/ArrayEditor.ts

@@ -604,12 +604,11 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
             class="remove-btn"
             style="
               padding: 4px;
-              border: 1px solid #ccc;
-              border-radius: 4px;
-              background: white;
+              border: 1px solid var(--color-widget-border);
+              border-radius: var(--curvature-widget);
+              background: var(--surface);
               cursor: pointer;
-              background: #fefefe;
-              color: #999;
+              color: var(--text-3);
               font-size: 14px;
             "
             ?disabled=${!canRemove}
@@ -651,21 +650,20 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       .add-btn,
       .remove-btn {
         padding: 4px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        background: white;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: var(--surface);
         cursor: pointer;
         font-size: 14px;
       }
 
       .add-btn:hover,
       .remove-btn:hover {
-        background: #f8f8f8;
+        background: var(--sunken);
       }
 
       .remove-btn {
-        background: #fefefe;
-        color: #999;
+        color: var(--text-3);
       }
 
       .removable .remove-btn {

package/src/form/Checkbox.ts

@@ -25,7 +25,7 @@ export class Checkbox extends FieldElement {
         width: 12px;
         height: 12px;
         background: var(--checkbox-background, rgba(255, 255, 255, 0.8));
-        border-radius: 2px;
+        border-radius: var(--r-xs);
       }
 
       .wrapper.label {
@@ -34,7 +34,7 @@ export class Checkbox extends FieldElement {
       }
 
       .wrapper.label:hover {
-        background: var(--checkbox-hover-bg, #f9f9f9);
+        background: var(--checkbox-hover-bg, var(--sunken));
       }
 
       .checkbox-container {

package/src/form/Compose.ts

@@ -104,7 +104,7 @@ export class Compose extends FieldElement {
         --curvature-widget: 0px;
         --color-options-bg: #fff;
         border: 1px solid var(--color-widget-border);
-        border-radius: 6px;
+        border-radius: var(--curvature-widget);
         background: var(--color-widget-bg, #fff);
         box-shadow: var(--options-shadow);
         z-index: 1000003;

package/src/form/FieldElement.ts

@@ -2,6 +2,7 @@ import { TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { renderMarkdownInline } from '../markdown';
+import { designTokens } from '../styles/designTokens';
 
 /**
  * FieldElement is a base class for form components that provides built-in
@@ -62,26 +63,25 @@ export abstract class FieldElement extends RapidElement {
 
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         font-family: var(--font-family);
       }
 
       label {
-        margin-bottom: 5px;
-        margin-left: 4px;
+        margin-bottom: 6px;
         display: block;
-        font-weight: 400;
-        font-size: var(--label-size);
-        letter-spacing: 0.05em;
+        font-weight: var(--w-medium);
+        font-size: 12.5px;
         line-height: normal;
-        color: var(--color-label, #777);
+        color: var(--color-label);
       }
 
       .help-text {
-        font-size: var(--help-text-size);
+        font-size: 12px;
         line-height: normal;
         color: var(--color-text-help);
-        margin-left: var(--help-text-margin-left);
         margin-top: 6px;
         opacity: 1;
       }

package/src/form/KeyValueEditor.ts

@@ -282,10 +282,10 @@ export class KeyValueEditor extends BaseListEditor<KeyValueItem> {
       .remove-btn {
         width: 32px;
         height: 32px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        background: #f8f8f8;
-        color: #666;
+        border: 1px solid var(--color-widget-border);
+        border-radius: var(--curvature-widget);
+        background: var(--sunken);
+        color: var(--text-2);
         cursor: pointer;
         display: flex;
         align-items: center;

package/src/form/MessageEditor.ts

@@ -23,7 +23,7 @@ export class MessageEditor extends FieldElement {
       .message-editor-container {
         border: 1px solid var(--color-widget-border);
         border-radius: var(--curvature-widget);
-        background: #fff;
+        background: var(--surface);
         position: relative;
         transition:
           border-color 0.2s ease-in-out,
@@ -75,10 +75,9 @@ export class MessageEditor extends FieldElement {
 
       .media-wrapper {
         padding: 4px 8px;
-        background: rgba(0, 0, 0, 0.03);
+        background: var(--sunken);
         border-top: 1px solid var(--color-widget-border);
         border-radius: 0 0 var(--curvature-widget) var(--curvature-widget);
-        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.05);
         margin-top: 3px;
         display: none;
       }

package/src/form/RangePicker.ts

@@ -16,21 +16,21 @@ export class RangePicker extends RapidElement {
       cursor: pointer;
       padding: 0.2em 0.5em;
       margin: 0.6em 0;
-      border-radius: 4px;
+      border-radius: var(--curvature-widget);
       border: 1px solid transparent;
       transition: border 0.2s;
     }
 
     .date-display:hover {
-      border: 1px solid var(--color-widget-border, #bbb);
-      background: var(--color-widget-hover, #f5f5f5);
+      border: 1px solid var(--color-widget-border);
+      background: var(--sunken);
     }
 
     input[type='date'] {
       font-size: 1em;
       padding: 0.2em 0.5em;
-      border-radius: 4px;
-      border: 1px solid #bbb;
+      border-radius: var(--curvature-widget);
+      border: 1px solid var(--color-widget-border);
     }
 
     .navigation-container {
@@ -40,10 +40,10 @@ export class RangePicker extends RapidElement {
     }
 
     .nav-arrow {
-      background: #f5f5f5;
-      border: 1px solid #bbb;
+      background: var(--sunken);
+      border: 1px solid var(--color-widget-border);
 
-      border-radius: var(--curvature);
+      border-radius: var(--curvature-widget);
       padding: 0em 0em;
       cursor: pointer;
       font-size: 0.6em;
@@ -59,14 +59,14 @@ export class RangePicker extends RapidElement {
     }
 
     .nav-arrow:hover:not(:disabled) {
-      background: #e0eaff;
-      border-color: #3399ff;
+      background: var(--accent-50);
+      border-color: var(--accent);
     }
 
     .nav-arrow:disabled {
       opacity: 0.5;
       cursor: not-allowed;
-      background: #f9f9f9;
+      background: var(--sunken);
     }
 
     .nav-arrow.hidden {
@@ -78,8 +78,8 @@ export class RangePicker extends RapidElement {
       margin-left: 0em;
     }
     .range-btn {
-      background: #f5f5f5;
-      border: 1px solid #bbb;
+      background: var(--sunken);
+      border: 1px solid var(--color-widget-border);
       border-radius: 0px;
       margin-left: -1px;
       padding: 0.2em 0.8em;
@@ -91,17 +91,17 @@ export class RangePicker extends RapidElement {
     }
 
     .button-group .range-btn:first-child {
-      border-radius: 4px 0 0 4px;
+      border-radius: var(--curvature-widget) 0 0 var(--curvature-widget);
     }
 
     .button-group .range-btn:last-child {
-      border-radius: 0 4px 4px 0;
+      border-radius: 0 var(--curvature-widget) var(--curvature-widget) 0;
     }
 
     .range-btn.selected,
     .range-btn:active {
-      background: #e0eaff;
-      border-color: #3399ff;
+      background: var(--accent-50);
+      border-color: var(--accent);
     }
   `;