@nyaruka/temba-components 0.167.0 → 0.168.0

package/src/events.ts

@@ -11,6 +11,18 @@ export interface ContactLanguageChangedEvent extends ContactEvent {
   language: string;
 }
 
+// ephemeral state event - arrives over the socket but is never persisted,
+// updates the contact's current flow rather than recording history
+export interface ContactFlowChangedEvent extends ContactEvent {
+  flow: ObjectReference | null;
+}
+
+// ephemeral state event - arrives over the socket but is never persisted,
+// updates the contact's last seen rather than recording history
+export interface ContactLastSeenChangedEvent extends ContactEvent {
+  last_seen_on: string;
+}
+
 export interface ContactStatusChangedEvent extends ContactEvent {
   status: string;
 }
@@ -62,6 +74,7 @@ export interface TicketEvent extends ContactEvent {
     // ticket_opened
     uuid: string;
     topic?: ObjectReference;
+    assignee?: User;
   };
   ticket_uuid?: string; // all other event types
   assignee?: User;
@@ -75,7 +88,9 @@ export interface NameChangedEvent extends ContactEvent {
 
 export interface UpdateFieldEvent extends ContactEvent {
   field: { key: string; name: string };
-  value: { text: string };
+  // engine field values always carry text; typed representations are
+  // present when the value parses as that type (see goflow's Value)
+  value: { text: string; datetime?: string; number?: string };
 }
 
 export interface ContactGroupsEvent extends ContactEvent {

package/src/flow/NodeEditor.ts

@@ -1269,17 +1269,17 @@ export class NodeEditor extends RapidElement {
           // array/object handling, an over-long value here is emitted into the definition
           // and rejected by the backend (goflow caps result names at 64 and quick replies
           // at 1000 chars).
+          const itemLength = (item: any): number => {
+            if (typeof item === 'string') return item.length;
+            if (item && typeof item === 'object') {
+              const text = item.value ?? item.name;
+              return typeof text === 'string' ? text.length : 0;
+            }
+            return 0;
+          };
+
           const maxLength = (fieldConfig as any).maxLength;
           if (maxLength) {
-            const itemLength = (item: any): number => {
-              if (typeof item === 'string') return item.length;
-              if (item && typeof item === 'object') {
-                const text = item.value ?? item.name;
-                return typeof text === 'string' ? text.length : 0;
-              }
-              return 0;
-            };
-
             const exceedsMax = Array.isArray(value)
               ? value.some((item) => itemLength(item) > maxLength)
               : itemLength(value) > maxLength;
@@ -1290,6 +1290,79 @@ export class NodeEditor extends RapidElement {
               } must be no more than ${maxLength} characters`;
             }
           }
+
+          // Check maxLength declared on array item sub-fields (e.g. rule categories,
+          // case arguments) - these live in itemConfig which the top-level check
+          // above doesn't reach, so without this an over-long value is emitted into
+          // the definition and rejected by the backend.
+          if (
+            fieldConfig.type === 'array' &&
+            fieldConfig.itemConfig &&
+            Array.isArray(value)
+          ) {
+            Object.entries(fieldConfig.itemConfig).forEach(
+              ([subFieldName, subFieldConfig]) => {
+                const subMaxLength = (subFieldConfig as any).maxLength;
+                if (!subMaxLength || errors[fieldName]) {
+                  return;
+                }
+                const exceeds = value.some((item: any) => {
+                  // skip sub-fields hidden for this item (e.g. a rule value for
+                  // an operator that takes no operands) - they aren't emitted
+                  const visible = (subFieldConfig as any).conditions?.visible;
+                  if (visible && !visible(item)) {
+                    return false;
+                  }
+                  // measure like the top-level check so option-object values
+                  // (e.g. a select or tag input inside an array) are covered
+                  const subValue = item?.[subFieldName];
+                  return Array.isArray(subValue)
+                    ? subValue.some((sub) => itemLength(sub) > subMaxLength)
+                    : itemLength(subValue) > subMaxLength;
+                });
+                if (exceeds) {
+                  errors[fieldName] = `${
+                    (subFieldConfig as any).label || subFieldName
+                  } must be no more than ${subMaxLength} characters`;
+                }
+              }
+            );
+          }
+
+          // Check key-value fields against their declared limits (e.g. goflow caps
+          // webhook headers at 100 entries, names at 100 chars and values at 1000).
+          if (fieldConfig.type === 'key-value' && Array.isArray(value)) {
+            const rows = value.filter(
+              (item: any) =>
+                ((item?.key || '') as string).trim() !== '' ||
+                ((item?.value || '') as string).trim() !== ''
+            );
+            const label = (fieldConfig as any).label || fieldName;
+            if (fieldConfig.maxItems && rows.length > fieldConfig.maxItems) {
+              errors[fieldName] =
+                `${label} can have no more than ${fieldConfig.maxItems} entries`;
+            } else if (
+              fieldConfig.keyMaxLength &&
+              rows.some(
+                (item: any) =>
+                  (item.key || '').length > fieldConfig.keyMaxLength
+              )
+            ) {
+              errors[fieldName] = `${
+                fieldConfig.keyPlaceholder || 'Key'
+              } must be no more than ${fieldConfig.keyMaxLength} characters`;
+            } else if (
+              fieldConfig.valueMaxLength &&
+              rows.some(
+                (item: any) =>
+                  (item.value || '').length > fieldConfig.valueMaxLength
+              )
+            ) {
+              errors[fieldName] = `${
+                fieldConfig.valuePlaceholder || 'Value'
+              } must be no more than ${fieldConfig.valueMaxLength} characters`;
+            }
+          }
         });
       }
 

package/src/flow/actions/add_contact_urn.ts

@@ -66,6 +66,7 @@ export const add_contact_urn: ActionConfig = {
       label: 'URN Value',
       helpText: 'Enter the URN value (e.g., phone number, Facebook ID, etc.)',
       required: true,
+      maxLength: 1000,
       placeholder: 'Enter the URN value...',
       evaluated: true
     }

package/src/flow/actions/play_audio.ts

@@ -25,6 +25,7 @@ export const play_audio: ActionConfig = {
       type: 'text',
       label: 'Recording URL',
       required: true,
+      maxLength: 8192,
       evaluated: true
     }
   },

package/src/flow/actions/send_broadcast.ts

@@ -4,7 +4,10 @@ import { Node, SendBroadcast } from '../../store/flow-definition';
 import {
   renderMixedList,
   renderClamped,
-  renderHighlightedText
+  renderHighlightedText,
+  validateRecipients,
+  validateTemplateVariables,
+  validateWith
 } from '../utils';
 import { Icon } from '../../Icons';
 import { CustomEventType } from '../../interfaces';
@@ -182,6 +185,19 @@ export const send_broadcast: ActionConfig = {
       formData.text = formData.text.trim();
     }
   },
+  validate: validateWith((formData, errors) => {
+    const recipientsError = validateRecipients(formData.recipients || []);
+    if (recipientsError) {
+      errors.recipients = recipientsError;
+    }
+
+    const templateVariablesError = validateTemplateVariables(
+      formData.template_variables || []
+    );
+    if (templateVariablesError) {
+      errors.template = templateVariablesError;
+    }
+  }),
   localizable: ['text', 'attachments'],
   toLocalizationFormData: (
     action: SendBroadcast,

package/src/flow/actions/send_msg.ts

@@ -8,7 +8,11 @@ import {
 } from '../types';
 import { Node, SendMsg } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
-import { renderClamped, renderHighlightedText } from '../utils';
+import {
+  renderClamped,
+  renderHighlightedText,
+  validateTemplateVariables
+} from '../utils';
 import { splitSMS } from '../../display/sms';
 
 const ATTACHMENT_TYPE_NAMES: Record<string, string> = {
@@ -268,6 +272,13 @@ export const send_msg: ActionConfig = {
       }
     }
 
+    const templateVariablesError = validateTemplateVariables(
+      formData.template_variables || []
+    );
+    if (templateVariablesError) {
+      errors.template = templateVariablesError;
+    }
+
     return {
       valid: Object.keys(errors).length === 0,
       errors

package/src/flow/actions/set_run_result.ts

@@ -51,6 +51,7 @@ export const set_run_result: ActionConfig = {
       helpText: 'The value to save for this result (can use expressions)',
       required: false,
       evaluated: true,
+      maxLength: 10000,
       placeholder: 'Enter value...'
     },
     category: {

package/src/flow/actions/start_session.ts

@@ -10,7 +10,8 @@ import { Node, StartSession } from '../../store/flow-definition';
 import {
   renderMixedList,
   renderFlowLinks,
-  renderHighlightedText
+  renderHighlightedText,
+  validateRecipients
 } from '../utils';
 import { Icon } from '../../Icons';
 import { CustomEventType } from '../../interfaces';
@@ -158,6 +159,7 @@ export const start_session: ActionConfig = {
       evaluated: true,
       label: 'Contact Query',
       helpText: 'Only one matching contact will be started',
+      maxLength: 10000,
       placeholder: 'household_id = @fields.household_id',
       conditions: {
         visible: (formData: FormData) => {
@@ -194,6 +196,13 @@ export const start_session: ActionConfig = {
       errors.recipients = 'At least one contact or group must be selected';
     }
 
+    if (startType === 'manual') {
+      const recipientsError = validateRecipients(formData.recipients || []);
+      if (recipientsError) {
+        errors.recipients = recipientsError;
+      }
+    }
+
     // Check if query has a query string
     if (
       startType === 'query' &&

package/src/flow/nodes/shared-rules.ts

@@ -172,6 +172,7 @@ export const createRulesItemConfig = () => ({
     type: 'text' as const,
     placeholder: value1Placeholder,
     evaluated: true,
+    maxLength: 10000,
     flavor: 'xsmall' as const,
     conditions: {
       visible: value1VisibilityCondition
@@ -181,6 +182,7 @@ export const createRulesItemConfig = () => ({
     type: 'text' as const,
     placeholder: value2Placeholder,
     evaluated: true,
+    maxLength: 10000,
     flavor: 'xsmall' as const,
     conditions: {
       visible: value2VisibilityCondition

package/src/flow/nodes/split_by_airtime.ts

@@ -87,6 +87,7 @@ export const split_by_airtime: NodeConfig = {
 
     if (duplicates.length > 0) {
       errors.amounts = `Duplicate currencies found: ${duplicates.join(', ')}`;
+      return;
     }
 
     for (const item of validAmounts) {
@@ -95,6 +96,11 @@ export const split_by_airtime: NodeConfig = {
         errors.amounts = 'All amounts must be valid positive numbers';
         return;
       }
+      // the engine caps amounts at 1e15
+      if (Number(amount) > 1e15) {
+        errors.amounts = 'Amounts must be 1,000,000,000,000,000 or less';
+        return;
+      }
     }
   }),
   render: (node: Node) => {

package/src/flow/nodes/split_by_expression.ts

@@ -32,6 +32,7 @@ export const split_by_expression: NodeConfig = {
       helpText: 'The expression to evaluate and split on',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       placeholder: '@fields.age'
     },
     rules: createRulesArrayConfig(

package/src/flow/nodes/split_by_llm.ts

@@ -57,6 +57,7 @@ export const split_by_llm: NodeConfig = {
       helpText: 'The input the AI will process',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       placeholder: '@input'
     },
     instructions: {
@@ -66,6 +67,7 @@ export const split_by_llm: NodeConfig = {
         'Tell the AI what to do with the input. The result can be referenced as **`@locals._llm_output`**',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       placeholder: 'Enter instructions for the AI model...',
       minHeight: 130
     }

package/src/flow/nodes/split_by_llm_categorize.ts

@@ -33,6 +33,7 @@ export const split_by_llm_categorize: NodeConfig = {
       helpText: 'The input to categorize (usually @input)',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       placeholder: '@input'
     },
     categories: {
@@ -50,7 +51,8 @@ export const split_by_llm_categorize: NodeConfig = {
         name: {
           type: 'text',
           placeholder: 'Category name',
-          required: true
+          required: true,
+          maxLength: 36
         }
       }
     },

package/src/flow/nodes/split_by_random.ts

@@ -24,7 +24,8 @@ export const split_by_random: NodeConfig = {
         name: {
           type: 'text',
           placeholder: 'Bucket name',
-          required: true
+          required: true,
+          maxLength: 36
         }
       }
     }

package/src/flow/nodes/split_by_resthook.ts

@@ -87,7 +87,10 @@ export const split_by_resthook: NodeConfig = {
     const existingCases = originalNode.router?.cases || [];
 
     const { router, exits } = createSuccessFailureRouter(
-      '@webhook.status',
+      // default() guards against @webhook being null (e.g. the call was
+      // skipped because the request exceeded the engine's size limit) which
+      // would otherwise produce lookup errors when the router evaluates
+      '@(default(webhook.status, 0))',
       {
         type: 'has_number_between',
         arguments: ['200', '299']

package/src/flow/nodes/split_by_webhook.ts

@@ -79,6 +79,7 @@ export const split_by_webhook: NodeConfig = {
       type: 'text',
       required: true,
       evaluated: true,
+      maxLength: 8192,
       placeholder: 'https://example.com/webhook'
     },
     headers: {
@@ -86,6 +87,9 @@ export const split_by_webhook: NodeConfig = {
       sortable: true,
       keyPlaceholder: 'Header name',
       valuePlaceholder: 'Header value',
+      maxItems: 100,
+      keyMaxLength: 100,
+      valueMaxLength: 8192,
       minRows: 0,
       dependsOn: ['method'],
       computeValue: (
@@ -108,6 +112,7 @@ export const split_by_webhook: NodeConfig = {
     body: {
       type: 'textarea',
       evaluated: true,
+      maxLength: 20000,
       placeholder: 'Request body content (JSON, XML, etc.)',
       minHeight: 200,
       dependsOn: ['method'],
@@ -248,7 +253,10 @@ export const split_by_webhook: NodeConfig = {
     const existingCases = originalNode.router?.cases || [];
 
     const { router, exits } = createSuccessFailureRouter(
-      '@webhook.status',
+      // default() guards against @webhook being null (e.g. the call was
+      // skipped because the request exceeded the engine's size limit) which
+      // would otherwise produce lookup errors when the router evaluates
+      '@(default(webhook.status, 0))',
       {
         type: 'has_number_between',
         arguments: ['200', '299']

package/src/flow/types.ts

@@ -257,6 +257,9 @@ export interface KeyValueFieldConfig extends BaseFieldConfig {
   valuePlaceholder?: string;
   minRows?: number;
   readOnlyKeys?: boolean;
+  maxItems?: number;
+  keyMaxLength?: number;
+  valueMaxLength?: number;
 }
 
 export interface ArrayFieldConfig extends BaseFieldConfig {

package/src/flow/utils.ts

@@ -28,6 +28,55 @@ export function validateWith(
   };
 }
 
+/**
+ * Validates a mixed recipients list (contacts, groups and expressions) against
+ * the engine's limits: at most 100 of each kind and expressions at most 1000
+ * characters. Returns an error message or null if the list is valid. The type
+ * predicates mirror how fromFormData partitions the list into the action's
+ * contacts / groups / legacy_vars.
+ */
+export function validateRecipients(recipients: any[]): string | null {
+  const contacts = recipients.filter(
+    (r: any) => r.type === 'contact' || (!r.type && !r.expression && r.id)
+  );
+  const groups = recipients.filter((r: any) => r.type === 'group');
+  const expressions = recipients.filter(
+    (r: any) => r.type === 'expression' || r.expression
+  );
+
+  if (contacts.length > 100) {
+    return 'You can only add up to 100 contacts';
+  }
+  if (groups.length > 100) {
+    return 'You can only add up to 100 groups';
+  }
+  if (expressions.length > 100) {
+    return 'You can only add up to 100 expressions';
+  }
+  const tooLong = expressions.some((e: any) => {
+    const value = e.value || e.name || e.id || '';
+    return typeof value === 'string' && value.length > 1000;
+  });
+  if (tooLong) {
+    return 'Expressions must be no more than 1000 characters';
+  }
+  return null;
+}
+
+/**
+ * Validates template variables against the engine's limit of 10000 characters
+ * per variable. Returns an error message or null if they're valid.
+ */
+export function validateTemplateVariables(variables: any[]): string | null {
+  const tooLong = variables.some(
+    (v: any) => typeof v === 'string' && v.length > 10000
+  );
+  if (tooLong) {
+    return 'Template variables must be no more than 10000 characters';
+  }
+  return null;
+}
+
 function makeTextToLocalizationFormData(fields: readonly string[]) {
   return (
     action: { uuid: string },

package/src/form/DatePicker.ts

@@ -29,7 +29,7 @@ export class DatePicker extends FieldElement {
 
       .input-wrapper {
         padding: var(--temba-textinput-padding);
-        flex-grow: 1;
+        flex-grow: 999;
       }
 
       .tz {
@@ -65,6 +65,7 @@ export class DatePicker extends FieldElement {
         flex-direction: row;
         align-items: center;
         padding: 0.4em 0em;
+        flex-grow: 1;
       }
 
       .container:focus-within {

package/src/layout/Card.ts

@@ -18,6 +18,11 @@ export class Card extends RapidElement {
 
       :host {
         display: block;
+        /* as a grid/flex item (cards flatten into the card stack's
+           grid through its slots) the automatic minimum is
+           min-content — allow shrinking so long unbreakable content
+           inside ellipsizes instead of widening the card */
+        min-width: 0;
       }
 
       /* an empty panel drops its card entirely — in tab (plain) mode the
@@ -115,6 +120,10 @@ export class Card extends RapidElement {
       .body {
         display: grid;
         grid-template-rows: 1fr;
+        /* the implicit column track is auto-sized and would grow to
+           the content's max-content (one long unbreakable line widens
+           the card instead of ellipsizing) — pin it to the card width */
+        grid-template-columns: minmax(0, 1fr);
         transition: grid-template-rows 200ms ease;
       }