@nyaruka/temba-components 0.156.1 → 0.156.3

package/package.json

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

package/src/display/Chat.ts

@@ -583,34 +583,36 @@ export class Chat extends RapidElement {
         text-align: center;
         font-size: 11px;
         color: #8e8e93;
+        max-width: 100%;
+        overflow: hidden;
       }
 
       .event .webhook-event {
         display: inline-flex;
-        align-items: center;
+        align-items: flex-start;
         gap: 6px;
+        max-width: 100%;
+        min-width: 0;
       }
 
-      .event .webhook-event-log-link {
-        all: unset;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: #9ca3af;
-        cursor: pointer;
-        line-height: 1;
-        border-radius: 4px;
-        transition: color var(--animation-time, 200ms) ease;
+      .event .webhook-event-text {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+        min-width: 0;
+        padding: 4px 0;
       }
 
-      .event .webhook-event-log-link:hover,
-      .event .webhook-event-log-link:focus-visible {
-        color: var(--color-primary-dark, #007aff);
+      .event .webhook-event-url {
+        color: inherit;
+        text-decoration: underline;
+        cursor: pointer;
       }
 
-      .event .webhook-event-log-link:focus-visible {
-        outline: 1px solid currentColor;
-        outline-offset: 2px;
+      .event .webhook-event-url:hover {
+        text-decoration: none;
       }
 
       .event p {

package/src/events/eventRenderers.ts

@@ -389,7 +389,12 @@ export const renderResthookCalled = (event: any): TemplateResult | null => {
 };
 
 export const renderWebhookCalled = (event: any): TemplateResult | null => {
-  return html`<div>Called <strong>${event.url}</strong></div>`;
+  const maxLen = 50;
+  const displayUrl =
+    event.url && event.url.length > maxLen
+      ? event.url.slice(0, maxLen) + '...'
+      : event.url;
+  return html`<div>Called <strong>${displayUrl}</strong></div>`;
 };
 
 export const renderServiceCalled = (event: any): TemplateResult | null => {

package/src/flow/CanvasNode.ts

@@ -361,6 +361,9 @@ export class CanvasNode extends RapidElement {
 
       .router .body {
         padding: 0.75em;
+      }
+
+      .router .body > div {
         max-width: 180px;
       }
 
@@ -368,7 +371,32 @@ export class CanvasNode extends RapidElement {
         font-weight: 500;
         display: inline-block;
       }
-      
+
+      .router {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .rules-count {
+        position: absolute;
+        right: 4px;
+        top: 50%;
+        transform: translateY(-50%);
+        background: #fff8dc;
+        border-radius: 10px;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 5px;
+        font-size: 11px;
+        font-weight: 600;
+        color: #333;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        box-sizing: border-box;
+      }
+
       .exit-wrapper {
         display: flex;
         justify-content: center;
@@ -1611,9 +1639,10 @@ export class CanvasNode extends RapidElement {
       ? ACTION_GROUP_METADATA[config.group]?.color ||
         SPLIT_GROUP_METADATA[config.group]?.color
       : '#aaaaaa';
+    const untranslatedRules = this.getUntranslatedRulesCount();
     return html`<div
       class="cn-title ${isRemoving ? 'removing' : ''}"
-      style="background:${color}"
+      style="background:${color}; position: relative;"
     >
       <div class="title-spacer"></div>
       <div class="name">
@@ -1630,6 +1659,9 @@ export class CanvasNode extends RapidElement {
       >
         ✕
       </div>
+      ${untranslatedRules > 0
+        ? html`<div class="rules-count">${untranslatedRules}</div>`
+        : null}
     </div>`;
   }
 
@@ -1752,6 +1784,21 @@ export class CanvasNode extends RapidElement {
     return result;
   }
 
+  private getUntranslatedRulesCount(): number {
+    if (!this.isTranslating || !this.ui?.config?.localizeRules) return 0;
+    const cases = this.node?.router?.cases;
+    if (!cases?.length) return 0;
+
+    const langLocalization =
+      this.flowDefinition?.localization?.[this.languageCode] || {};
+
+    return cases.filter((c) => {
+      if (!c.arguments?.length || !c.arguments.some((a) => a)) return false;
+      const localized = langLocalization[c.uuid]?.arguments;
+      return !Array.isArray(localized) || !localized.some((a: string) => a);
+    }).length;
+  }
+
   private renderRouter(router: Router, ui: NodeUI) {
     const nodeConfig = NODE_CONFIG[ui.type];
     if (nodeConfig) {

package/src/flow/Editor.ts

@@ -705,6 +705,12 @@ export class Editor extends RapidElement {
         border: 1px solid #d7dce2;
       }
 
+      .language-pill.complete {
+        background: #d4f5e0;
+        color: #1a7f37;
+        --icon-color: #1a7f37;
+      }
+
       .language-pill-caret {
         margin-left: 1px;
         --icon-color: currentColor;
@@ -720,6 +726,10 @@ export class Editor extends RapidElement {
         white-space: nowrap;
       }
 
+      .language-pill.complete .language-percent {
+        color: #1a7f37;
+      }
+
       .toolbar-zoom-level {
         font-size: 12px;
         min-width: 40px;
@@ -1717,12 +1727,16 @@ export class Editor extends RapidElement {
     }
 
     if (changes.has('showMessageTable') && !this.showMessageTable && this.plumber) {
-      // Canvas was re-added to the DOM; rebind the plumber and repaint connections
+      // Canvas was re-added to the DOM; rebind the plumber, listeners, and repaint
       requestAnimationFrame(() => {
         const canvas = this.querySelector('#canvas');
         if (canvas) {
           this.plumber.setContainer(canvas as HTMLElement);
           this.plumber.repaintEverything();
+          canvas.addEventListener('contextmenu', this.boundCanvasContextMenu);
+          canvas.addEventListener('touchstart', this.boundCanvasTouchStart, {
+            passive: false
+          });
         }
       });
     }
@@ -6072,13 +6086,6 @@ export class Editor extends RapidElement {
     );
     const hasTranslations = progress.total > 0;
     const hasPendingTranslations = remainingTranslations > 0;
-    const autoTranslateButtonLabel = this.autoTranslating
-      ? 'Stop Auto Translate'
-      : 'Auto Translate';
-    const showAutoTranslate = !isBaseSelected && hasPendingTranslations;
-    const disableTranslationControls = Boolean(this.viewingRevision);
-    const autoTranslateButtonDisabled =
-      disableTranslationControls || (!this.autoTranslating && !hasTranslations);
 
     return html`
       <temba-floating-window
@@ -6116,25 +6123,13 @@ export class Editor extends RapidElement {
                   ></temba-option>`
               )}
             </temba-select>
-            ${showAutoTranslate || this.autoTranslating
-              ? html`<button
-                  class="auto-translate-button"
-                  type="button"
-                  ?disabled=${autoTranslateButtonDisabled}
-                  @click=${this.handleAutoTranslateClick}
-                >
-                  ${autoTranslateButtonLabel}
-                </button>`
-              : ''}
+            ${''/* auto translate button hidden pending backend changes */}
           </div>
           <div
             class="localization-progress ${isBaseSelected ? 'disabled' : ''}"
           >
             <div class="localization-progress-summary">
-              ${this.autoTranslating
-                ? html`<temba-loading units="3" size="8"></temba-loading>
-                    <span>Auto translating remaining text…</span>`
-                : isBaseSelected
+              ${isBaseSelected
                   ? html`<span
                       >Select a language to see translation progress.</span
                     >`
@@ -6146,11 +6141,7 @@ export class Editor extends RapidElement {
                         html`<span>${progress.localized} of ${progress.total} items translated</span>`
                       : html`<span>All items are translated.</span>`}
             </div>
-            ${this.autoTranslateError
-              ? html`<div class="auto-translate-error">
-                  ${this.autoTranslateError}
-                </div>`
-              : ''}
+            ${''/* auto translate error hidden pending backend changes */}
             <div class="localization-progress-bar-row">
               <div
                 class="localization-progress-trigger"
@@ -6326,12 +6317,20 @@ export class Editor extends RapidElement {
       `;
     }
 
+    const isComplete = option.percent === 100;
+    const optionBg = isComplete ? '#d4f5e0' : '';
+    const optionHoverBg = isComplete ? '#c0edce' : '';
+    const optionRadius = isComplete ? 'border-radius:4px;' : '';
+    const percentColor = isComplete ? 'color:#1a7f37;' : 'color:#5f6b7a;';
+
     return html`
       <div
-        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px;"
+        style="display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 10px; ${optionBg ? `background:${optionBg};` : ''} ${optionRadius}"
+        @mouseenter=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionHoverBg; } : null}
+        @mouseleave=${isComplete ? (e: MouseEvent) => { (e.currentTarget as HTMLElement).style.background = optionBg; } : null}
       >
-        <span>${option.name}</span>
-        <span style="font-size:11px; font-weight:600; color:#5f6b7a;"
+        <span style="${isComplete ? 'color:#1a7f37;' : ''}">${option.name}</span>
+        <span style="font-size:11px; font-weight:600; ${percentColor}"
           >${option.percent ?? 0}%</span
         >
       </div>
@@ -6426,7 +6425,7 @@ export class Editor extends RapidElement {
                     'Change language',
                     html`
                       <button
-                        class="language-pill ${isBaseSelected ? 'primary' : ''}"
+                        class="language-pill ${isBaseSelected ? 'primary' : percent === 100 ? 'complete' : ''}"
                         id="language-btn"
                         @click=${this.handleLanguageIconClick}
                         aria-label="Change language"
@@ -6561,35 +6560,9 @@ export class Editor extends RapidElement {
     `;
   }
 
-  private renderToolbarTranslationTools(hasTranslations: boolean): TemplateResult {
-    const disableTranslationControls = Boolean(this.viewingRevision);
-    const autoTranslateLabel = this.autoTranslating
-      ? 'Stop auto translate'
-      : 'Auto translate';
-    return html`
-      <div class="toolbar-translation">
-        ${this.renderToolbarTip(
-          autoTranslateLabel,
-          html`
-            <button
-              class="toolbar-btn language-tool ${this.autoTranslating
-                ? 'active'
-                : ''}"
-              @click=${this.handleAutoTranslateClick}
-              ?disabled=${disableTranslationControls ||
-              (!this.autoTranslating && !hasTranslations)}
-              aria-label=${autoTranslateLabel}
-            >
-              <temba-icon
-                name=${this.autoTranslating ? 'progress_spinner' : Icon.ai}
-                size="0.9"
-                ?spin=${this.autoTranslating}
-              ></temba-icon>
-            </button>
-          `
-        )}
-      </div>
-    `;
+  private renderToolbarTranslationTools(_hasTranslations: boolean): TemplateResult {
+    // auto translate button hidden pending backend changes
+    return html``;
   }
 
   /**
@@ -6747,7 +6720,6 @@ export class Editor extends RapidElement {
 
     return html`${style} ${this.renderIssuesWindow()}
       ${this.renderRevisionsWindow()} ${this.renderLocalizationWindow()}
-      ${this.renderAutoTranslateDialog()}
       <div id="editor-container">
         ${this.renderToolbar()}
         <div id="editor">

package/src/flow/FlowSearch.ts

@@ -221,10 +221,23 @@ function getActionSearchTexts(action: Action): string[] {
   return texts;
 }
 
-function getTableMessageSearchTexts(action: SendMsg): string[] {
+function getTableSearchTexts(action: Action): string[] {
   const texts: string[] = [];
-  if (action.text) texts.push(action.text);
-  if (action.quick_replies) texts.push(...action.quick_replies);
+  const config = ACTION_CONFIG[action.type];
+  if (!config?.localizable) return texts;
+  const a = action as Record<string, any>;
+  for (const key of config.localizable) {
+    const val = a[key];
+    if (typeof val === 'string' && val.trim()) {
+      texts.push(val);
+    } else if (Array.isArray(val)) {
+      for (const item of val) {
+        if (typeof item === 'string' && item.trim()) {
+          texts.push(item);
+        }
+      }
+    }
+  }
   return texts;
 }
 
@@ -729,20 +742,37 @@ export class FlowSearch extends LitElement {
       const nodeUI = this.definition._ui?.nodes[node.uuid];
       const nodeType = nodeUI?.type || 'execute_actions';
 
-      // Message table rows: one row per send_msg action
+      // Message table rows: one row per action with localizable fields
       if (node.actions) {
         for (const action of node.actions) {
-          if (action.type !== 'send_msg') {
+          const actionConfig = ACTION_CONFIG[action.type];
+          if (
+            action.type !== 'send_msg' &&
+            (!actionConfig?.localizable || actionConfig.localizable.length === 0)
+          ) {
             continue;
           }
 
-          const actionConfig = ACTION_CONFIG[action.type];
-          const searchAction = localizeAction(
+          // Search both original and localized texts, but only add one result per action
+          const originalTexts = getTableSearchTexts(action);
+          const localizedAction = localizeAction(
             action,
             langLocalization?.[action.uuid]
-          ) as SendMsg;
-          const texts = getTableMessageSearchTexts(searchAction);
-          for (const text of texts) {
+          );
+          const localizedTexts = getTableSearchTexts(localizedAction);
+
+          // Deduplicate: combine both, originals first
+          const allTexts: string[] = [];
+          const seen = new Set<string>();
+          for (const text of [...originalTexts, ...localizedTexts]) {
+            if (!seen.has(text)) {
+              seen.add(text);
+              allTexts.push(text);
+            }
+          }
+
+          let found = false;
+          for (const text of allTexts) {
             const idx = text.toLowerCase().indexOf(query);
             if (idx !== -1) {
               results.push({
@@ -754,9 +784,11 @@ export class FlowSearch extends LitElement {
                 matchStart: idx,
                 matchLength: query.length
               });
+              found = true;
               break;
             }
           }
+          if (found) continue;
         }
       }