@nyaruka/temba-components 0.156.2 → 0.156.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.2",
+  "version": "0.156.4",
   "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

@@ -107,6 +107,26 @@ export class CanvasNode extends RapidElement {
         user-select: none;
       }
 
+      .shift-held > temba-flow-node,
+      .shift-held > temba-flow-node * {
+        cursor: copy !important;
+      }
+
+      .shift-held > temba-flow-node .exit,
+      .shift-held > temba-flow-node .exit *,
+      .shift-held > temba-flow-node .linked-name,
+      .shift-held > temba-flow-node .linked-name *,
+      .shift-held > temba-flow-node .remove-button,
+      .shift-held > temba-flow-node .remove-button * {
+        cursor: pointer !important;
+      }
+
+      temba-flow-node.drag-copy .node {
+        outline: 3px dashed var(--color-primary, #3b82f6);
+        outline-offset: 2px;
+        opacity: 0.7;
+      }
+
       /* Flow start indicator */
       temba-flow-node.flow-start .node::before {
         content: 'FLOW START';
@@ -361,6 +381,9 @@ export class CanvasNode extends RapidElement {
 
       .router .body {
         padding: 0.75em;
+      }
+
+      .router .body > div {
         max-width: 180px;
       }
 
@@ -368,7 +391,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 +1659,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 +1679,9 @@ export class CanvasNode extends RapidElement {
       >
         ✕
       </div>
+      ${untranslatedRules > 0
+        ? html`<div class="rules-count">${untranslatedRules}</div>`
+        : null}
     </div>`;
   }
 
@@ -1752,6 +1804,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) {