@nyaruka/temba-components 0.129.10 → 0.130.0

package/src/form/ArrayEditor.ts

@@ -1,6 +1,6 @@
 import { html, css, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { FieldConfig, SelectFieldConfig } from '../flow/types';
+import { FieldConfig } from '../flow/types';
 import { BaseListEditor, ListItem } from './BaseListEditor';
 import { FieldRenderer } from './FieldRenderer';
 
@@ -116,12 +116,13 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
     }
 
     // For select fields, ensure we return the right type
-    if (config.type === 'select') {
+    /*if (config.type === 'select') {
+      console.log('computeFieldValue select', currentValue, config);
       const selectConfig = config as SelectFieldConfig;
       if (currentValue === undefined || currentValue === null) {
         return selectConfig.multi ? [] : '';
       }
-    }
+    }*/
 
     return currentValue;
   }
@@ -144,23 +145,8 @@ export class TembaArrayEditor extends BaseListEditor<ListItem> {
 
         // Handle different field types and their change events
         if (config.type === 'select') {
-          // For temba-select, extract the correct value
-          if (target.tagName === 'TEMBA-SELECT') {
-            if (target.multi || target.emails || target.tags) {
-              value = target.values || [];
-            } else {
-              // Single select: extract value from first selected option
-              const values = target.values || [];
-              value =
-                values.length > 0 && values[0]
-                  ? values[0].value !== undefined
-                    ? values[0].value
-                    : values[0]
-                  : '';
-            }
-          } else {
-            value = target.value;
-          }
+          // Use consistent temba-select value normalization
+          value = target.values;
         } else {
           // For other field types, use the target value directly
           value = target.value;

package/src/form/FieldRenderer.ts

@@ -207,73 +207,17 @@ export class FieldRenderer {
       style
     } = context;
 
-    // Ensure proper value handling for multi vs single select
-    const normalizedValue = (() => {
-      if (config.multi) {
-        // Multi-select: ensure we have an array and convert strings to option objects
-        const valueArray = Array.isArray(value) ? value : value ? [value] : [];
-        return valueArray.map((val) => {
-          if (typeof val === 'string') {
-            // Convert string values to option objects
-            return { name: val, value: val };
-          }
-          return val;
-        });
-      } else {
-        // Single select: use the value as-is
-        return value || '';
-      }
-    })();
-
-    if (typeof normalizedValue === 'string') {
-      return html`<temba-select
-        name="${fieldName}"
-        ?required="${config.required}"
-        .errors="${errors}"
-        value="${config.multi ? '' : normalizedValue}"
-        .values="${config.multi ? normalizedValue : undefined}"
-        ?multi="${config.multi}"
-        ?searchable="${config.searchable}"
-        ?tags="${config.tags}"
-        ?emails="${config.emails}"
-        ?clearable="${config.clearable || false}"
-        label="${showLabel ? config.label : ''}"
-        placeholder="${config.placeholder || ''}"
-        maxItems="${config.maxItems || 0}"
-        valueKey="${config.valueKey || 'value'}"
-        nameKey="${config.nameKey || 'name'}"
-        endpoint="${config.endpoint || ''}"
-        .helpText="${config.helpText || ''}"
-        flavor="${flavor || config.flavor || 'small'}"
-        class="${extraClasses}"
-        style="${style}"
-        .getName=${config.getName}
-        .createArbitraryOption=${config.createArbitraryOption}
-        ?allowCreate="${config.allowCreate || false}"
-        @change="${onChange || (() => {})}"
-      >
-        ${config.options?.map((option: any) => {
-          if (typeof option === 'string') {
-            return html`<temba-option
-              name="${option}"
-              value="${option}"
-            ></temba-option>`;
-          } else {
-            return html`<temba-option
-              name="${option.label || option.name}"
-              value="${option.value}"
-            ></temba-option>`;
-          }
-        })}
-      </temba-select>`;
-    }
+    // Get options - use dynamic options if available, otherwise use static options
+    const optionsToRender = config.getDynamicOptions
+      ? config.getDynamicOptions()
+      : config.options;
 
     return html`<temba-select
       name="${fieldName}"
       label="${showLabel ? config.label : ''}"
       ?required="${config.required}"
       .errors="${errors}"
-      .values="${normalizedValue}"
+      .values=${value}
       ?multi="${config.multi}"
       ?searchable="${config.searchable}"
       ?tags="${config.tags}"
@@ -293,7 +237,7 @@ export class FieldRenderer {
       ?allowCreate="${config.allowCreate || false}"
       @change="${onChange || (() => {})}"
     >
-      ${config.options?.map((option: any) => {
+      ${optionsToRender?.map((option: any) => {
         if (typeof option === 'string') {
           return html`<temba-option
             name="${option}"
@@ -445,9 +389,6 @@ export class FieldRenderer {
   }
 }
 
-/**
- * Context object for field rendering that provides additional options
- */
 export interface FieldRenderContext {
   /** Array of error messages for the field */
   errors?: string[];

package/src/form/select/Select.ts

@@ -592,6 +592,10 @@ export class Select<T extends SelectOption> extends FieldElement {
     this.prepareOptionsDefault = this.prepareOptionsDefault.bind(this);
     this.isMatchDefault = this.isMatchDefault.bind(this);
     this.handleOrderChanged = this.handleOrderChanged.bind(this);
+
+    this.createArbitraryOption = (
+      this.createArbitraryOption || this.createArbitraryOptionDefault
+    ).bind(this);
   }
 
   public prepareOptionsDefault(options: T[]): T[] {
@@ -701,17 +705,6 @@ export class Select<T extends SelectOption> extends FieldElement {
     );
   }
 
-  public async createOptionPost(payload: any) {
-    return postJSON(this.endpoint, payload).then((response) => {
-      if (response.status >= 200 && response.status < 300) {
-        return {
-          json: response.json,
-          payload
-        };
-      }
-    });
-  }
-
   public updated(changes: Map<string, any>) {
     super.updated(changes);
 
@@ -727,60 +720,8 @@ export class Select<T extends SelectOption> extends FieldElement {
 
     if (changes.has('values')) {
       this.updateInputs();
-
       if (this.hasChanges(changes.get('values'))) {
-        const materialized = [];
-
-        // see if we need to materialize anything
-        if (this.allowCreate) {
-          // arbitrary values need to be posted
-          const arbitraryValues = this.values.filter((value) => {
-            return (value as any).arbitrary;
-          });
-
-          for (const value of arbitraryValues) {
-            if ((value as any).arbitrary) {
-              materialized.push(this.createOptionPost(value));
-            }
-          }
-
-          // update our created values
-          Promise.all(materialized).then((responses) => {
-            for (const response of responses) {
-              if (response) {
-                // find the value that matches our payload
-                const original = arbitraryValues.find((value) => {
-                  return value === response.payload;
-                }) as any;
-
-                if (original) {
-                  // remove our arbitrary flag
-                  delete original.arbitrary;
-
-                  // add in the new values from our respones.json
-                  if (response.json) {
-                    for (const key in response.json) {
-                      original[key] = response.json[key];
-                    }
-                  }
-                }
-              }
-            }
-
-            // remove any arbitrary values
-            for (let i = this.values.length - 1; i >= 0; i--) {
-              if ((this.values[i] as any).arbitrary) {
-                this.values.splice(i, 1);
-              }
-            }
-
-            // reset our cache
-            this.cacheKey = new Date().getTime().toString();
-            this.fireEvent('change');
-          });
-        } else {
-          this.fireEvent('change');
-        }
+        this.fireEvent('change');
       }
     }
 
@@ -955,19 +896,31 @@ export class Select<T extends SelectOption> extends FieldElement {
     }
 
     const selected = event.detail.selected;
+
     // check if we should post it
-    if (selected.post && this.endpoint) {
+    if (selected.arbitrary && this.allowCreate && this.endpoint) {
+      this.resolving = true;
       postJSON(this.endpoint, selected).then((response) => {
         if (response.status >= 200 && response.status < 300) {
           this.setSelectedOption(response.json);
           this.lruCache = lru(20, 60000);
+          this.errors = [];
         } else {
-          // TODO: find a way to share inline errors
+          this.setSelectedOption(selected);
+          setTimeout(() => {
+            this.errors = [
+              'There was an error creating "' +
+                this.getNameInternal(selected) +
+                '"'
+            ];
+          }, 0);
           this.blur();
         }
+        this.resolving = false;
       });
     } else {
       this.setSelectedOption(selected);
+      this.errors = [];
     }
   }
 
@@ -1009,6 +962,21 @@ export class Select<T extends SelectOption> extends FieldElement {
   public handleRemoveSelection(selectionToRemove: any): void {
     this.removeValue(selectionToRemove);
     this.visibleOptions = [];
+    this.errors = [];
+
+    // if we allow create, double check our values
+    if (this.allowCreate) {
+      const arbitrary = this.values.find((v) => v.arbitrary);
+      if (arbitrary) {
+        setTimeout(() => {
+          this.errors = [
+            'There was an error creating "' +
+              this.getNameInternal(arbitrary) +
+              '"'
+          ];
+        }, 0);
+      }
+    }
   }
 
   private createArbitraryOptionDefault(input: string, _options: any[]): any {

package/src/live/ContactChat.ts

@@ -27,6 +27,7 @@ import {
   ContactGroupsEvent,
   ContactHistoryPage,
   ContactLanguageChangedEvent,
+  ContactStatusChangedEvent,
   MsgEvent,
   NameChangedEvent,
   OptInEvent,
@@ -61,6 +62,7 @@ export enum Events {
   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',
   IVR_CREATED = 'ivr_created',
   MSG_CREATED = 'msg_created',
@@ -97,28 +99,10 @@ 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
   }
 };
 
@@ -220,6 +204,12 @@ 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`;
@@ -232,7 +222,7 @@ export const renderCallEvent = (event: CallEvent): string => {
 
 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) {
@@ -632,53 +622,58 @@ 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.RUN_STARTED:
-      case Events.RUN_ENDED:
+      case Events.CONTACT_LANGUAGE_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderRunEvent(event as RunEvent)
+          text: renderContactLanguageChangedEvent(
+            event as ContactLanguageChangedEvent
+          )
         };
         break;
-      case Events.CONTACT_FIELD_CHANGED:
+      case Events.CONTACT_NAME_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderUpdateEvent(event as UpdateFieldEvent)
+          text: renderNameChanged(event as NameChangedEvent)
         };
         break;
-      case Events.CONTACT_NAME_CHANGED:
+      case Events.CONTACT_STATUS_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderNameChanged(event as NameChangedEvent)
+          text: renderContactStatusChangedEvent(
+            event as ContactStatusChangedEvent
+          )
         };
         break;
       case Events.CONTACT_URNS_CHANGED:
@@ -687,52 +682,55 @@ export class ContactChat extends ContactStoreElement {
           text: renderContactURNsChanged(event as URNsChangedEvent)
         };
         break;
-      case Events.CONTACT_GROUPS_CHANGED:
+      case Events.OPTIN_REQUESTED:
+      case Events.OPTIN_STARTED:
+      case Events.OPTIN_STOPPED:
         message = {
           type: MessageType.Inline,
-          text: renderContactGroupsEvent(event as ContactGroupsEvent)
+          text: renderOptInEvent(event as OptInEvent)
         };
         break;
-      case Events.AIRTIME_TRANSFERRED:
+      case Events.RUN_STARTED:
+      case Events.RUN_ENDED:
         message = {
           type: MessageType.Inline,
-          text: renderAirtimeTransferredEvent(event as AirtimeTransferredEvent)
+          text: renderRunEvent(event as RunEvent)
         };
         break;
-      case Events.CALL_CREATED:
-      case Events.CALL_MISSED:
-      case Events.CALL_RECEIVED:
+      case Events.TICKET_ASSIGNED:
         message = {
           type: MessageType.Inline,
-          text: renderCallEvent(event as CallEvent)
+          text: renderTicketAssigned(event as TicketEvent)
         };
         break;
-      case Events.CHANNEL_EVENT:
+      case Events.TICKET_CLOSED:
         message = {
           type: MessageType.Inline,
-          text: renderChannelEvent(event as ChannelEvent)
+          text: renderTicketAction(event as TicketEvent, 'closed')
         };
         break;
-      case Events.CHAT_STARTED:
+      case Events.TICKET_OPENED:
         message = {
           type: MessageType.Inline,
-          text: renderChatStartedEvent(event as ChatStartedEvent)
+          text: renderTicketAction(event as TicketEvent, 'opened')
         };
         break;
-      case Events.CONTACT_LANGUAGE_CHANGED:
+      case Events.TICKET_REOPENED:
         message = {
           type: MessageType.Inline,
-          text: renderContactLanguageChangedEvent(
-            event as ContactLanguageChangedEvent
-          )
+          text: renderTicketAction(event as TicketEvent, 'reopened')
         };
         break;
-      case Events.OPTIN_REQUESTED:
-      case Events.OPTIN_STARTED:
-      case Events.OPTIN_STOPPED:
+      case Events.TICKET_TOPIC_CHANGED:
         message = {
           type: MessageType.Inline,
-          text: renderOptInEvent(event as OptInEvent)
+          text: `Topic changed to **${(event as TicketEvent).topic.name}**`
+        };
+        break;
+      case Events.CHANNEL_EVENT: // deprecated
+        message = {
+          type: MessageType.Inline,
+          text: renderChannelEvent(event as ChannelEvent)
         };
         break;
     }

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

@@ -68,6 +68,11 @@ export interface NamedObject {
   name: string;
 }
 
+export interface FieldReference {
+  key: string;
+  name: string;
+}
+
 export interface Group extends NamedObject {
   status?: string;
   system?: boolean;
@@ -111,7 +116,7 @@ export interface RemoveFromGroup extends Action {
 }
 
 export interface SetContactField extends Action {
-  field: NamedObject;
+  field: FieldReference;
   value: string;
 }
 
@@ -175,7 +180,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 {