@nyaruka/temba-components 0.135.9 → 0.136.1

package/out-tsc/src/flow/Editor.js

@@ -169,6 +169,125 @@ export class Editor extends RapidElement {
         z-index: 10;
       }
 
+      /* Activity overlays on connections */
+      .jtk-overlay.activity-overlay {
+        background: #f3f3f3;
+        border: 1px solid #d9d9d9;
+        color: #333;
+        border-radius: 4px;
+        padding: 2px 4px;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 0.9;
+        cursor: pointer;
+        z-index: 500;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Active contact count on nodes */
+      .active-count {
+        position: absolute;
+        background: #3498db;
+        border: 1px solid #2980b9;
+        border-radius: 12px;
+        padding: 3px 5px;
+        color: #fff;
+        font-weight: 500;
+        top: -10px;
+        left: -10px;
+        font-size: 13px;
+        min-width: 22px;
+        text-align: center;
+        z-index: 600;
+        line-height: 1;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      }
+
+      /* Recent contacts popup */
+      @keyframes popupBounceIn {
+        0% {
+          transform: scale(0.8);
+          opacity: 0;
+        }
+        50% {
+          transform: scale(1.05);
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      .recent-contacts-popup {
+        display: none;
+        position: absolute;
+        width: 200px;
+        background: #f3f3f3;
+        border-radius: 10px;
+        box-shadow: 0 1px 3px 1px rgba(130, 130, 130, 0.2);
+        z-index: 1015;
+        transform-origin: top center;
+      }
+
+      .recent-contacts-popup.show {
+        display: block;
+        animation: popupBounceIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      .recent-contacts-popup .popup-title {
+        background: #999;
+        color: #fff;
+        padding: 6px 0;
+        text-align: center;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        font-size: 12px;
+      }
+
+      .recent-contacts-popup .no-contacts-message {
+        padding: 15px;
+        text-align: center;
+        color: #999;
+        font-size: 12px;
+      }
+
+      .recent-contacts-popup .contact-row {
+        padding: 8px 10px;
+        border-top: 1px solid #e0e0e0;
+        text-align: left;
+      }
+
+      .recent-contacts-popup .contact-row:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      .recent-contacts-popup .contact-name {
+        display: block;
+        font-weight: 500;
+        font-size: 12px;
+        color: var(--color-link-primary, #1d4ed8);
+        cursor: pointer;
+      }
+
+      .recent-contacts-popup .contact-name:hover {
+        text-decoration: underline;
+        color: var(--color-link-primary, #1d4ed8);
+      }
+
+      .recent-contacts-popup .contact-operand {
+        padding-top: 3px;
+        font-size: 11px;
+        color: #666;
+        word-wrap: break-word;
+      }
+
+      .recent-contacts-popup .contact-time {
+        padding-top: 3px;
+        font-size: 10px;
+        color: #999;
+      }
+
       /* Connection dragging feedback */
       body svg.jtk-connector.jtk-dragging {
         z-index: 99999 !important;
@@ -399,6 +518,8 @@ export class Editor extends RapidElement {
         this.saveTimer = null;
         this.flowType = 'message';
         this.features = [];
+        this.activityTimer = null;
+        this.activityInterval = 100; // Start with 100ms interval for fast initial load
         // Drag state
         this.isDragging = false;
         this.isMouseDown = false;
@@ -446,7 +567,7 @@ export class Editor extends RapidElement {
     }
     firstUpdated(changes) {
         super.firstUpdated(changes);
-        this.plumber = new Plumber(this.querySelector('#canvas'));
+        this.plumber = new Plumber(this.querySelector('#canvas'), this);
         this.setupGlobalEventListeners();
         if (changes.has('flow')) {
             getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);
@@ -484,7 +605,7 @@ export class Editor extends RapidElement {
         this.isValidTarget = true;
     }
     updated(changes) {
-        var _b, _c, _d;
+        var _b, _c, _d, _e;
         super.updated(changes);
         if (changes.has('canvasSize')) {
             // console.log('Setting canvas size', this.canvasSize);
@@ -505,6 +626,27 @@ export class Editor extends RapidElement {
                 this.translationFilters = normalizedFilters;
             }
             this.translationCache.clear();
+            // Start fetching activity data when definition is loaded
+            if ((_e = this.definition) === null || _e === void 0 ? void 0 : _e.uuid) {
+                this.startActivityFetching();
+            }
+        }
+        if (changes.has('simulatorActive')) {
+            if (this.simulatorActive) {
+                // Stop polling when simulator becomes active
+                this.stopActivityFetching();
+            }
+            else {
+                // Resume polling and refresh activity when simulator closes
+                this.activityInterval = 100; // Reset to fast initial interval
+                this.startActivityFetching();
+            }
+        }
+        if (changes.has('activityData')) {
+            // Update plumber with new activity data
+            if (this.plumber) {
+                this.plumber.setActivityData(this.activityData);
+            }
         }
         if (changes.has('dirtyDate')) {
             if (this.dirtyDate) {
@@ -572,6 +714,46 @@ export class Editor extends RapidElement {
         });
         getStore().getState().setDirtyDate(null);
     }
+    startActivityFetching() {
+        // Don't start if simulator is active
+        if (this.simulatorActive) {
+            return;
+        }
+        // Fetch immediately
+        this.fetchActivityData();
+    }
+    stopActivityFetching() {
+        if (this.activityTimer !== null) {
+            clearTimeout(this.activityTimer);
+            this.activityTimer = null;
+        }
+    }
+    fetchActivityData() {
+        var _b;
+        if (!((_b = this.definition) === null || _b === void 0 ? void 0 : _b.uuid)) {
+            return;
+        }
+        // Don't fetch if simulator is active
+        if (this.simulatorActive) {
+            return;
+        }
+        const activityEndpoint = `/flow/activity/${this.definition.uuid}/`;
+        const store = getStore();
+        if (!store) {
+            return;
+        }
+        const state = store.getState();
+        state.fetchActivity(activityEndpoint).then(() => {
+            // Schedule next fetch with exponential backoff (max 5 minutes)
+            this.activityInterval = Math.min(60000 * 5, this.activityInterval + 100);
+            if (this.activityTimer !== null) {
+                clearTimeout(this.activityTimer);
+            }
+            this.activityTimer = window.setTimeout(() => {
+                this.fetchActivityData();
+            }, this.activityInterval);
+        });
+    }
     handleLanguageChange(languageCode) {
         zustand.getState().setLanguageCode(languageCode);
         // Repaint connections after language change since node sizes can change
@@ -587,6 +769,10 @@ export class Editor extends RapidElement {
             clearTimeout(this.saveTimer);
             this.saveTimer = null;
         }
+        if (this.activityTimer !== null) {
+            clearTimeout(this.activityTimer);
+            this.activityTimer = null;
+        }
         document.removeEventListener('mousemove', this.boundMouseMove);
         document.removeEventListener('mouseup', this.boundMouseUp);
         document.removeEventListener('mousedown', this.boundGlobalMouseDown);
@@ -2100,7 +2286,7 @@ export class Editor extends RapidElement {
         header="Translations"
         .width=${360}
         .maxHeight=${600}
-        .top=${170}
+        .top=${75}
         color="#6b7280"
         .hidden=${this.localizationWindowHidden}
         @temba-dialog-hidden=${this.handleLocalizationWindowClosed}
@@ -2264,6 +2450,36 @@ export class Editor extends RapidElement {
       ></temba-floating-tab>
     `;
     }
+    /**
+     * Focus on a specific node by smoothly scrolling it to the center of the canvas
+     */
+    focusNode(nodeUuid) {
+        const nodeElement = this.querySelector(`temba-flow-node[uuid="${nodeUuid}"]`);
+        if (!nodeElement) {
+            return;
+        }
+        const editor = this.querySelector('#editor');
+        if (!editor) {
+            return;
+        }
+        // Get the editor's dimensions and scroll position
+        const editorRect = editor.getBoundingClientRect();
+        const editorCenterX = editorRect.width / 2;
+        const editorCenterY = editorRect.height / 2;
+        // Get node position relative to the editor's scroll container
+        const nodeRect = nodeElement.getBoundingClientRect();
+        const nodeCenterX = nodeElement.offsetLeft + nodeRect.width / 2;
+        const nodeCenterY = nodeElement.offsetTop + nodeRect.height / 2;
+        // Calculate the scroll position needed to center the node
+        const targetScrollX = nodeCenterX - editorCenterX;
+        const targetScrollY = nodeCenterY - editorCenterY;
+        // Smooth scroll the editor container to the target position
+        editor.scrollTo({
+            left: Math.max(0, targetScrollX),
+            top: Math.max(0, targetScrollY),
+            behavior: 'smooth'
+        });
+    }
     render() {
         var _b, _c;
         // we have to embed our own style since we are in light DOM
@@ -2282,7 +2498,7 @@ export class Editor extends RapidElement {
         >
           <div id="canvas">
             ${this.definition
-            ? repeat(this.definition.nodes, (node) => node.uuid, (node) => {
+            ? repeat(this.definition.nodes, (node) => node.uuid, (node, index) => {
                 var _b, _c, _d;
                 const position = ((_c = (_b = this.definition._ui) === null || _b === void 0 ? void 0 : _b.nodes[node.uuid]) === null || _c === void 0 ? void 0 : _c.position) || {
                     left: 0,
@@ -2291,10 +2507,12 @@ export class Editor extends RapidElement {
                 const dragging = this.isDragging &&
                     ((_d = this.currentDragItem) === null || _d === void 0 ? void 0 : _d.uuid) === node.uuid;
                 const selected = this.selectedItems.has(node.uuid);
+                // first node is the flow start (nodes are sorted by position)
+                const isFlowStart = index === 0;
                 return html `<temba-flow-node
                       class="draggable ${dragging ? 'dragging' : ''} ${selected
                     ? 'selected'
-                    : ''}"
+                    : ''} ${isFlowStart ? 'flow-start' : ''}"
                       @mousedown=${this.handleMouseDown.bind(this)}
                       uuid=${node.uuid}
                       data-node-uuid=${node.uuid}
@@ -2364,6 +2582,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.flowDefinition)
 ], Editor.prototype, "definition", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.simulatorActive)
+], Editor.prototype, "simulatorActive", void 0);
 __decorate([
     fromStore(zustand, (state) => state.canvasSize)
 ], Editor.prototype, "canvasSize", void 0);
@@ -2379,6 +2600,9 @@ __decorate([
 __decorate([
     fromStore(zustand, (state) => state.workspace)
 ], Editor.prototype, "workspace", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.getCurrentActivity())
+], Editor.prototype, "activityData", void 0);
 __decorate([
     state()
 ], Editor.prototype, "isDragging", void 0);