@nyaruka/temba-components 0.156.2 → 0.156.4

package/src/flow/actions/send_broadcast.ts

@@ -76,6 +76,7 @@ export const send_broadcast: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Type your message here...',
+      maxLength: 640,
       maxAttachments: 10,
       accept: '',
       endpoint: '/api/v2/media.json',
@@ -180,5 +181,52 @@ export const send_broadcast: ActionConfig = {
     if (formData.text && typeof formData.text === 'string') {
       formData.text = formData.text.trim();
     }
+  },
+  localizable: ['text', 'attachments'],
+  toLocalizationFormData: (
+    action: SendBroadcast,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.text && Array.isArray(localization.text)) {
+      formData.text = localization.text[0] || '';
+    } else {
+      formData.text = '';
+    }
+
+    if (localization.attachments && Array.isArray(localization.attachments)) {
+      formData.attachments = localization.attachments;
+    } else {
+      formData.attachments = [];
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendBroadcast) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.text && formData.text.trim() !== '') {
+      if (formData.text !== action.text) {
+        localization.text = [formData.text];
+      }
+    }
+
+    const attachments = (formData.attachments || []).filter(
+      (att: string) => att && att.trim() !== ''
+    );
+
+    if (attachments.length > 0) {
+      if (
+        JSON.stringify(attachments) !==
+        JSON.stringify(action.attachments || [])
+      ) {
+        localization.attachments = attachments;
+      }
+    }
+
+    return localization;
   }
 };

package/src/flow/actions/send_email.ts

@@ -45,12 +45,13 @@ export const send_email: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Enter email subject',
-      maxLength: 255
+      maxLength: 1000
     },
     body: {
       type: 'textarea',
       required: true,
       evaluated: true,
+      maxLength: 10000,
       minHeight: 175
     }
   },
@@ -65,6 +66,46 @@ export const send_email: ActionConfig = {
       body: formData.body
     };
   },
+  localizable: ['subject', 'body'],
+  toLocalizationFormData: (
+    action: SendEmail,
+    localization: Record<string, any>
+  ) => {
+    const formData: FormData = {
+      uuid: action.uuid
+    };
+
+    if (localization.subject && Array.isArray(localization.subject)) {
+      formData.subject = localization.subject[0] || '';
+    } else {
+      formData.subject = '';
+    }
+
+    if (localization.body && Array.isArray(localization.body)) {
+      formData.body = localization.body[0] || '';
+    } else {
+      formData.body = '';
+    }
+
+    return formData;
+  },
+  fromLocalizationFormData: (formData: FormData, action: SendEmail) => {
+    const localization: Record<string, any> = {};
+
+    if (formData.subject && formData.subject.trim() !== '') {
+      if (formData.subject !== action.subject) {
+        localization.subject = [formData.subject];
+      }
+    }
+
+    if (formData.body && formData.body.trim() !== '') {
+      if (formData.body !== action.body) {
+        localization.body = [formData.body];
+      }
+    }
+
+    return localization;
+  },
   validate: (formData: FormData): ValidationResult => {
     const errors: { [key: string]: string } = {};
 

package/src/flow/actions/send_msg.ts

@@ -65,6 +65,7 @@ export const send_msg: ActionConfig = {
       required: true,
       evaluated: true,
       placeholder: 'Type your message here...',
+      maxLength: 10000,
       maxAttachments: 10,
       accept: '',
       endpoint: '/api/v2/media.json',

package/src/flow/actions/set_contact_language.ts

@@ -8,17 +8,14 @@ import {
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
-import { renderClamped } from '../utils';
+import { getLanguageDisplayName, renderClamped } from '../utils';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactLanguage) => {
-    const languageNames = new Intl.DisplayNames(['en'], {
-      type: 'language'
-    });
-    const name = languageNames.of(action.language) || action.language;
+    const name = getLanguageDisplayName(action.language);
     return renderClamped(
       html`Set to <strong>${name}</strong>`,
       `Set to ${name}`
@@ -38,12 +35,9 @@ export const set_contact_language: ActionConfig = {
         const store = getStore();
         const workspace = store?.getState().workspace;
         if (workspace?.languages && Array.isArray(workspace.languages)) {
-          const languageNames = new Intl.DisplayNames(['en'], {
-            type: 'language'
-          });
           return workspace.languages.map((languageCode: string) => ({
             value: languageCode,
-            name: languageNames.of(languageCode) || languageCode
+            name: getLanguageDisplayName(languageCode)
           }));
         }
         return [];
@@ -53,14 +47,11 @@ export const set_contact_language: ActionConfig = {
   toFormData: (action: SetContactLanguage) => {
     // Convert the language code back to the option object format expected by the form
     if (action.language) {
-      const languageNames = new Intl.DisplayNames(['en'], {
-        type: 'language'
-      });
       return {
         language: [
           {
             value: action.language,
-            name: languageNames.of(action.language) || action.language
+            name: getLanguageDisplayName(action.language)
           }
         ],
         uuid: action.uuid

package/src/flow/actions/set_run_result.ts

@@ -57,6 +57,7 @@ export const set_run_result: ActionConfig = {
       label: 'Category',
       helpText: 'Optional category for this result',
       required: false,
+      maxLength: 36,
       placeholder: 'Enter category...'
     }
   },

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

@@ -189,6 +189,7 @@ export const createRulesItemConfig = () => ({
     type: 'text' as const,
     placeholder: 'Category',
     required: true,
+    maxLength: 36,
     maxWidth: '120px',
     flavor: 'xsmall' as const
   }

package/src/flow/nodes/shared.ts

@@ -18,6 +18,7 @@ import { getOperatorConfig } from '../operators';
 export const resultNameField: TextFieldConfig = {
   type: 'text',
   required: false,
+  maxLength: 64,
   placeholder: '(optional)',
   helpText: 'The name to use to reference this result in the flow'
 };

package/src/flow/nodes/wait_for_audio.ts

@@ -16,6 +16,7 @@ export const wait_for_audio: NodeConfig = {
       type: 'text',
       label: 'Result Name',
       required: false,
+      maxLength: 64,
       placeholder: '(optional)',
       helpText: 'The name to use to reference this result in the flow'
     }

package/src/flow/utils.ts

@@ -6,6 +6,17 @@ import { tokenize, TokenType } from '../excellent/tokenizer';
 import { TOKEN_COLORS } from '../excellent/token-styles';
 import { messageParser, sessionParser } from '../excellent/helpers';
 
+const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
+
+export function getLanguageDisplayName(code: string): string {
+  if (code === 'und') return 'Unknown';
+  try {
+    return languageNames.of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
 const IS_MAC =
   typeof navigator !== 'undefined' &&
   /Mac|iPod|iPhone|iPad/.test(navigator.platform);

package/src/simulator/Simulator.ts

@@ -34,6 +34,9 @@ const TEST_LOCATIONS = [
   'geo:-1.9536,30.0606' // Kigali
 ];
 
+const truncateUrl = (url: string, maxLen = 50): string =>
+  url && url.length > maxLen ? url.slice(0, maxLen) + '…' : url;
+
 interface Contact {
   uuid: string;
   name?: string;
@@ -1472,18 +1475,20 @@ export class Simulator extends RapidElement {
       const renderedEvent =
         event.type === Events.WEBHOOK_CALLED && this.hasWebhookDetails(event)
           ? html`<div class="webhook-event">
-              <div class="webhook-event-text">${rendered}</div>
-              <button
-                type="button"
-                data-webhook-details="true"
-                class="webhook-event-log-link"
-                title="View webhook call details"
-                aria-label="View webhook call details"
-                @click=${(clickEvent: MouseEvent) =>
-                  this.handleWebhookDetailsClick(event, clickEvent)}
-              >
-                <temba-icon name="log" size="0.8"></temba-icon>
-              </button>
+              <div class="webhook-event-text">
+                Called
+                <a
+                  href="#"
+                  class="webhook-event-url"
+                  data-webhook-details="true"
+                  title="View webhook call details"
+                  @click=${(clickEvent: MouseEvent) => {
+                    clickEvent.preventDefault();
+                    this.handleWebhookDetailsClick(event, clickEvent);
+                  }}
+                  >${truncateUrl((event as any).url)}</a
+                >
+              </div>
             </div>`
           : rendered;
 

package/temba-modules.ts

@@ -56,6 +56,7 @@ import { Toast } from './src/display/Toast';
 import { Chat } from './src/display/Chat';
 import { MediaPicker } from './src/form/MediaPicker';
 import { Editor } from './src/flow/Editor';
+import { EditorToolbar } from './src/flow/EditorToolbar';
 import { CanvasNode } from './src/flow/CanvasNode';
 import { StickyNote } from './src/flow/StickyNote';
 import { CanvasMenu } from './src/flow/CanvasMenu';
@@ -151,6 +152,7 @@ addCustomElement('temba-toast', Toast);
 addCustomElement('temba-chat', Chat);
 addCustomElement('temba-media-picker', MediaPicker);
 addCustomElement('temba-flow-editor', Editor);
+addCustomElement('temba-editor-toolbar', EditorToolbar);
 addCustomElement('temba-message-table', MessageTable);
 addCustomElement('temba-node-editor', NodeEditor);
 addCustomElement('temba-flow-node', CanvasNode);

package/web-test-runner.config.mjs

@@ -282,6 +282,8 @@ const wireScreenshots = async (page, context, wait, replaceScreenshots) => {
 
   await page.exposeFunction('click', async (element) => {
     if (page.isClosed()) return;
+    // reset mouse state to avoid "already pressed" errors
+    await page.mouse.up().catch(() => {});
     const frame = await page.frames().find((f) => {
       return true;
     });