@nyaruka/temba-components 0.131.1 → 0.131.3

package/src/flow/types.ts

@@ -1,11 +1,32 @@
 import { TemplateResult } from 'lit-html';
-import { Action, Node } from '../store/flow-definition';
+import { Action, Node, NodeUI } from '../store/flow-definition';
 
 export interface ValidationResult {
   valid: boolean;
   errors: { [key: string]: string };
 }
 
+/**
+ * Flow types - defines the type of flow being edited
+ */
+export const FlowTypes = {
+  MESSAGE: 'message',
+  VOICE: 'voice',
+  BACKGROUND: 'background'
+} as const;
+
+export type FlowType = (typeof FlowTypes)[keyof typeof FlowTypes];
+
+/**
+ * Features - defines the features available in the account
+ */
+export const Features = {
+  AI: 'ai',
+  AIRTIME: 'airtime'
+} as const;
+
+export type Feature = (typeof Features)[keyof typeof Features];
+
 // Component attribute interfaces - these define what's allowed for each component type
 export interface TextInputAttributes {
   type?: 'text' | 'email' | 'number' | 'url' | 'tel';
@@ -78,9 +99,12 @@ export interface FormConfig {
 export interface NodeConfig extends FormConfig {
   type: string;
   name?: string;
-  color?: string;
+  group?: ActionGroup | SplitGroup; // Nodes can use either when showAsAction is true
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   action?: ActionConfig;
+  showAsAction?: boolean; // if true, show in action dialog instead of splits (default: false - nodes show in splits)
+  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?: {
     type: 'switch' | 'random';
     defaultCategory?: string;
@@ -98,9 +122,22 @@ export interface NodeConfig extends FormConfig {
     }[];
   };
 
-  toFormData?: (node: Node) => FormData;
+  toFormData?: (node: Node, nodeUI?: any) => FormData;
   fromFormData?: (formData: FormData, originalNode: Node) => Node;
-  render?: (node: Node) => TemplateResult;
+  toUIConfig?: (formData: FormData) => Record<string, any>;
+  render?: (node: Node, nodeUI?: any) => TemplateResult;
+  renderTitle?: (node: Node, nodeUI?: NodeUI) => TemplateResult;
+
+  // Localization support for router categories
+  localizable?: 'categories'; // Only categories are localizable for routers
+  toLocalizationFormData?: (
+    node: Node,
+    localization: Record<string, any>
+  ) => FormData;
+  fromLocalizationFormData?: (
+    formData: FormData,
+    node: Node
+  ) => Record<string, any>;
 }
 
 // New field configuration system for generic form generation
@@ -130,6 +167,11 @@ export interface BaseFieldConfig {
     visible?: (formData: Record<string, any>) => boolean;
     disabled?: (formData: Record<string, any>) => boolean;
   };
+
+  // Optional field with reveal link
+  // When set, the field is hidden by default and a link with this text is shown
+  // Clicking the link reveals the field permanently (can't be hidden again)
+  optionalLink?: string;
 }
 
 export interface TextFieldConfig extends BaseFieldConfig {
@@ -231,6 +273,8 @@ export interface RowLayoutConfig {
   type: 'row';
   items: LayoutItem[]; // can contain fields, groups, or other rows
   gap?: string; // CSS gap value, defaults to '1rem'
+  label?: string; // optional label for the entire row
+  helpText?: string; // optional help text for the entire row
 }
 
 export interface GroupLayoutConfig {
@@ -238,9 +282,9 @@ export interface GroupLayoutConfig {
   label: string;
   items: LayoutItem[]; // can contain fields, rows, or other groups
   collapsible?: boolean;
-  collapsed?: boolean | ((formData: any) => boolean); // initial state if collapsible - can be a function
+  collapsed?: boolean | ((formData: FormData) => boolean); // initial state if collapsible - can be a function
   helpText?: string;
-  getGroupValueCount?: (formData: any) => number; // optional function to get count for bubble display
+  getGroupValueCount?: (formData: FormData) => number; // optional function to get count for bubble display
 }
 
 export type LayoutItem =
@@ -249,31 +293,120 @@ export type LayoutItem =
   | GroupLayoutConfig
   | string; // string is shorthand for field
 
+/**
+ * Action group constants - single source of truth for action categorization
+ * Use as const for compile-time type checking
+ */
+export const ACTION_GROUPS = {
+  send: 'send',
+  contacts: 'contacts',
+  save: 'save',
+  services: 'services',
+  broadcast: 'broadcast',
+  trigger: 'trigger'
+} as const;
+
+/**
+ * Split group constants - single source of truth for split categorization
+ * Use as const for compile-time type checking
+ */
+export const SPLIT_GROUPS = {
+  wait: 'wait',
+  split: 'split'
+} as const;
+
+// Extract types from const objects for compile-time checking
+export type ActionGroup = (typeof ACTION_GROUPS)[keyof typeof ACTION_GROUPS];
+export type SplitGroup = (typeof SPLIT_GROUPS)[keyof typeof SPLIT_GROUPS];
+
+/**
+ * Metadata for group display
+ */
+export interface GroupMetadata {
+  color: string;
+  title: string;
+  description: string;
+}
+
+/**
+ * Action group metadata - defines display properties for each action group
+ * Order in this object determines display order in action selector (top to bottom)
+ */
+export const ACTION_GROUP_METADATA: Record<ActionGroup, GroupMetadata> = {
+  [ACTION_GROUPS.send]: {
+    color: '#3498db',
+    title: 'Send',
+    description: 'Actions that send messages or content to contacts'
+  },
+  [ACTION_GROUPS.contacts]: {
+    color: '#01c1af',
+    title: 'Contact',
+    description: 'Actions that update contact information'
+  },
+  [ACTION_GROUPS.save]: {
+    color: '#1a777c',
+    title: 'Save',
+    description: 'Actions that save or store data'
+  },
+  [ACTION_GROUPS.services]: {
+    color: '#f79035ff',
+    title: 'Services',
+    description: 'Call external services and APIs'
+  },
+  [ACTION_GROUPS.broadcast]: {
+    color: '#8e5ea7',
+    title: 'Other People',
+    description: 'Actions that apply to others instead of the contact'
+  },
+  [ACTION_GROUPS.trigger]: {
+    color: '#df419f',
+    title: 'Trigger',
+    description: 'Actions that trigger other behavior'
+  }
+};
+
+/**
+ * Split group metadata - defines display properties for each split group
+ * Order in this object determines display order in split selector (top to bottom)
+ */
+export const SPLIT_GROUP_METADATA: Record<SplitGroup, GroupMetadata> = {
+  [SPLIT_GROUPS.wait]: {
+    color: '#4d7dad',
+    title: 'Wait',
+    description: 'Wait for user and split on their response'
+  },
+  [SPLIT_GROUPS.split]: {
+    color: '#aaaaaa',
+    title: 'Split',
+    description: 'Split the flow based on conditions'
+  }
+};
+
 export interface ActionConfig extends FormConfig {
   name: string;
-  color: string;
+  group: ActionGroup;
   dialogSize?: 'small' | 'medium' | 'large' | 'xlarge';
   evaluated?: string[];
+  hideFromActions?: boolean; // if true, don't show in action dialog (default: false - actions show in actions)
+  flowTypes?: FlowType[]; // which flow types this action is available for (defaults to all if not specified)
+  features?: Feature[]; // which features are required for this action (all must be present)
   render?: (node: any, action: any) => TemplateResult;
 
   form?: Record<string, FieldConfig>;
   layout?: LayoutItem[]; // optional layout configuration - array of layout items
   gutter?: LayoutItem[]; // fields to render in the dialog gutter (left side of buttons)
 
-  toFormData?: (action: Action) => any;
-  fromFormData?: (formData: any) => Action;
-}
+  toFormData?: (action: Action) => FormData;
+  fromFormData?: (formData: FormData) => Action;
 
-export const COLORS = {
-  send: '#3498db',
-  update: '#01c1af',
-  broadcast: '#8e5ea7',
-  call: '#e68628',
-  create: '#df419f',
-  save: '#1a777c',
-  split: '#aaaaaa',
-  execute: '#666666',
-  wait: '#4d7dad',
-  add: '#309c42',
-  remove: '#e74c3c'
-};
+  // Localization support
+  localizable?: string[]; // array of field names that can be localized
+  toLocalizationFormData?: (
+    action: Action,
+    localization: Record<string, any>
+  ) => FormData;
+  fromLocalizationFormData?: (
+    formData: FormData,
+    action: Action
+  ) => Record<string, any>;
+}

package/src/flow/utils.ts

@@ -60,17 +60,111 @@ export const renderStringList = (items: string[], icon?: string) => {
   return itemElements;
 };
 
-// URN scheme mapping for user-friendly display
-export const urnSchemeMap: Record<string, string> = {
-  tel: 'Phone Number',
-  email: 'Email',
-  twitter: 'Twitter',
-  facebook: 'Facebook',
-  telegram: 'Telegram',
-  whatsapp: 'WhatsApp',
-  viber: 'Viber',
-  line: 'Line',
-  discord: 'Discord',
-  slack: 'Slack',
-  external: 'External ID'
-};
+export interface Scheme {
+  scheme: string;
+  name: string;
+  path: string;
+  excludeFromSplit?: boolean;
+}
+
+export const SCHEMES: Scheme[] = [
+  {
+    scheme: 'tel',
+    name: 'SMS',
+    path: 'Phone Number'
+  },
+  {
+    scheme: 'whatsapp',
+    name: 'WhatsApp',
+    path: 'WhatsApp Number'
+  },
+  {
+    scheme: 'facebook',
+    name: 'Facebook',
+    path: 'Facebook ID'
+  },
+  {
+    scheme: 'instagram',
+    name: 'Instagram',
+    path: 'Instagram ID'
+  },
+  {
+    scheme: 'twitterid',
+    name: 'Twitter',
+    path: 'Twitter ID',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'telegram',
+    name: 'Telegram',
+    path: 'Telegram ID'
+  },
+  {
+    scheme: 'viber',
+    name: 'Viber',
+    path: 'Viber ID'
+  },
+  {
+    scheme: 'line',
+    name: 'Line',
+    path: 'Line ID'
+  },
+  {
+    scheme: 'wechat',
+    name: 'WeChat',
+    path: 'WeChat ID'
+  },
+  {
+    scheme: 'fcm',
+    name: 'Firebase',
+    path: 'Firebase ID'
+  },
+  {
+    scheme: 'jiochat',
+    name: 'JioChat',
+    path: 'JioChat ID'
+  },
+  {
+    scheme: 'freshchat',
+    name: 'Freshchat',
+    path: 'Freshchat ID'
+  },
+  {
+    scheme: 'mailto',
+    name: 'Email',
+    path: 'Email Address',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'twitter',
+    name: 'Twitter',
+    path: 'Twitter Handle',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'vk',
+    name: 'VK',
+    path: 'VK ID'
+  },
+  {
+    scheme: 'discord',
+    name: 'Discord',
+    path: 'Discord ID'
+  },
+  {
+    scheme: 'webchat',
+    name: 'Webchat',
+    path: 'Webchat ID',
+    excludeFromSplit: true
+  },
+  {
+    scheme: 'rocketchat',
+    name: 'RocketChat',
+    path: 'RocketChat ID'
+  },
+  {
+    scheme: 'ext',
+    name: 'External',
+    path: 'External ID'
+  }
+];

package/src/form/FieldRenderer.ts

@@ -1,4 +1,5 @@
 import { html, TemplateResult } from 'lit';
+import { spread } from '@open-wc/lit-helpers';
 import {
   FieldConfig,
   TextFieldConfig,
@@ -245,10 +246,7 @@ export class FieldRenderer {
             value="${option}"
           ></temba-option>`;
         } else {
-          return html`<temba-option
-            name="${option.label || option.name}"
-            value="${option.value}"
-          ></temba-option>`;
+          return html`<temba-option ${spread(option)}></temba-option>`;
         }
       })}
     </temba-select>`;

package/src/interfaces.ts

@@ -278,6 +278,8 @@ export enum CustomEventType {
   OrderChanged = 'temba-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
+  DragExternal = 'temba-drag-external',
+  DragInternal = 'temba-drag-internal',
   Resized = 'temba-resized',
   DetailsChanged = 'temba-details-changed',
   Error = 'temba-error',
@@ -288,6 +290,7 @@ export enum CustomEventType {
   DateRangeChanged = 'temba-date-range-changed',
   NodeDeleted = 'temba-node-deleted',
   ActionEditRequested = 'temba-action-edit-requested',
+  AddActionRequested = 'temba-add-action-requested',
   ActionSaved = 'temba-action-saved',
   ActionEditCanceled = 'temba-action-edit-canceled',
   NodeEditRequested = 'temba-node-edit-requested',