@nyaruka/temba-components 0.142.1 → 0.142.2

package/src/flow/actions/send_msg.ts

@@ -9,28 +9,30 @@ import {
 } from '../types';
 import { Node, SendMsg } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
+import { renderClamped } from '../utils';
 
 export const send_msg: ActionConfig = {
   name: 'Send Message',
   group: ACTION_GROUPS.send,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
+  hideFromActions: true,
   render: (_node: Node, action: SendMsg) => {
     const text = action.text.replace(/\n/g, '<br>');
     return html`
-      ${unsafeHTML(text)}
+      ${renderClamped(html`${unsafeHTML(text)}`, action.text)}
       ${(action.quick_replies || [])?.length > 0
         ? html`<div class="quick-replies">
             ${(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}
+      ${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}
     `;
@@ -61,6 +63,10 @@ export const send_msg: ActionConfig = {
       maxItems: 10,
       evaluated: true
     },
+    template: {
+      type: 'template-editor',
+      endpoint: '/api/internal/templates.json'
+    },
     runtime_attachments: {
       type: 'array',
       itemLabel: 'Attachment',
@@ -94,34 +100,38 @@ export const send_msg: ActionConfig = {
   layout: [
     'text',
     {
-      type: 'group',
-      label: 'Quick Replies',
-      items: ['quick_replies'],
-      collapsible: true,
-      collapsed: (formData: FormData) => {
-        // Collapse only if there are no quick replies
-        return !formData.quick_replies || formData.quick_replies.length === 0;
-      },
-      getGroupValueCount: (formData: FormData) => {
-        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',
-      contentPadding: '12px',
-      getGroupValueCount: (formData: FormData) => {
-        return (
-          formData.runtime_attachments?.filter(
-            (item: any) =>
-              item && item.expression && item.expression.trim() !== ''
-          ).length || 0
-        );
-      }
+      type: 'accordion',
+      sections: [
+        {
+          label: 'Quick Replies',
+          collapsed: true,
+          getValueCount: (formData: FormData) => {
+            return formData.quick_replies?.length || 0;
+          },
+          items: ['quick_replies']
+        },
+        {
+          label: 'WhatsApp Template',
+          collapsed: true,
+          getValueCount: (formData: FormData) => {
+            return !!formData.template;
+          },
+          items: ['template']
+        },
+        {
+          label: 'Runtime Attachments',
+          collapsed: true,
+          getValueCount: (formData: FormData) => {
+            return (
+              formData.runtime_attachments?.filter(
+                (item: any) =>
+                  item && item.expression && item.expression.trim() !== ''
+              ).length || 0
+            );
+          },
+          items: ['runtime_attachments']
+        }
+      ]
     }
   ],
   toFormData: (action: SendMsg) => {
@@ -159,7 +169,9 @@ export const send_msg: ActionConfig = {
       quick_replies: (action.quick_replies || []).map((reply) => ({
         name: reply,
         value: reply
-      }))
+      })),
+      template: action.template || null,
+      template_variables: action.template_variables || []
     };
   },
   fromFormData: (data: FormData) => {
@@ -196,6 +208,12 @@ export const send_msg: ActionConfig = {
       delete (result as any).quick_replies;
     }
 
+    // Add template and template_variables if a template is selected
+    if (data.template) {
+      (result as any).template = data.template;
+      (result as any).template_variables = data.template_variables || [];
+    }
+
     return result as SendMsg;
   },
   sanitize: (formData: FormData): void => {

package/src/flow/actions/set_contact_channel.ts

@@ -1,13 +1,17 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactChannel } from '../../store/flow-definition';
+import { renderClamped } from '../utils';
 
 export const set_contact_channel: ActionConfig = {
   name: 'Update Channel',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactChannel) => {
-    return html`<div>Set to <strong>${action.channel.name}</strong></div>`;
+    return renderClamped(
+      html`Set to <strong>${action.channel.name}</strong>`,
+      `Set to ${action.channel.name}`
+    );
   },
   form: {
     channel: {

package/src/flow/actions/set_contact_field.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactField } from '../../store/flow-definition';
+import { renderClamped } from '../utils';
 
 export const set_contact_field: ActionConfig = {
   name: 'Update Field',
@@ -8,12 +9,16 @@ export const set_contact_field: ActionConfig = {
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactField) => {
     if (action.value) {
-      return html`<div>
-        Set <strong>${action.field.name}</strong> to
-        <strong>${action.value}</strong>
-      </div>`;
+      return renderClamped(
+        html`Set <strong>${action.field.name}</strong> to
+          <strong>${action.value}</strong>`,
+        `Set ${action.field.name} to ${action.value}`
+      );
     } else {
-      return html`<div>Clear <strong>${action.field.name}</strong></div>`;
+      return renderClamped(
+        html`Clear <strong>${action.field.name}</strong>`,
+        `Clear ${action.field.name}`
+      );
     }
   },
   form: {

package/src/flow/actions/set_contact_language.ts

@@ -8,6 +8,7 @@ import {
 } from '../types';
 import { Node, SetContactLanguage } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
+import { renderClamped } from '../utils';
 
 export const set_contact_language: ActionConfig = {
   name: 'Update Language',
@@ -17,9 +18,11 @@ export const set_contact_language: ActionConfig = {
     const languageNames = new Intl.DisplayNames(['en'], {
       type: 'language'
     });
-    return html`<div>
-      Set to <strong>${languageNames.of(action.language)}</strong>
-    </div>`;
+    const name = languageNames.of(action.language) || action.language;
+    return renderClamped(
+      html`Set to <strong>${name}</strong>`,
+      `Set to ${name}`
+    );
   },
   form: {
     language: {

package/src/flow/actions/set_contact_name.ts

@@ -1,13 +1,17 @@
 import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactName } from '../../store/flow-definition';
+import { renderClamped } from '../utils';
 
 export const set_contact_name: ActionConfig = {
   name: 'Update Name',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactName) => {
-    return html`<div>Set to <strong>${action.name}</strong></div>`;
+    return renderClamped(
+      html`Set to <strong>${action.name}</strong>`,
+      `Set to ${action.name}`
+    );
   },
   form: {
     name: {

package/src/flow/actions/set_contact_status.ts

@@ -2,13 +2,17 @@ import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetContactStatus } from '../../store/flow-definition';
 import { titleCase } from '../../utils';
+import { renderClamped } from '../utils';
 
 export const set_contact_status: ActionConfig = {
   name: 'Update Status',
   group: ACTION_GROUPS.contacts,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetContactStatus) => {
-    return html`<div>Set to <strong>${titleCase(action.status)}</strong></div>`;
+    return renderClamped(
+      html`Set to <strong>${titleCase(action.status)}</strong>`,
+      `Set to ${titleCase(action.status)}`
+    );
   },
   toFormData: (action: SetContactStatus) => {
     return {

package/src/flow/actions/set_run_result.ts

@@ -2,15 +2,18 @@ import { html } from 'lit-html';
 import { ActionConfig, ACTION_GROUPS, FormData, FlowTypes } from '../types';
 import { Node, SetRunResult } from '../../store/flow-definition';
 import { getStore } from '../../store/Store';
+import { renderClamped } from '../utils';
 
 export const set_run_result: ActionConfig = {
   name: 'Save Flow Result',
   group: ACTION_GROUPS.save,
   flowTypes: [FlowTypes.VOICE, FlowTypes.MESSAGE, FlowTypes.BACKGROUND],
   render: (_node: Node, action: SetRunResult) => {
-    return html`<div>
-      Save <strong>${action.value}</strong> as <strong>${action.name}</strong>
-    </div>`;
+    return renderClamped(
+      html`Save <strong>${action.value}</strong> as
+        <strong>${action.name}</strong>`,
+      `Save ${action.value} as ${action.name}`
+    );
   },
   form: {
     name: {

package/src/flow/actions/start_session.ts

@@ -7,7 +7,7 @@ import {
   FlowTypes
 } from '../types';
 import { Node, StartSession } from '../../store/flow-definition';
-import { renderNamedObjects } from '../utils';
+import { renderNamedObjects, renderFlowLinks } from '../utils';
 
 export const start_session: ActionConfig = {
   name: 'Start Flow',
@@ -43,7 +43,7 @@ export const start_session: ActionConfig = {
           ${recipientsDisplay}
         </div>
         <div style="padding: 0px 10px;">
-          ${renderNamedObjects([action.flow], 'flow')}
+          ${renderFlowLinks([action.flow], 'flow')}
         </div>
       </div>
     `;

package/src/flow/nodes/split_by_llm.ts

@@ -12,6 +12,7 @@ import {
   categoriesToLocalizationFormData,
   localizationFormDataToCategories
 } from './shared';
+import { renderClamped } from '../utils';
 
 export const split_by_llm: NodeConfig = {
   type: 'split_by_llm',
@@ -24,12 +25,11 @@ export const split_by_llm: NodeConfig = {
     const callLlmAction = node.actions?.find(
       (action) => action.type === 'call_llm'
     ) as CallLLM;
+    const instructions =
+      callLlmAction?.instructions || 'Configure AI instructions';
     return html`
-      <div
-        class="body"
-        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; max-width: 180px; max-height: 6.2em; margin-bottom:10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;"
-      >
-        ${callLlmAction?.instructions || 'Configure AI instructions'}
+      <div class="body" style="margin-bottom:10px;">
+        ${renderClamped(instructions, instructions)}
       </div>
     `;
   },

package/src/flow/nodes/split_by_resthook.ts

@@ -7,6 +7,7 @@ import {
   categoriesToLocalizationFormData,
   localizationFormDataToCategories
 } from './shared';
+import { renderClamped } from '../utils';
 
 export const split_by_resthook: NodeConfig = {
   type: 'split_by_resthook',
@@ -47,14 +48,8 @@ export const split_by_resthook: NodeConfig = {
     const callResthookAction = node.actions?.find(
       (action) => action.type === 'call_resthook'
     ) as CallResthook;
-    return html`
-      <div
-        class="body"
-        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-      >
-        ${callResthookAction?.resthook || 'Configure resthook'}
-      </div>
-    `;
+    const resthook = callResthookAction?.resthook || 'Configure resthook';
+    return html` <div class="body">${renderClamped(resthook, resthook)}</div> `;
   },
   toFormData: (node: Node) => {
     // extract data from the existing node structure

package/src/flow/nodes/split_by_subflow.ts

@@ -2,7 +2,7 @@ import { ACTION_GROUPS, FormData, NodeConfig, FlowTypes } from '../types';
 import { Node } from '../../store/flow-definition';
 import { generateUUID } from '../../utils';
 import { html } from 'lit';
-import { renderNamedObjects } from '../utils';
+import { renderFlowLinks } from '../utils';
 import {
   categoriesToLocalizationFormData,
   localizationFormDataToCategories
@@ -33,7 +33,7 @@ export const split_by_subflow: NodeConfig = {
     ) as any;
     return html`
       <div class="body">
-        ${renderNamedObjects([enterFlowAction?.flow], 'flow')}
+        ${enterFlowAction?.flow ? renderFlowLinks([enterFlowAction.flow], 'flow') : null}
       </div>
     `;
   },

package/src/flow/nodes/split_by_webhook.ts

@@ -6,6 +6,7 @@ import {
   categoriesToLocalizationFormData,
   localizationFormDataToCategories
 } from './shared';
+import { renderClamped } from '../utils';
 
 const defaultPost = `@(json(object(
   "contact", object(
@@ -91,48 +92,39 @@ export const split_by_webhook: NodeConfig = {
     }
   },
   layout: [
-    // Row with method and URL side by side
     { type: 'row', items: ['method', 'url'] },
-    // Advanced group with nested layouts
     {
-      type: 'group',
-      label: 'Headers',
-      items: ['headers'],
-      collapsible: true,
-      collapsed: true,
-      helpText: 'Configure authentication or custom headers',
-      getGroupValueCount: (formData: FormData) => {
-        return formData.headers?.length || 0;
-      }
-    },
-    {
-      type: 'group',
-      label: 'Body',
-      items: ['body'],
-      collapsible: true,
-      collapsed: true,
-      helpText: 'Configure the request payload',
-      getGroupValueCount: (formData: FormData) => {
-        return !!(
-          formData.body &&
-          formData.body.trim() !== '' &&
-          formData.body !== defaultPost
-        );
-      }
+      type: 'accordion',
+      sections: [
+        {
+          label: 'Headers',
+          collapsed: true,
+          getValueCount: (formData: FormData) => {
+            return formData.headers?.length || 0;
+          },
+          items: ['headers']
+        },
+        {
+          label: 'Body',
+          collapsed: true,
+          getValueCount: (formData: FormData) => {
+            return !!(
+              formData.body &&
+              formData.body.trim() !== '' &&
+              formData.body !== defaultPost
+            );
+          },
+          items: ['body']
+        }
+      ]
     }
   ],
   render: (node: Node) => {
     const callWebhookAction = node.actions?.find(
       (action) => action.type === 'call_webhook'
     ) as CallWebhook;
-    return html`
-      <div
-        class="body"
-        style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
-      >
-        ${callWebhookAction?.url || 'Configure webhook'}
-      </div>
-    `;
+    const url = callWebhookAction?.url || 'Configure webhook';
+    return html` <div class="body">${renderClamped(url, url)}</div> `;
   },
   toFormData: (node: Node) => {
     // Extract data from the existing node structure

package/src/flow/nodes/wait_for_response.ts

@@ -82,6 +82,7 @@ export const wait_for_response: NodeConfig = {
   name: 'Wait for Response',
   group: SPLIT_GROUPS.wait,
   flowTypes: [FlowTypes.MESSAGE],
+  hideFromSplits: true,
   dialogSize: 'large',
   form: {
     rules: createRulesArrayConfig(

package/src/flow/types.ts

@@ -104,6 +104,7 @@ export interface NodeConfig extends FormConfig {
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
   showAsAction?: boolean; // if true, show in action dialog instead of splits (default: false - nodes show in splits)
+  hideFromSplits?: boolean; // if true, don't show in split dialog (e.g. promoted to context menu)
   flowTypes?: FlowType[]; // which flow types this node is available for (defaults to all if not specified)
   features?: Feature[]; // which features are required for this node (all must be present)
   router?: {
@@ -261,6 +262,11 @@ export interface MediaFieldConfig extends BaseFieldConfig {
   endpoint?: string; // upload endpoint, defaults to DEFAULT_MEDIA_ENDPOINT
 }
 
+export interface TemplateEditorFieldConfig extends BaseFieldConfig {
+  type: 'template-editor';
+  endpoint?: string; // endpoint for fetching templates
+}
+
 export type FieldConfig =
   | TextFieldConfig
   | TextareaFieldConfig
@@ -269,7 +275,8 @@ export type FieldConfig =
   | ArrayFieldConfig
   | CheckboxFieldConfig
   | MessageEditorFieldConfig
-  | MediaFieldConfig;
+  | MediaFieldConfig
+  | TemplateEditorFieldConfig;
 
 // Layout configurations for better form organization
 // Recursive layout system - any layout item can contain other layout items
@@ -297,7 +304,9 @@ export interface GroupLayoutConfig {
   collapsed?: boolean | ((formData: FormData) => boolean); // initial state if collapsible - can be a function
   helpText?: string;
   contentPadding?: string; // CSS padding for group content area
-  getGroupValueCount?: (formData: FormData) => number; // optional function to get count for bubble display
+  bordered?: boolean; // whether to show border around the group (default: true)
+  reveal?: boolean; // one-way expand: once clicked, header disappears and items show directly
+  getGroupValueCount?: (formData: FormData) => number | boolean; // optional function to get count for bubble display
 }
 
 export interface SpacerLayoutConfig {
@@ -309,10 +318,24 @@ export interface TextLayoutConfig {
   text: string;
 }
 
+export interface AccordionSection {
+  label: string;
+  items: LayoutItem[];
+  collapsed?: boolean | ((formData: FormData) => boolean);
+  getValueCount?: (formData: FormData) => number | boolean;
+}
+
+export interface AccordionLayoutConfig {
+  type: 'accordion';
+  sections: AccordionSection[];
+  multi?: boolean; // allow multiple sections open at once (default: false)
+}
+
 export type LayoutItem =
   | FieldItemConfig
   | RowLayoutConfig
   | GroupLayoutConfig
+  | AccordionLayoutConfig
   | SpacerLayoutConfig
   | TextLayoutConfig
   | string; // string is shorthand for field

package/src/flow/utils.ts

@@ -1,6 +1,7 @@
-import { html } from 'lit-html';
+import { html, TemplateResult } from 'lit-html';
 import { NamedObject, FlowPosition } from '../store/flow-definition';
 import { FlowIssue } from '../store/AppState';
+import { CustomEventType } from '../interfaces';
 
 const IS_MAC =
   typeof navigator !== 'undefined' &&
@@ -32,6 +33,23 @@ export function snapToGrid(value: number): number {
   return Math.max(snapped, 0);
 }
 
+/**
+ * Renders content clamped to a maximum number of lines with ellipsis.
+ * Hovering shows the full text in a tooltip.
+ */
+export const renderClamped = (
+  content: TemplateResult | string,
+  titleText: string,
+  maxLines: number = 3
+) => {
+  return html`<div
+    style="display: -webkit-box; -webkit-line-clamp: ${maxLines}; -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
+    title="${titleText}"
+  >
+    ${content}
+  </div>`;
+};
+
 /**
  * Renders a single line item with optional icon
  */
@@ -42,6 +60,7 @@ export const renderLineItem = (name: string, icon?: string) => {
       : null}
     <div
       style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;"
+      title="${name}"
     >
       ${name}
     </div>
@@ -91,6 +110,67 @@ export const renderStringList = (items: string[], icon?: string) => {
   return itemElements;
 };
 
+/**
+ * Renders a single flow as a clickable link that fires a temba-flow-clicked event
+ */
+const renderFlowLink = (flow: NamedObject, icon?: string) => {
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    const target = e.currentTarget as HTMLElement;
+    const editor = target.closest('temba-flow-editor') as any;
+    if (editor) {
+      editor.fireCustomEvent(CustomEventType.FlowClicked, {
+        uuid: flow.uuid,
+        name: flow.name,
+        metaKey: e.metaKey,
+        ctrlKey: e.ctrlKey
+      });
+    }
+  };
+
+  return html`<div class="linked-name" style="display:flex;items-align:center;">
+    ${icon
+      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
+      : null}
+    <div
+      @click=${handleClick}
+      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; text-decoration: underline; cursor: pointer;"
+    >
+      ${flow.name}
+    </div>
+  </div>`;
+};
+
+/**
+ * Renders a list of flows as clickable links, showing up to 3 items
+ * with a "+X more" indicator if there are more items
+ */
+export const renderFlowLinks = (flows: NamedObject[], icon?: string) => {
+  const itemElements = [];
+  const maxDisplay = 3;
+
+  const displayCount =
+    flows.length === 4 ? 4 : Math.min(maxDisplay, flows.length);
+
+  for (let i = 0; i < displayCount; i++) {
+    itemElements.push(renderFlowLink(flows[i], icon));
+  }
+
+  if (flows.length > maxDisplay && flows.length !== 4) {
+    const remainingCount = flows.length - maxDisplay;
+    itemElements.push(html`<div
+      style="display:flex;items-align:center;margin-top:0.2em;"
+    >
+      ${icon
+        ? html`<div style="margin-right:0.4em; width: 1em;"></div>`
+        : null}
+      <div style="font-size:0.8em">+${remainingCount} more</div>
+    </div>`);
+  }
+  return itemElements;
+};
+
 export interface Scheme {
   scheme: string;
   name: string;