@nyaruka/temba-components 0.129.6 → 0.129.8

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) => {

package/src/flow/actions/send_email.ts

@@ -41,8 +41,7 @@ export const send_email: ActionConfig = {
       type: 'textarea',
       required: true,
       evaluated: true,
-      rows: 4,
-      minHeight: 75
+      minHeight: 175
     }
   },
   validate: (action: SendEmail): ValidationResult => {

package/src/flow/actions/send_msg.ts

@@ -15,25 +15,36 @@ export const send_msg: ActionConfig = {
             ${action.quick_replies.map((reply) => {
               return html`<div class="quick-reply">${reply}</div>`;
             })}
+            ${action.template
+              ? html`<div
+                  style="border: 1px solid var(--color-widget-border);padding: 0.5em;margin-top: 1em;border-radius: var(--curvature); display:flex;background: rgba(0,0,0,.03);"
+                >
+                  <temba-icon name="channel_wac"></temba-icon>
+                  <div style="margin-left:0.5em">${action.template.name}</div>
+                </div>`
+              : null}
           </div>`
         : null}
     `;
   },
   form: {
     text: {
-      type: 'textarea',
-      label: 'Message Text',
+      type: 'message-editor',
+      label: 'Message',
       helpText:
-        'Enter the message to send. You can use expressions like @contact.name',
+        'Enter the message to send with optional attachments. You can use expressions like @contact.name',
       required: true,
       evaluated: true,
-      rows: 5,
-      minHeight: 75
+      placeholder: 'Type your message here...',
+      maxAttachments: 10,
+      accept: '',
+      endpoint: '/api/v2/media.json',
+      counter: 'temba-charcount',
+      gsm: true,
+      autogrow: true
     },
     quick_replies: {
       type: 'select',
-      label: 'Quick Replies',
-      helpText: 'Add quick reply options for this message',
       options: [],
       multi: true,
       tags: true,
@@ -41,6 +52,137 @@ export const send_msg: ActionConfig = {
       placeholder: 'Add quick replies...',
       maxItems: 10,
       evaluated: true
+    },
+    runtime_attachments: {
+      type: 'array',
+      helpText: 'Add dynamic attachments using expressions',
+      itemLabel: 'Attachment',
+      maxItems: 10,
+      isEmptyItem: (item: any) => {
+        return !item.expression || item.expression.trim() === '';
+      },
+      itemConfig: {
+        type: {
+          type: 'select',
+          options: [
+            { value: 'image', label: 'Image' },
+            { value: 'audio', label: 'Audio' },
+            { value: 'video', label: 'Video' },
+            { value: 'document', label: 'Document' }
+          ],
+          required: true,
+          searchable: false
+        },
+        expression: {
+          type: 'text',
+          placeholder: 'Expression (e.g. @contact.photo)',
+          required: true,
+          evaluated: true
+        }
+      }
+    }
+  },
+  layout: [
+    'text',
+    {
+      type: 'group',
+      label: 'Quick Replies',
+      items: ['quick_replies'],
+      collapsible: true,
+      collapsed: (formData: any) => {
+        // Collapse only if there are no quick replies
+        return !formData.quick_replies || formData.quick_replies.length === 0;
+      },
+      getGroupValueCount: (formData: any) => {
+        return formData.quick_replies?.length || 0;
+      }
+    },
+    {
+      type: 'group',
+      label: 'Runtime Attachments',
+      items: ['runtime_attachments'],
+      collapsible: true,
+      collapsed: true,
+      helpText: 'Add dynamic attachments that are evaluated at runtime',
+      getGroupValueCount: (formData: any) => {
+        return (
+          formData.runtime_attachments?.filter(
+            (item: any) =>
+              item && item.expression && item.expression.trim() !== ''
+          ).length || 0
+        );
+      }
+    }
+  ],
+  toFormData: (action: SendMsg) => {
+    // Extract runtime attachments from the text field attachments
+    const runtimeAttachments: { type: string; expression: string }[] = [];
+    const staticAttachments: string[] = [];
+
+    if (action.attachments && Array.isArray(action.attachments)) {
+      action.attachments.forEach((attachment) => {
+        if (typeof attachment === 'string' && attachment.includes(':')) {
+          const colonIndex = attachment.indexOf(':');
+          const contentType = attachment.substring(0, colonIndex);
+          const value = attachment.substring(colonIndex + 1);
+
+          if (!contentType.includes('/')) {
+            // This is a runtime attachment
+            runtimeAttachments.push({
+              type: contentType,
+              expression: value
+            });
+          } else {
+            // This is a static attachment
+            staticAttachments.push(attachment);
+          }
+        }
+      });
+    }
+
+    return {
+      uuid: action.uuid,
+      text: action.text || '',
+      attachments: staticAttachments,
+      runtime_attachments: runtimeAttachments,
+      quick_replies: (action.quick_replies || []).map((reply) => ({
+        name: reply,
+        value: reply
+      }))
+    };
+  },
+  fromFormData: (data: Record<string, any>) => {
+    const result = {
+      uuid: data.uuid,
+      type: 'send_msg',
+      text: data.text || '',
+      attachments: [],
+      quick_replies: (data.quick_replies || []).map((reply: any) =>
+        typeof reply === 'string' ? reply : reply.value || reply.name || reply
+      )
+    };
+
+    // Combine static attachments from text field with runtime attachments
+    const staticAttachments = data.attachments || [];
+    const runtimeAttachments = (data.runtime_attachments || [])
+      .filter((item: any) => item && item.type && item.expression) // Filter out invalid items
+      .map(
+        (item: { type: string; expression: string }) =>
+          `${item.type}:${item.expression}`
+      );
+
+    result.attachments = [...staticAttachments, ...runtimeAttachments];
+
+    // Remove quick_replies if empty to match original format
+    if (result.quick_replies.length === 0) {
+      delete (result as any).quick_replies;
+    }
+
+    return result as SendMsg;
+  },
+  sanitize: (formData: any): void => {
+    if (formData.text && typeof formData.text === 'string') {
+      formData.text = formData.text.trim();
     }
   },
   validate: (action: SendMsg): ValidationResult => {
@@ -50,6 +192,35 @@ export const send_msg: ActionConfig = {
       errors.text = 'Message text is required';
     }
 
+    const attachments = action.attachments || [];
+    if (attachments.length > 10) {
+      const staticAttachments = attachments.filter(
+        (attachment) =>
+          typeof attachment === 'string' &&
+          attachment.substring(0, attachment.indexOf(':')).includes('/')
+      );
+
+      const runtimeAttachments = attachments.filter(
+        (attachment) =>
+          typeof attachment === 'string' &&
+          !attachment.substring(0, attachment.indexOf(':')).includes('/')
+      );
+
+      if (runtimeAttachments.length > 0) {
+        errors.runtime_attachments =
+          'Each message can only have up to 10 attachments';
+      }
+
+      if (staticAttachments.length > 0) {
+        const message = 'Each message can only have up to 10 total attachments';
+        if (errors.text) {
+          errors.text += ` ${message}`;
+        } else {
+          errors.text = message;
+        }
+      }
+    }
+
     return {
       valid: Object.keys(errors).length === 0,
       errors

package/src/flow/types.ts

@@ -162,6 +162,7 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   type: 'select';
   options: string[] | { value: string; label: string }[];
   multi?: boolean;
+  clearable?: boolean;
   searchable?: boolean;
   tags?: boolean;
   placeholder?: string;
@@ -170,6 +171,7 @@ export interface SelectFieldConfig extends BaseFieldConfig {
   nameKey?: string;
   endpoint?: string;
   emails?: boolean;
+  flavor?: 'small' | 'large';
 }
 
 export interface KeyValueFieldConfig extends BaseFieldConfig {
@@ -193,6 +195,7 @@ export interface ArrayFieldConfig extends BaseFieldConfig {
     value: any,
     allItems: any[]
   ) => any[];
+  isEmptyItem?: (item: any) => boolean;
 }
 
 export interface CheckboxFieldConfig extends BaseFieldConfig {
@@ -201,13 +204,27 @@ export interface CheckboxFieldConfig extends BaseFieldConfig {
   animateChange?: string;
 }
 
+export interface MessageEditorFieldConfig extends BaseFieldConfig {
+  type: 'message-editor';
+  placeholder?: string;
+  minHeight?: number;
+  maxAttachments?: number;
+  accept?: string;
+  endpoint?: string;
+  counter?: string;
+  gsm?: boolean;
+  autogrow?: boolean;
+  disableCompletion?: boolean;
+}
+
 export type FieldConfig =
   | TextFieldConfig
   | TextareaFieldConfig
   | SelectFieldConfig
   | KeyValueFieldConfig
   | ArrayFieldConfig
-  | CheckboxFieldConfig;
+  | CheckboxFieldConfig
+  | MessageEditorFieldConfig;
 
 // Layout configurations for better form organization
 // Recursive layout system - any layout item can contain other layout items
@@ -228,8 +245,9 @@ export interface GroupLayoutConfig {
   label: string;
   items: LayoutItem[]; // can contain fields, rows, or other groups
   collapsible?: boolean;
-  collapsed?: boolean; // initial state if collapsible
+  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function
   helpText?: string;
+  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display
 }
 
 export type LayoutItem =
@@ -249,6 +267,7 @@ export interface ActionConfig {
 
   // Action editor configuration (legacy)
   // Form-level transformations
+  sanitize?: (formData: any) => any;
   toFormData?: (action: Action) => any;
   fromFormData?: (formData: any) => Action;
 

package/src/form/ArrayEditor.ts

@@ -1,6 +1,6 @@
 import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { FieldConfig } from '../flow/types';
+import { FieldConfig, SelectFieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
 
 @customElement('temba-array-editor')
@@ -19,6 +19,12 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     allItems: any[]
   ) => any[];
 
+  @property({ type: Function })
+  isEmptyItemFn?: (item: any) => boolean;
+
+  @property({ type: Boolean })
+  maintainEmptyItem = true; // Enable by default for better UX
+
   constructor() {
     super();
     this._items = [];
@@ -37,11 +43,36 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
   // Implement abstract methods
   isEmptyItem(item: ListItem): boolean {
-    return Object.values(item).every(
+    // Use configurable function if provided
+    if (this.isEmptyItemFn) {
+      return this.isEmptyItemFn(item);
+    }
+
+    // Default behavior: check if all values are empty
+    const values = Object.values(item);
+    if (values.length === 0) {
+      return true;
+    }
+
+    return values.every(
       (value) => value === undefined || value === null || value === ''
     );
   }
 
+  // Override cleanItems to be more permissive for form data
+  protected cleanItems(items: ListItem[]): any {
+    // For runtime attachments, keep items that have at least one non-empty field
+    return items.filter((item) => {
+      const values = Object.values(item);
+      return (
+        values.length > 0 &&
+        values.some(
+          (value) => value !== undefined && value !== null && value !== ''
+        )
+      );
+    });
+  }
+
   createEmptyItem(): ListItem {
     return {};
   }
@@ -83,6 +114,14 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
       return config.computeValue(item, currentValue);
     }
 
+    // For select fields, ensure we return the right type
+    if (config.type === 'select') {
+      const selectConfig = config as SelectFieldConfig;
+      if (currentValue === undefined || currentValue === null) {
+        return selectConfig.multi ? [] : '';
+      }
+    }
+
     return currentValue;
   }
 
@@ -112,13 +151,64 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
             this.handleFieldChange(itemIndex, fieldName, e.target.value)}
         ></temba-textinput>`;
 
-      case 'select':
+      case 'select': {
+        const selectConfig = config as SelectFieldConfig;
+        const fieldValue = this.computeFieldValue(itemIndex, fieldName, config);
+
         return html`<temba-select
-          .value=${computedValue || ''}
-          .options=${config.options}
-          @change=${(e: any) =>
-            this.handleFieldChange(itemIndex, fieldName, e.target.value)}
-        ></temba-select>`;
+          class="form-control"
+          ?clearable="${selectConfig.clearable || false}"
+          ?searchable="${selectConfig.searchable || false}"
+          ?tags="${selectConfig.tags || false}"
+          ?multi="${selectConfig.multi || false}"
+          ?emails="${selectConfig.emails || false}"
+          placeholder="${selectConfig.placeholder || ''}"
+          maxItems="${selectConfig.maxItems || 0}"
+          valueKey="${selectConfig.valueKey || 'value'}"
+          nameKey="${selectConfig.nameKey || 'name'}"
+          endpoint="${selectConfig.endpoint || ''}"
+          value="${fieldValue || ''}"
+          flavor="small"
+          @change="${(e: Event) => {
+            const target = e.target as any;
+            let value: any;
+
+            // For temba-select, extract the correct value
+            if (target.tagName === 'TEMBA-SELECT') {
+              if (target.multi || target.emails || target.tags) {
+                value = target.values || [];
+              } else {
+                // Single select: extract value from first selected option
+                const values = target.values || [];
+                value =
+                  values.length > 0 && values[0]
+                    ? values[0].value !== undefined
+                      ? values[0].value
+                      : values[0]
+                    : '';
+              }
+            } else {
+              value = target.value;
+            }
+
+            this.handleFieldChange(itemIndex, fieldName, value);
+          }}"
+        >
+          ${selectConfig.options?.map((option: any) => {
+            if (typeof option === 'string') {
+              return html`<temba-option
+                name="${option}"
+                value="${option}"
+              ></temba-option>`;
+            } else {
+              return html`<temba-option
+                name="${option.label || option.name}"
+                value="${option.value}"
+              ></temba-option>`;
+            }
+          })}
+        </temba-select>`;
+      }
 
       default:
         return html`<span>Unsupported field type: ${config.type}</span>`;
@@ -130,29 +220,25 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
     return html`
       <div class="array-item">
-        <div class="item-header">
-          <span class="item-title">${this.itemLabel} ${index + 1}</span>
+        <div class="item-fields">
+          ${Object.entries(this.itemConfig).map(
+            ([fieldName, config]) => html`
+              <div class="field">
+                ${this.renderField(index, fieldName, config)}
+              </div>
+            `
+          )}
           ${canRemove
             ? html`
                 <button
                   @click=${() => this.removeItem(index)}
                   class="remove-btn"
                 >
-                  Remove
+                  <temba-icon name="x"></temba-icon>
                 </button>
               `
             : ''}
         </div>
-        <div class="item-fields">
-          ${Object.entries(this.itemConfig).map(
-            ([fieldName, config]) => html`
-              <div class="field">
-                <label>${config.label}${config.required ? ' *' : ''}</label>
-                ${this.renderField(index, fieldName, config)}
-              </div>
-            `
-          )}
-        </div>
       </div>
     `;
   }
@@ -171,27 +257,15 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
   static styles = css`
     .array-editor {
-      border: 1px solid #e0e0e0;
-      border-radius: 6px;
-      padding: 16px;
-      background: #fafafa;
     }
 
     .array-item {
-      border: 1px solid #d0d0d0;
-      border-radius: 4px;
-      padding: 16px;
-      margin-bottom: 12px;
-      background: white;
     }
 
     .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 12px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid #eee;
     }
 
     .item-title {
@@ -200,8 +274,17 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     .item-fields {
-      display: grid;
+      display: flex;
       gap: 12px;
+      align-items: center;
+    }
+
+    .field {
+      flex: 1;
+    }
+
+    .field:first-child {
+      flex: 0 0 140px; /* Fixed width for type dropdown */
     }
 
     .field label {
@@ -214,7 +297,7 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
     .add-btn,
     .remove-btn {
-      padding: 8px 16px;
+      padding: 8px;
       border: 1px solid #ccc;
       border-radius: 4px;
       background: white;
@@ -228,13 +311,8 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     .remove-btn {
-      background: #fff5f5;
-      border-color: #fecaca;
-      color: #dc2626;
-    }
-
-    .remove-btn:hover {
-      background: #fef2f2;
+      background: #fefefe;
+      color: #999;
     }
   `;
 }

package/src/form/BaseListEditor.ts

@@ -52,10 +52,12 @@ export abstract class BaseListEditor<
   }
 
   protected shouldShowAddButton(): boolean {
-    return (
-      !this.maintainEmptyItem &&
-      (!this.maxItems || this._items.length < this.maxItems)
-    );
+    // Never show add button when maintaining empty items (auto-add behavior)
+    if (this.maintainEmptyItem) {
+      return false;
+    }
+
+    return !this.maxItems || this._items.length < this.maxItems;
   }
 
   render(): TemplateResult {
@@ -65,7 +67,7 @@ export abstract class BaseListEditor<
       <div class=${this.getContainerClass()}>
         <div
           class="list-items"
-          style="gap: 8px; display: grid; grid-template-columns: 1fr;"
+          style="display: grid; grid-template-columns: 1fr; gap: 8px;"
         >
           ${items.map((item, index) => this.renderItem(item, index))}
         </div>
@@ -89,7 +91,8 @@ export abstract class BaseListEditor<
 
     if (this.maintainEmptyItem) {
       const hasEmptyItem = items.some((item) => this.isEmptyItem(item));
-      if (!hasEmptyItem) {
+      // Only add empty item if we haven't reached maxItems and don't already have an empty item
+      if (!hasEmptyItem && (!this.maxItems || items.length < this.maxItems)) {
         items.push(this.createEmptyItem());
       }
     }
@@ -111,6 +114,19 @@ export abstract class BaseListEditor<
     fieldValue: any
   ) {
     const updatedItems = [...this._items];
+
+    // If editing beyond the current array (auto-generated empty row), check maxItems
+    if (index >= this._items.length) {
+      if (this.maxItems && this._items.length >= this.maxItems) {
+        // Don't allow adding new items if we've reached maxItems
+        return;
+      }
+      // Extend the array to include the new item
+      while (updatedItems.length <= index) {
+        updatedItems.push(this.createEmptyItem());
+      }
+    }
+
     const currentItem = updatedItems[index] || this.createEmptyItem();
 
     updatedItems[index] = {