@nyaruka/temba-components 0.129.7 → 0.129.9

package/src/display/Thumbnail.ts

@@ -56,7 +56,8 @@ export class Thumbnail extends RapidElement {
         background-repeat: no-repeat;
         border-radius: var(--curvature);
         max-height: calc(var(--thumb-size, 4em) * 2);
-        width: var(--thumb-size, 4em);
+        max-width: calc(var(--thumb-size, 4em) * 2);
+        height: var(--thumb-size, 4em);
         display: flex;
         align-items: center;
         justify-content: center;

package/src/events.ts

@@ -34,13 +34,20 @@ export interface ContactLanguageChangedEvent extends ContactEvent {
   session_uuid: string;
 }
 
-export interface OptinRequestedEvent extends ContactEvent {
+export interface OptInEvent extends ContactEvent {
   optin: {
     uuid: string;
     name: string;
   };
 }
 
+export interface CallEvent extends ContactEvent {
+  call: {
+    uuid: string;
+    urn: string;
+  };
+}
+
 export interface MsgEvent extends ContactEvent {
   msg: Msg;
   status: string;
@@ -57,6 +64,11 @@ export interface FlowEvent extends ContactEvent {
   status: string;
 }
 
+export interface RunEvent extends ContactEvent {
+  flow: ObjectReference;
+  status: string;
+}
+
 export interface URNsChangedEvent extends ContactEvent {
   urns: string[];
 }

package/src/excellent/helpers.ts

@@ -9,7 +9,7 @@ import {
   CompletionType
 } from '../interfaces';
 import { getStore, Store } from '../store/Store';
-import { renderMarkdown } from '../markdown';
+import { renderMarkdownInline } from '../markdown';
 
 const messageParser = new ExcellentParser('@', [
   'contact',
@@ -56,7 +56,7 @@ export const renderCompletionOption = (
               >
                 ${args}
               </div>
-              <div class="detail">${renderMarkdown(option.summary)}</div>
+              <div class="detail">${renderMarkdownInline(option.summary)}</div>
             `
           : null}
       </div>

package/src/flow/CanvasNode.ts

@@ -969,7 +969,28 @@ export class CanvasNode extends RapidElement {
           : ''}"
         style="left:${this.ui.position.left}px;top:${this.ui.position.top}px"
       >
-        ${this.node.actions.length > 0
+        ${nodeConfig && nodeConfig.render
+          ? html`<div class="router" style="position: relative;">
+              <button
+                class="remove-button"
+                @click=${(e: MouseEvent) => this.handleNodeRemoveClick(e)}
+                title="Remove node"
+              >
+                ✕
+              </button>
+              <div
+                @mousedown=${(e: MouseEvent) => this.handleNodeMouseDown(e)}
+                @mouseup=${(e: MouseEvent) => this.handleNodeMouseUp(e)}
+                style="cursor: pointer;"
+              >
+                ${this.renderNodeTitle(
+                  nodeConfig,
+                  this.actionRemovingState.has(this.node.uuid)
+                )}
+                ${nodeConfig.render(this.node)}
+              </div>
+            </div>`
+          : this.node.actions.length > 0
           ? this.ui.type === 'execute_actions'
             ? html`<temba-sortable-list
                 dragHandle="drag-handle"

package/src/flow/Editor.ts

@@ -383,7 +383,18 @@ export class Editor extends RapidElement {
 
   private saveChanges(): void {
     // post the flow definition to the server
-    getStore().postJSON(`/flow/revisions/${this.flow}`, this.definition);
+    getStore()
+      .postJSON(`/flow/revisions/${this.flow}`, this.definition)
+      .then((response) => {
+        // Update flow info with the response data
+        if (response.json && response.json.info) {
+          getStore().getState().setFlowInfo(response.json.info);
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to save flow:', error);
+      });
+
     getStore().getState().setDirtyDate(null);
   }