@nyaruka/temba-components 0.129.7 → 0.129.8

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

@@ -57,6 +57,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/flow/NodeEditor.ts

@@ -14,6 +14,7 @@ import {
   SelectFieldConfig,
   CheckboxFieldConfig,
   TextareaFieldConfig,
+  MessageEditorFieldConfig,
   LayoutItem,
   RowLayoutConfig,
   GroupLayoutConfig
@@ -31,6 +32,10 @@ export class NodeEditor extends RapidElement {
         gap: 15px;
         min-width: 400px;
         padding-bottom: 40px;
+
+        --color-bubble-bg: rgba(255, 255, 255, 0.8);
+        --color-bubble-border: #999;
+        --color-bubble-text: #777;
       }
 
       .form-field {
@@ -39,10 +44,6 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-field label {
-        font-weight: 500;
-        margin-bottom: 6px;
-        color: #333;
-        font-size: 14px;
       }
 
       .field-errors {
@@ -103,10 +104,16 @@ export class NodeEditor extends RapidElement {
         border-color: var(--color-error, tomato);
       }
 
+      .form-group.has-bubble {
+        border-width: 1px;
+        border-color: var(--color-bubble-border, #aaa);
+      }
+
       .form-group-header {
         background: #f8f9fa;
-        padding: 12px 15px;
+        padding: 8px 10px;
         border-bottom: 1px solid #e0e0e0;
+
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -114,6 +121,17 @@ export class NodeEditor extends RapidElement {
         user-select: none;
       }
 
+      .form-group.has-bubble .form-group-header {
+      }
+
+      .collapsed .form-group-header {
+        border: none;
+      }
+
+      .form-group-header:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
       .form-group-header.collapsible:hover {
         background: #f1f3f4;
       }
@@ -124,7 +142,7 @@ export class NodeEditor extends RapidElement {
 
       .form-group-title {
         font-weight: 500;
-        color: #333;
+        color: var(--color-label, #777);
         font-size: 14px;
         display: flex;
       }
@@ -147,13 +165,13 @@ export class NodeEditor extends RapidElement {
       }
 
       .form-group-content {
-        padding: 15px;
+        padding: 6px;
         display: flex;
         flex-direction: column;
         gap: 15px;
         overflow: hidden;
-        transition: all 0.3s ease;
-        max-height: 1000px; /* Large enough to accommodate most content */
+        transition: all 0.2s ease-in-out;
+
         opacity: 1;
       }
 
@@ -166,9 +184,14 @@ export class NodeEditor extends RapidElement {
 
       .group-toggle-icon {
         color: #666;
-        transition: transform 0.3s ease;
+        transition: transform 0.3s ease, opacity 0.3s ease;
         cursor: pointer;
         transform: rotate(0deg);
+        opacity: 1;
+      }
+
+      .group-toggle-icon.faded {
+        opacity: 0;
       }
 
       .group-toggle-icon.expanded {
@@ -187,6 +210,58 @@ export class NodeEditor extends RapidElement {
         color: var(--color-error, tomato);
         margin-right: 8px;
       }
+
+      .group-count-bubble {
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px;
+        min-width: 12px;
+        min-height: 12px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        line-height: 0px;
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        color: var(--color-bubble-text, #000);
+      }
+
+      .group-count-bubble.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-checkmark-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 1;
+        transition: opacity 0.3s ease;
+        border-radius: 50%;
+        color: var(--color-bubble-text, #000);
+        background: var(--color-bubble-bg, #fff);
+        border: 1px solid var(--color-bubble-border, #777);
+        padding: 0.2em;
+      }
+
+      .group-checkmark-icon.hidden {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .group-toggle-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+      }
     `;
   }
 
@@ -214,6 +289,9 @@ export class NodeEditor extends RapidElement {
   @state()
   private groupCollapseState: { [key: string]: boolean } = {};
 
+  @state()
+  private groupHoverState: { [key: string]: boolean } = {};
+
   connectedCallback(): void {
     super.connectedCallback();
     this.initializeFormData();
@@ -241,6 +319,7 @@ export class NodeEditor extends RapidElement {
     this.formData = {};
     this.errors = {};
     this.groupCollapseState = {};
+    this.groupHoverState = {};
   }
 
   private initializeFormData(): void {
@@ -484,7 +563,7 @@ export class NodeEditor extends RapidElement {
             ) {
               errors[fieldName] = `${
                 (fieldConfig as any).label || fieldName
-              } is required`;
+              } is required.`;
             }
 
             // Check minLength for text fields
@@ -518,6 +597,11 @@ export class NodeEditor extends RapidElement {
       if (actionConfig?.validate) {
         // Convert form data back to action for validation
         let actionForValidation: Action;
+
+        if (actionConfig.sanitize) {
+          actionConfig.sanitize(this.formData);
+        }
+
         if (actionConfig.fromFormData) {
           actionForValidation = actionConfig.fromFormData(this.formData);
         } else {
@@ -834,10 +918,49 @@ export class NodeEditor extends RapidElement {
     // Check for computed values in dependent fields
     this.updateComputedFields(propertyName);
 
+    // Re-evaluate group collapse states that depend on form data
+    this.updateGroupCollapseStates();
+
     // Trigger re-render to handle conditional field visibility
     this.requestUpdate();
   }
 
+  private updateGroupCollapseStates(): void {
+    if (!this.action) return;
+
+    const config = ACTION_CONFIG[this.action.type];
+    if (!config?.layout) return;
+
+    this.updateGroupCollapseStatesRecursive(config.layout);
+  }
+
+  private updateGroupCollapseStatesRecursive(items: LayoutItem[]): void {
+    items.forEach((item) => {
+      if (typeof item === 'object' && item.type === 'group') {
+        const { label, collapsed, collapsible } = item;
+
+        // Only update if the group is collapsible and has a function-based collapsed property
+        if (collapsible && typeof collapsed === 'function') {
+          const newCollapsedState = collapsed(this.formData);
+
+          // Only update if the state has changed to avoid unnecessary re-renders
+          if (this.groupCollapseState[label] !== newCollapsedState) {
+            this.groupCollapseState = {
+              ...this.groupCollapseState,
+              [label]: newCollapsedState
+            };
+          }
+        }
+
+        // Recursively check nested items
+        this.updateGroupCollapseStatesRecursive(item.items);
+      } else if (typeof item === 'object' && item.type === 'row') {
+        // Recursively check items in rows
+        this.updateGroupCollapseStatesRecursive(item.items);
+      }
+    });
+  }
+
   private updateComputedFields(changedFieldName: string): void {
     if (!this.action) return;
 
@@ -980,6 +1103,7 @@ export class NodeEditor extends RapidElement {
           nameKey="${selectConfig.nameKey || 'name'}"
           endpoint="${selectConfig.endpoint || ''}"
           .helpText="${config.helpText || ''}"
+          flavor="${selectConfig.flavor || 'small'}"
           @change="${(e: Event) => this.handleFormFieldChange(fieldName, e)}"
         >
           ${selectConfig.options?.map((option: any) => {
@@ -1028,9 +1152,11 @@ export class NodeEditor extends RapidElement {
             .sortable="${config.sortable}"
             .itemLabel="${config.itemLabel || 'Item'}"
             .minItems="${config.minItems || 0}"
+            .maxItems="${config.maxItems || 0}"
             .onItemChange="${config.onItemChange}"
-            @change="${(e: CustomEvent) =>
-              this.handleNewFieldChange(fieldName, e.detail.value)}"
+            .isEmptyItemFn="${config.isEmptyItem}"
+            @change="${(e: Event) =>
+              this.handleNewFieldChange(fieldName, (e.target as any).value)}"
           ></temba-array-editor>
           ${errors.length
             ? html`<div class="field-errors">${errors.join(', ')}</div>`
@@ -1057,6 +1183,30 @@ export class NodeEditor extends RapidElement {
         </div>`;
       }
 
+      case 'message-editor': {
+        const messageConfig = config as MessageEditorFieldConfig;
+        return html`<temba-message-editor
+          name="${fieldName}"
+          label="${config.label}"
+          ?required="${config.required}"
+          .errors="${errors}"
+          .value="${value || ''}"
+          .attachments="${this.formData.attachments || []}"
+          placeholder="${messageConfig.placeholder || ''}"
+          .helpText="${config.helpText || ''}"
+          ?autogrow="${messageConfig.autogrow}"
+          ?gsm="${messageConfig.gsm}"
+          ?disableCompletion="${messageConfig.disableCompletion}"
+          counter="${messageConfig.counter || ''}"
+          accept="${messageConfig.accept || ''}"
+          endpoint="${messageConfig.endpoint || ''}"
+          max-attachments="${messageConfig.maxAttachments || 3}"
+          minHeight="${messageConfig.minHeight || 60}"
+          @change="${(e: Event) =>
+            this.handleMessageEditorChange(fieldName, e)}"
+        ></temba-message-editor>`;
+      }
+
       default:
         return html`<div>Unsupported field type: ${(config as any).type}</div>`;
     }
@@ -1069,6 +1219,20 @@ export class NodeEditor extends RapidElement {
     };
   }
 
+  private handleGroupMouseEnter(groupLabel: string): void {
+    this.groupHoverState = {
+      ...this.groupHoverState,
+      [groupLabel]: true
+    };
+  }
+
+  private handleGroupMouseLeave(groupLabel: string): void {
+    this.groupHoverState = {
+      ...this.groupHoverState,
+      [groupLabel]: false
+    };
+  }
+
   private expandGroupsWithErrors(errors: { [key: string]: string }): void {
     if (!this.action) return;
 
@@ -1191,19 +1355,25 @@ export class NodeEditor extends RapidElement {
       items,
       collapsible = false,
       collapsed = false,
-      helpText
+      helpText,
+      getGroupValueCount
     } = groupConfig;
 
     // Initialize collapse state if not set
     if (collapsible && !(label in this.groupCollapseState)) {
+      // Evaluate collapsed property - can be boolean or function
+      const initialCollapsed =
+        typeof collapsed === 'function' ? collapsed(this.formData) : collapsed;
+
       this.groupCollapseState = {
         ...this.groupCollapseState,
-        [label]: collapsed
+        [label]: initialCollapsed
       };
     }
 
     const isCollapsed = collapsible
-      ? this.groupCollapseState[label] ?? collapsed
+      ? this.groupCollapseState[label] ??
+        (typeof collapsed === 'function' ? collapsed(this.formData) : collapsed)
       : false;
 
     // Check if any field in this group has errors
@@ -1212,10 +1382,41 @@ export class NodeEditor extends RapidElement {
       (fieldName) => this.errors[fieldName]
     );
 
+    // Calculate count for bubble display
+    let valueCount = 0;
+    let showBubble = false;
+    let showCheckmark = false;
+    let hasValue = false;
+    const isHovered = this.groupHoverState[label] ?? false;
+
+    if (getGroupValueCount && collapsible) {
+      try {
+        const result = getGroupValueCount(this.formData);
+
+        if (typeof result === 'boolean') {
+          // Boolean result - show checkmark when true
+          showCheckmark = result && isCollapsed && !isHovered;
+          hasValue = result;
+        } else if (typeof result === 'number') {
+          // Numeric result - show count bubble
+          valueCount = result;
+          showBubble = valueCount > 0 && isCollapsed && !isHovered;
+          hasValue = valueCount > 0;
+        }
+      } catch (error) {
+        console.error(
+          `Error calculating group value count for ${label}:`,
+          error
+        );
+      }
+    }
+
     return html`
       <div
         class="form-group ${collapsible ? 'collapsible' : ''} ${groupHasErrors
           ? 'has-errors'
+          : ''} ${isCollapsed ? 'collapsed' : 'expanded'} ${hasValue
+          ? 'has-bubble'
           : ''}"
       >
         <div
@@ -1223,6 +1424,12 @@ export class NodeEditor extends RapidElement {
           @click=${collapsible
             ? () => this.handleGroupToggle(label)
             : undefined}
+          @mouseenter=${collapsible
+            ? () => this.handleGroupMouseEnter(label)
+            : undefined}
+          @mouseleave=${collapsible
+            ? () => this.handleGroupMouseLeave(label)
+            : undefined}
         >
           <div class="form-group-info">
             <div class="form-group-title">${label}</div>
@@ -1238,13 +1445,28 @@ export class NodeEditor extends RapidElement {
               ></temba-icon>`
             : ''}
           ${collapsible && !groupHasErrors
-            ? html`<temba-icon
-                name="arrow_right"
-                size="1.5"
-                class="group-toggle-icon ${isCollapsed
-                  ? 'collapsed'
-                  : 'expanded'}"
-              ></temba-icon>`
+            ? html`<div class="group-toggle-container">
+                <temba-icon
+                  name="arrow_right"
+                  size="1.5"
+                  class="group-toggle-icon ${isCollapsed
+                    ? 'collapsed'
+                    : 'expanded'} ${showBubble || showCheckmark ? 'faded' : ''}"
+                ></temba-icon>
+                ${showCheckmark
+                  ? html`<temba-icon
+                      name="check"
+                      size="1"
+                      class="group-checkmark-icon"
+                    ></temba-icon>`
+                  : showBubble
+                  ? html`<div
+                      class="group-count-bubble ${!showBubble ? 'hidden' : ''}"
+                    >
+                      ${valueCount}
+                    </div>`
+                  : ''}
+              </div>`
             : ''}
         </div>
         <div
@@ -1305,6 +1527,30 @@ export class NodeEditor extends RapidElement {
       this.errors = newErrors;
     }
 
+    // Re-evaluate group collapse states that depend on form data
+    this.updateGroupCollapseStates();
+
+    // Trigger re-render
+    this.requestUpdate();
+  }
+  private handleMessageEditorChange(fieldName: string, event: Event): void {
+    const target = event.target as any;
+
+    // Update both text and attachments from the message editor
+    this.formData = {
+      ...this.formData,
+      [fieldName]: target.value,
+      attachments: target.attachments || []
+    };
+
+    // Clear any existing errors for both fields
+    if (this.errors[fieldName]) {
+      const newErrors = { ...this.errors };
+      delete newErrors[fieldName];
+      delete newErrors.attachments;
+      this.errors = newErrors;
+    }
+
     // Trigger re-render
     this.requestUpdate();
   }

package/src/flow/actions/call_webhook.ts

@@ -2,6 +2,19 @@ import { html } from 'lit-html';
 import { ActionConfig, COLORS } from '../types';
 import { Node, CallWebhook } from '../../store/flow-definition';
 
+const defaultPost = `@(json(object(
+  "contact", object(
+    "uuid", contact.uuid, 
+    "name", contact.name, 
+    "urn", contact.urn
+  ),
+  "flow", object(
+    "uuid", run.flow.uuid, 
+    "name", run.flow.name
+  ),
+  "results", foreach_value(results, extract_object, "value", "category")
+)))`;
+
 export const call_webhook: ActionConfig = {
   name: 'Call Webhook',
   color: COLORS.call,
@@ -19,7 +32,7 @@ export const call_webhook: ActionConfig = {
       required: true,
       options: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'PATCH'],
       maxWidth: '120px',
-      searchable: true
+      searchable: false
     },
     url: {
       type: 'text',
@@ -51,23 +64,10 @@ export const call_webhook: ActionConfig = {
             ? values.method[0].value || values.method[0].name
             : values.method;
 
-        const defaultTemplate = `@(json(object(
-  "contact", object(
-    "uuid", contact.uuid, 
-    "name", contact.name, 
-    "urn", contact.urn
-  ),
-  "flow", object(
-    "uuid", run.flow.uuid, 
-    "name", run.flow.name
-  ),
-  "results", foreach_value(results, extract_object, "value", "category")
-)))`;
-
         if (method === 'POST') {
           // For POST, provide the template if body is empty or was never set by user
           if (!currentValue || currentValue.trim() === '') {
-            return defaultTemplate;
+            return defaultPost;
           }
         } else {
           // For non-POST methods, clear the body if it was auto-generated or empty
@@ -80,7 +80,7 @@ export const call_webhook: ActionConfig = {
             isOriginallyEmpty ||
             !currentValue ||
             currentValue.trim() === '' ||
-            currentValue.trim() === defaultTemplate.trim()
+            currentValue.trim() === defaultPost.trim()
           ) {
             return '';
           }
@@ -100,7 +100,10 @@ export const call_webhook: ActionConfig = {
       items: ['headers'],
       collapsible: true,
       collapsed: true,
-      helpText: 'Configure authentication or custom headers'
+      helpText: 'Configure authentication or custom headers',
+      getGroupValueCount: (formData: any) => {
+        return formData.headers?.length + 10 || 0;
+      }
     },
     {
       type: 'group',
@@ -108,7 +111,14 @@ export const call_webhook: ActionConfig = {
       items: ['body'],
       collapsible: true,
       collapsed: true,
-      helpText: 'Configure the request payload'
+      helpText: 'Configure the request payload',
+      getGroupValueCount: (formData: any) => {
+        return !!(
+          formData.body &&
+          formData.body.trim() !== '' &&
+          formData.body !== defaultPost
+        );
+      }
     }
   ],
   toFormData: (action: CallWebhook) => {