@nyaruka/temba-components 0.129.9 → 0.129.11

package/src/live/ContactChat.ts

@@ -22,11 +22,12 @@ import {
   AirtimeTransferredEvent,
   CallEvent,
   ChannelEvent,
+  ChatStartedEvent,
   ContactEvent,
   ContactGroupsEvent,
   ContactHistoryPage,
   ContactLanguageChangedEvent,
-  FlowEvent,
+  ContactStatusChangedEvent,
   MsgEvent,
   NameChangedEvent,
   OptInEvent,
@@ -51,36 +52,36 @@ export const BODY_SNIPPET_LENGTH = 250;
 */
 
 export enum Events {
-  MESSAGE_CREATED = 'msg_created',
-  MESSAGE_RECEIVED = 'msg_received',
+  AIRTIME_TRANSFERRED = 'airtime_transferred',
   BROADCAST_CREATED = 'broadcast_created',
-  IVR_CREATED = 'ivr_created',
   CALL_CREATED = 'call_created',
+  CALL_MISSED = 'call_missed',
   CALL_RECEIVED = 'call_received',
+  CHAT_STARTED = 'chat_started',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
+  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
+  CONTACT_STATUS_CHANGED = 'contact_status_changed',
   CONTACT_URNS_CHANGED = 'contact_urns_changed',
-  CHANNEL_EVENT = 'channel_event',
-  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
-  AIRTIME_TRANSFERRED = 'airtime_transferred',
+  IVR_CREATED = 'ivr_created',
+  MSG_CREATED = 'msg_created',
+  MSG_RECEIVED = 'msg_received',
   NOTE_CREATED = 'note_created',
+  OPTIN_REQUESTED = 'optin_requested',
+  OPTIN_STARTED = 'optin_started',
+  OPTIN_STOPPED = 'optin_stopped',
+  RUN_ENDED = 'run_ended',
+  RUN_STARTED = 'run_started',
   TICKET_ASSIGNED = 'ticket_assigned',
-  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_CLOSED = 'ticket_closed',
+  TICKET_NOTE_ADDED = 'ticket_note_added',
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
-  OPTIN_STARTED = 'optin_started',
-  OPTIN_STOPPED = 'optin_stopped',
-  OPTIN_REQUESTED = 'optin_requested',
-  RUN_STARTED = 'run_started',
-  RUN_ENDED = 'run_ended',
 
   // deprecated
-  CALL_STARTED = 'call_started',
-  FLOW_ENTERED = 'flow_entered',
-  FLOW_EXITED = 'flow_exited'
+  CHANNEL_EVENT = 'channel_event'
 }
 
 const renderInfoList = (singular: string, plural: string, items: any[]) => {
@@ -98,43 +99,13 @@ const renderInfoList = (singular: string, plural: string, items: any[]) => {
 };
 
 const renderChannelEvent = (event: ChannelEvent): string => {
-  if (event.event.type === 'mt_miss') {
-    return 'Missed outgoing call';
-  } else if (event.event.type === 'mo_miss') {
-    return 'Missed incoming call';
-  } else if (event.event.type === 'new_conversation') {
-    return 'Started conversation';
-  } else if (event.channel_event_type === 'welcome_message') {
-    return 'Welcome Message Sent';
-  } else if (event.event.type === 'referral') {
-    return 'Referred';
-  } else if (event.event.type === 'follow') {
-    return 'Followed';
+  if (event.channel_event_type === 'welcome_message') {
+    return 'Welcome message sent';
   } else if (event.event.type === 'stop_contact') {
     return 'Stopped';
-  } else if (event.event.type === 'mt_call') {
-    return 'Outgoing Phone Call'; // deprecated
-  } else if (event.event.type == 'mo_call') {
-    return 'Incoming Phone call'; // deprecated
-  } else if (event.event.type == 'optin') {
-    return `Opted in to **${event.event.optin?.name}**`; // deprecated
-  } else if (event.event.type == 'optout') {
-    return `Opted out of **${event.event.optin?.name}**`; // deprecated
   }
 };
 
-const renderFlowEvent = (event: FlowEvent): string => {
-  let verb = 'Interrupted';
-  if (event.status !== 'I') {
-    if (event.type === Events.FLOW_ENTERED) {
-      verb = 'Started';
-    } else {
-      verb = 'Completed';
-    }
-  }
-  return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
-};
-
 const renderRunEvent = (event: RunEvent): string => {
   let verb = 'Started';
   if (event.type === Events.RUN_ENDED) {
@@ -150,6 +121,14 @@ const renderRunEvent = (event: RunEvent): string => {
   return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
 };
 
+const renderChatStartedEvent = (event: ChatStartedEvent): string => {
+  if (event.params) {
+    return `Chat referral`;
+  } else {
+    return `Chat started`;
+  }
+};
+
 const renderUpdateEvent = (event: UpdateFieldEvent): string => {
   return event.value
     ? `Updated **${event.field.name}** to **${event.value.text}**`
@@ -225,17 +204,25 @@ export const renderContactLanguageChangedEvent = (
   return `Language updated to **${event.language}**`;
 };
 
+export const renderContactStatusChangedEvent = (
+  event: ContactStatusChangedEvent
+): string => {
+  return `Status updated to **${event.status}**`;
+};
+
 export const renderCallEvent = (event: CallEvent): string => {
   if (event.type === Events.CALL_CREATED) {
-    return `Call Started`;
+    return `Call started`;
+  } else if (event.type === Events.CALL_MISSED) {
+    return `Call missed`;
   } else if (event.type === Events.CALL_RECEIVED) {
-    return `Call Answered`;
+    return `Call answered`;
   }
 };
 
 export const renderOptInEvent = (event: OptInEvent): string => {
   if (event.type === Events.OPTIN_REQUESTED) {
-    return `Requested opt-in for ${event.optin.name}`;
+    return `Requested opt-in for **${event.optin.name}**`;
   } else if (event.type === Events.OPTIN_STARTED) {
     return `Opted in to **${event.optin.name}**`;
   } else if (event.type === Events.OPTIN_STOPPED) {
@@ -635,113 +622,115 @@ export class ContactChat extends ContactStoreElement {
   public getEventMessage(event: ContactEvent): ChatEvent {
     let message = null;
     switch (event.type) {
-      case Events.TICKET_OPENED:
+      case Events.AIRTIME_TRANSFERRED:
         message = {
           type: MessageType.Inline,
-          text: renderTicketAction(event as TicketEvent, 'opened')
+          text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
         };
         break;
-      case Events.TICKET_ASSIGNED:
+      case Events.CALL_CREATED:
+      case Events.CALL_MISSED:
+      case Events.CALL_RECEIVED:
         message = {
           type: MessageType.Inline,
-          text: renderTicketAssigned(event as TicketEvent)
+          text: renderCallEvent(event as CallEvent)
         };
         break;
-      case Events.TICKET_REOPENED:
+      case Events.CHAT_STARTED:
         message = {
           type: MessageType.Inline,
-          text: renderTicketAction(event as TicketEvent, 'reopened')
+          text: renderChatStartedEvent(event as ChatStartedEvent)
         };
         break;
-      case Events.TICKET_CLOSED:
+      case Events.CONTACT_FIELD_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderTicketAction(event as TicketEvent, 'closed')
+          text: renderUpdateEvent(event as UpdateFieldEvent)
         };
         break;
-      case Events.TICKET_TOPIC_CHANGED:
+      case Events.CONTACT_GROUPS_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: `Topic changed to **${(event as TicketEvent).topic.name}**`
+          text: renderContactGroupsEvent(event as ContactGroupsEvent)
         };
         break;
-      case Events.FLOW_ENTERED:
-      case Events.FLOW_EXITED:
+      case Events.CONTACT_LANGUAGE_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderFlowEvent(event as FlowEvent)
+          text: renderContactLanguageChangedEvent(
+            event as ContactLanguageChangedEvent
+          )
         };
         break;
-      case Events.RUN_STARTED:
-      case Events.RUN_ENDED:
+      case Events.CONTACT_NAME_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderRunEvent(event as RunEvent)
+          text: renderNameChanged(event as NameChangedEvent)
         };
         break;
-      case Events.CONTACT_FIELD_CHANGED:
+      case Events.CONTACT_STATUS_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderUpdateEvent(event as UpdateFieldEvent)
+          text: renderContactStatusChangedEvent(
+            event as ContactStatusChangedEvent
+          )
         };
         break;
-      case Events.CONTACT_NAME_CHANGED:
+      case Events.CONTACT_URNS_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderNameChanged(event as NameChangedEvent)
+          text: renderContactURNsChanged(event as URNsChangedEvent)
         };
         break;
-      case Events.CONTACT_URNS_CHANGED:
+      case Events.OPTIN_REQUESTED:
+      case Events.OPTIN_STARTED:
+      case Events.OPTIN_STOPPED:
         message = {
           type: MessageType.Inline,
-          text: renderContactURNsChanged(event as URNsChangedEvent)
+          text: renderOptInEvent(event as OptInEvent)
         };
         break;
-      case Events.CONTACT_GROUPS_CHANGED:
+      case Events.RUN_STARTED:
+      case Events.RUN_ENDED:
         message = {
           type: MessageType.Inline,
-          text: renderContactGroupsEvent(event as ContactGroupsEvent)
+          text: renderRunEvent(event as RunEvent)
         };
         break;
-      case Events.AIRTIME_TRANSFERRED:
+      case Events.TICKET_ASSIGNED:
         message = {
           type: MessageType.Inline,
-          text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
+          text: renderTicketAssigned(event as TicketEvent)
         };
         break;
-      case Events.CALL_CREATED:
-      case Events.CALL_RECEIVED:
+      case Events.TICKET_CLOSED:
         message = {
           type: MessageType.Inline,
-          text: renderCallEvent(event as CallEvent)
+          text: renderTicketAction(event as TicketEvent, 'closed')
         };
         break;
-      case Events.CALL_STARTED: // deprecated
+      case Events.TICKET_OPENED:
         message = {
           type: MessageType.Inline,
-          text: `Started Call`
+          text: renderTicketAction(event as TicketEvent, 'opened')
         };
         break;
-      case Events.CHANNEL_EVENT:
+      case Events.TICKET_REOPENED:
         message = {
           type: MessageType.Inline,
-          text: renderChannelEvent(event as ChannelEvent)
+          text: renderTicketAction(event as TicketEvent, 'reopened')
         };
         break;
-      case Events.CONTACT_LANGUAGE_CHANGED:
+      case Events.TICKET_TOPIC_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderContactLanguageChangedEvent(
-            event as ContactLanguageChangedEvent
-          )
+          text: `Topic changed to **${(event as TicketEvent).topic.name}**`
         };
         break;
-      case Events.OPTIN_REQUESTED:
-      case Events.OPTIN_STARTED:
-      case Events.OPTIN_STOPPED:
+      case Events.CHANNEL_EVENT: // deprecated
         message = {
           type: MessageType.Inline,
-          text: renderOptInEvent(event as OptInEvent)
+          text: renderChannelEvent(event as ChannelEvent)
         };
         break;
     }

package/src/live/ContactFieldEditor.ts

@@ -1,12 +1,12 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../form/FormElement';
 import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { InputType, TextInput } from '../form/TextInput';
 import { Icon } from '../Icons';
 import { getClasses, WebResponse } from '../utils';
 import { Select } from '../form/select/Select';
+import { FieldElement } from '../form/FieldElement';
 
 enum Status {
   Success = 'success',
@@ -380,7 +380,7 @@ export class ContactFieldEditor extends RapidElement {
   public handleSubmit() {
     const input = this.shadowRoot.querySelector(
       'temba-textinput, temba-datepicker'
-    ) as FormElement;
+    ) as FieldElement;
 
     if (input.value !== this.value) {
       this.dirty = true;

package/src/store/flow-definition.d.ts

@@ -175,7 +175,8 @@ export interface CallLLM extends Action {
   llm: NamedObject;
   instructions: string;
   input: string;
-  result_name: string;
+  result_name?: string;
+  output_local?: string;
 }
 
 export interface OpenTicket extends Action {

package/src/utils.ts

@@ -932,3 +932,195 @@ export const getMiddle = (a: DOMRect, b: DOMRect) => {
 
 // Export the UUID function from the uuid package
 export { generateUUID };
+
+// Helper types for router creation
+export interface RouterCategory {
+  uuid: string;
+  name: string;
+  exit_uuid: string;
+}
+
+export interface RouterExit {
+  uuid: string;
+  destination_uuid: string | null;
+}
+
+export interface RouterCase {
+  uuid: string;
+  type: string;
+  arguments: string[];
+  category_uuid: string;
+}
+
+export interface CreateCategoryParams {
+  name: string;
+  existingCategories: any[];
+  existingExits: any[];
+  existingCases?: any[];
+  caseConfig?: {
+    type: string;
+    arguments: string[];
+  };
+}
+
+// Helper function to create or preserve a category with its exit and case
+export const createOrPreserveCategory = (
+  params: CreateCategoryParams
+): {
+  category: RouterCategory;
+  exit: RouterExit;
+  case?: RouterCase;
+} => {
+  const { name, existingCategories, existingExits, existingCases, caseConfig } =
+    params;
+
+  // Find existing category
+  const existingCategory = existingCategories.find((cat) => cat.name === name);
+  const existingExit = existingCategory
+    ? existingExits.find((exit) => exit.uuid === existingCategory.exit_uuid)
+    : null;
+  const existingCase =
+    existingCategory && existingCases
+      ? existingCases.find(
+          (case_) => case_.category_uuid === existingCategory.uuid
+        )
+      : null;
+
+  // Use existing UUIDs or generate new ones
+  const categoryUuid = existingCategory?.uuid || generateUUID();
+  const exitUuid = existingExit?.uuid || generateUUID();
+  const caseUuid = existingCase?.uuid || generateUUID();
+
+  const category: RouterCategory = {
+    uuid: categoryUuid,
+    name: name,
+    exit_uuid: exitUuid
+  };
+
+  const exit: RouterExit = {
+    uuid: exitUuid,
+    destination_uuid: existingExit?.destination_uuid || null
+  };
+
+  const result: {
+    category: RouterCategory;
+    exit: RouterExit;
+    case?: RouterCase;
+  } = { category, exit };
+
+  if (caseConfig) {
+    result.case = {
+      uuid: caseUuid,
+      type: caseConfig.type,
+      arguments: caseConfig.arguments,
+      category_uuid: categoryUuid
+    };
+  }
+
+  return result;
+};
+
+// Helper function to create a complete router with standard Success/Failure categories
+export const createSuccessFailureRouter = (
+  operand: string,
+  successCaseConfig: { type: string; arguments: string[] },
+  existingCategories: any[] = [],
+  existingExits: any[] = [],
+  existingCases: any[] = []
+) => {
+  const success = createOrPreserveCategory({
+    name: 'Success',
+    existingCategories,
+    existingExits,
+    existingCases,
+    caseConfig: successCaseConfig
+  });
+
+  const failure = createOrPreserveCategory({
+    name: 'Failure',
+    existingCategories,
+    existingExits
+  });
+
+  return {
+    router: {
+      type: 'switch' as const,
+      categories: [success.category, failure.category],
+      default_category_uuid: failure.category.uuid,
+      operand: operand,
+      cases: success.case ? [success.case] : []
+    },
+    exits: [success.exit, failure.exit]
+  };
+};
+
+// Helper function to create a multi-category router with Other/Failure defaults
+export const createMultiCategoryRouter = (
+  operand: string,
+  userCategories: string[],
+  categoryToCaseMap: (categoryName: string) => {
+    type: string;
+    arguments: string[];
+  },
+  existingCategories: any[] = [],
+  existingExits: any[] = [],
+  existingCases: any[] = []
+) => {
+  const categories: RouterCategory[] = [];
+  const exits: RouterExit[] = [];
+  const cases: RouterCase[] = [];
+
+  // Add user categories
+  userCategories.forEach((categoryName) => {
+    const result = createOrPreserveCategory({
+      name: categoryName,
+      existingCategories,
+      existingExits,
+      existingCases,
+      caseConfig: categoryToCaseMap(categoryName)
+    });
+
+    categories.push(result.category);
+    exits.push(result.exit);
+    if (result.case) {
+      cases.push(result.case);
+    }
+  });
+
+  // Add "Other" category (default)
+  const other = createOrPreserveCategory({
+    name: 'Other',
+    existingCategories,
+    existingExits
+  });
+  categories.push(other.category);
+  exits.push(other.exit);
+
+  // Add "Failure" category
+  const failure = createOrPreserveCategory({
+    name: 'Failure',
+    existingCategories,
+    existingExits,
+    existingCases,
+    caseConfig: {
+      type: 'has_only_text',
+      arguments: ['<ERROR>']
+    }
+  });
+  categories.push(failure.category);
+  exits.push(failure.exit);
+  if (failure.case) {
+    cases.push(failure.case);
+  }
+
+  return {
+    router: {
+      type: 'switch' as const,
+      categories: categories,
+      default_category_uuid: other.category.uuid,
+      operand: operand,
+      cases: cases
+    },
+    exits: exits
+  };
+};

package/temba-modules.ts

@@ -6,7 +6,7 @@ import { Completion } from './src/form/Completion';
 import { Modax } from './src/layout/Modax';
 import { Dialog } from './src/layout/Dialog';
 import { Button } from './src/display/Button';
-import { FormField } from './src/form/FormField';
+import { FieldElement } from './src/form/FieldElement';
 import { Loading } from './src/display/Loading';
 import { CharCount } from './src/display/CharCount';
 import { Options } from './src/display/Options';
@@ -103,7 +103,8 @@ addCustomElement('temba-field-manager', FieldManager);
 addCustomElement('temba-urn', ContactUrn);
 addCustomElement('temba-content-menu', ContentMenu);
 
-addCustomElement('temba-field', FormField);
+// Note: FieldElement is a base class and not directly instantiated as a custom element
+export { FieldElement };
 addCustomElement('temba-dialog', Dialog);
 addCustomElement('temba-modax', Modax);
 addCustomElement('temba-charcount', CharCount);