@nyaruka/temba-components 0.129.3 → 0.129.4

package/src/form/select/Select.ts

@@ -55,6 +55,10 @@ export class Select<T extends SelectOption> extends FormElement {
         --temba-options-font-size: var(--temba-select-selected-font-size);
         --icon-color: var(--color-text-dark);
         --color-options-bg: #fff;
+        /* Always use normal border colors for options popup, even when select is in error state */
+        --color-widget-border: #ddd;
+        --color-focus: #007bff;
+        --widget-box-shadow-focused: 0 0 0 3px rgba(0, 123, 255, 0.25);
       }
 
       :host:focus {
@@ -448,6 +452,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Boolean })
   tags = false;
 
+  @property({ type: Boolean })
+  emails = false;
+
   @property({ type: Boolean, attribute: 'space_select' })
   spaceSelect: boolean;
 
@@ -599,7 +606,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
             this.staticOptions.push(option);
             if (selected) {
-              if (this.multi) {
+              if (this.isMultiMode) {
                 this.addValue(option);
               } else {
                 this.setValues([option]);
@@ -855,7 +862,7 @@ export class Select<T extends SelectOption> extends FormElement {
       const name = this.getAttribute('name');
 
       if (name) {
-        if (!this.multi && this.values.length === 1) {
+        if (!this.isMultiMode && this.values.length === 1) {
           this.selection = this.values[0];
           this.value = this.serializeValue(this.values[0]);
         } else {
@@ -875,13 +882,13 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   private setSelectedOption(option: any) {
-    if (this.multi) {
+    if (this.isMultiMode) {
       this.addValue(option);
     } else {
       this.setValues([option]);
     }
 
-    if (!this.multi || !this.searchable) {
+    if (!this.isMultiMode || !this.searchable) {
       this.blur();
       this.focused = false;
     }
@@ -904,7 +911,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public handleOptionSelection(event: CustomEvent) {
     if (
-      this.multi &&
+      this.isMultiMode &&
       this.maxItems > 0 &&
       this.values.length >= this.maxItems
     ) {
@@ -969,10 +976,27 @@ export class Select<T extends SelectOption> extends FormElement {
     this.visibleOptions = [];
   }
 
-  private createArbitraryOptionDefault(): any {
+  private createArbitraryOptionDefault(input: string, _options: any[]): any {
+    if (this.emails && input && this.isValidEmail(input)) {
+      return { name: input, value: input };
+    }
+    if (this.tags && input) {
+      return { name: input, value: input };
+    }
     return null;
   }
 
+  private isValidEmail(email: string): boolean {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  // Helper method to determine if this select should behave as multi-select
+  // Returns true if multi is explicitly set OR if emails mode is enabled
+  private get isMultiMode(): boolean {
+    return this.multi || this.emails;
+  }
+
   public open(): void {
     (
       this.shadowRoot.querySelector('.select-container') as HTMLDivElement
@@ -1042,7 +1066,7 @@ export class Select<T extends SelectOption> extends FormElement {
     // filter out any options already selected by id
     // TODO: should maybe be doing a deep equals here with option to optimize
     if (this.values.length > 0) {
-      if (this.multi) {
+      if (this.isMultiMode) {
         options = options.filter(
           (option) =>
             !this.values.find(
@@ -1063,7 +1087,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     if (
-      this.multi &&
+      this.isMultiMode &&
       this.maxItems > 0 &&
       this.values.length >= this.maxItems
     ) {
@@ -1123,6 +1147,18 @@ export class Select<T extends SelectOption> extends FormElement {
         }
       }
 
+      if (this.emails && q) {
+        if (
+          this.isValidEmail(q) &&
+          !options.find(
+            (option: any) =>
+              this.getValue(option) && this.getValue(option).toLowerCase() === q
+          )
+        ) {
+          options.splice(0, 0, { name: query, value: query });
+        }
+      }
+
       if (this.endpoint) {
         let url = this.endpoint;
         if (next) {
@@ -1149,7 +1185,7 @@ export class Select<T extends SelectOption> extends FormElement {
         }
 
         const cache = this.lruCache.get(url);
-        if (this.cache && !this.tags && cache) {
+        if (this.cache && !this.tags && !this.emails && cache) {
           if (page === 0 && !this.next) {
             this.cursorIndex = 0;
             this.setVisibleOptions([...options, ...cache.options]);
@@ -1168,7 +1204,7 @@ export class Select<T extends SelectOption> extends FormElement {
           fetchResults(url).then((results: any) => {
             results = this.prepareOptions(results);
 
-            if (this.cache && !this.tags) {
+            if (this.cache && !this.tags && !this.emails) {
               this.lruCache.set(url, {
                 options: results,
                 complete: true,
@@ -1207,7 +1243,7 @@ export class Select<T extends SelectOption> extends FormElement {
                 this.complete = this.isComplete(results, response);
               }
 
-              if (this.cache && !this.tags) {
+              if (this.cache && !this.tags && !this.emails) {
                 this.lruCache.set(url, {
                   options: results,
                   complete: this.complete,
@@ -1249,7 +1285,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     if (
-      this.multi &&
+      this.isMultiMode &&
       this.maxItems > 0 &&
       this.values.length >= this.maxItems
     ) {
@@ -1270,7 +1306,7 @@ export class Select<T extends SelectOption> extends FormElement {
       expression: true
     };
 
-    if (this.multi) {
+    if (this.isMultiMode) {
       if (
         !this.values.find((option: T) => {
           return (
@@ -1289,7 +1325,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     this.input = '';
-    if (!this.multi) {
+    if (!this.isMultiMode) {
       this.blur();
     }
   }
@@ -1303,6 +1339,21 @@ export class Select<T extends SelectOption> extends FormElement {
       this.input.indexOf('@') > -1
     ) {
       this.addInputAsValue();
+      return;
+    }
+
+    // if we are in email mode and have a valid email, add it
+    if (
+      evt.key === 'Enter' &&
+      this.emails &&
+      this.input &&
+      this.isValidEmail(this.input.trim()) &&
+      this.visibleOptions.length === 0
+    ) {
+      evt.preventDefault();
+      const emailOption = { name: this.input.trim(), value: this.input.trim() };
+      this.setSelectedOption(emailOption);
+      return;
     }
 
     // see if we should open our options on a key event
@@ -1323,7 +1374,7 @@ export class Select<T extends SelectOption> extends FormElement {
     }
 
     // focus our last item on delete
-    if (this.multi && evt.key === 'Backspace' && !this.input) {
+    if (this.isMultiMode && evt.key === 'Backspace' && !this.input) {
       if (this.visibleOptions.length > 0) {
         this.visibleOptions = [];
         return;
@@ -1447,7 +1498,10 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public serializeValue(value: any): string {
     // static options just use their value
-    if (!this.jsonValue && (this.staticOptions.length > 0 || this.tags)) {
+    if (
+      !this.jsonValue &&
+      (this.staticOptions.length > 0 || this.isMultiMode)
+    ) {
       return value.value;
     }
 
@@ -1487,7 +1541,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public addValue(value: any) {
     const oldValues = [...this.values];
-    this.values.push(value);
+    this.values = [...this.values, value];
     this.requestUpdate('values', oldValues);
   }
 
@@ -1495,7 +1549,7 @@ export class Select<T extends SelectOption> extends FormElement {
     const oldValues = [...this.values];
     const idx = this.values.indexOf(valueToRemove);
     if (idx > -1) {
-      this.values.splice(idx, 1);
+      this.values = this.values.filter((_, index) => index !== idx);
 
       // Also remove the 'selected' attribute from the corresponding temba-option element
       const valueToMatch = this.getValue(valueToRemove);
@@ -1515,7 +1569,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
   public popValue() {
     const oldValues = [...this.values];
-    this.values.pop();
+    this.values = this.values.slice(0, -1);
     this.requestUpdate('values', oldValues);
     this.infoText = '';
   }
@@ -1553,9 +1607,12 @@ export class Select<T extends SelectOption> extends FormElement {
         toIdx < this.values.length
       ) {
         const oldValues = [...this.values];
-        // Move the item from fromIdx to toIdx
-        const movedItem = this.values.splice(fromIdx, 1)[0];
-        this.values.splice(toIdx, 0, movedItem);
+        // Create a new array with the moved item
+        const newValues = [...this.values];
+        const movedItem = newValues[fromIdx];
+        newValues.splice(fromIdx, 1);
+        newValues.splice(toIdx, 0, movedItem);
+        this.values = newValues;
         this.requestUpdate('values', oldValues);
       }
     }
@@ -1568,7 +1625,7 @@ export class Select<T extends SelectOption> extends FormElement {
     `;
 
     const clear =
-      this.clearable && this.values.length > 0 && !this.multi
+      this.clearable && this.values.length > 0 && !this.isMultiMode
         ? html`<temba-icon
             name="${Icon.select_clear}"
             size="1.1"
@@ -1578,8 +1635,8 @@ export class Select<T extends SelectOption> extends FormElement {
         : null;
 
     const classes = getClasses({
-      multi: this.multi,
-      single: !this.multi,
+      multi: this.isMultiMode,
+      single: !this.isMultiMode,
       searchable: this.searchable,
       empty: this.values.length === 0,
       options: this.visibleOptions.length > 0,
@@ -1615,8 +1672,8 @@ export class Select<T extends SelectOption> extends FormElement {
         `
       : placeholderDiv;
 
-    const items = html`${!this.multi && !this.resolving ? input : null}
-    ${this.multi && this.values.length > 1
+    const items = html`${!this.isMultiMode && !this.resolving ? input : null}
+    ${this.isMultiMode && this.values.length > 1
       ? html`
           <temba-sortable-list
             horizontal
@@ -1657,7 +1714,7 @@ export class Select<T extends SelectOption> extends FormElement {
                     : ''}
                               "
                 >
-                  ${this.multi
+                  ${this.isMultiMode
                     ? html`
                         <div
                           class="remove-item"
@@ -1706,7 +1763,7 @@ export class Select<T extends SelectOption> extends FormElement {
                 : ''}
                           "
             >
-              ${this.multi
+              ${this.isMultiMode
                 ? html`
                     <div
                       class="remove-item"
@@ -1732,13 +1789,13 @@ export class Select<T extends SelectOption> extends FormElement {
                     </div>
                   `
                 : null}
-              ${!this.input || this.multi
+              ${!this.input || this.isMultiMode
                 ? this.renderSelectedItem(selected)
                 : null}
             </div>
           `
         )}
-    ${this.multi ? input : null}`;
+    ${this.isMultiMode ? input : null}`;
 
     return html`
             
@@ -1778,7 +1835,7 @@ export class Select<T extends SelectOption> extends FormElement {
 
           <slot name="right"></slot>
           ${
-            !this.tags
+            !this.tags && !this.emails
               ? html`<div
                   class="right-side arrow"
                   style="display:block;margin-right:5px"

package/src/interfaces.ts

@@ -100,7 +100,6 @@ export interface Msg {
   channel: ObjectReference;
   quick_replies: string[];
   urn: string;
-  id: number;
   direction: string;
   type: string;
   attachments: string[];
@@ -287,5 +286,11 @@ export enum CustomEventType {
   TicketUpdated = 'temba-ticket-updated',
   Moved = 'temba-moved',
   DateRangeChanged = 'temba-date-range-changed',
-  NodeDeleted = 'temba-node-deleted'
+  NodeDeleted = 'temba-node-deleted',
+  ActionEditRequested = 'temba-action-edit-requested',
+  ActionSaved = 'temba-action-saved',
+  ActionEditCanceled = 'temba-action-edit-canceled',
+  NodeEditRequested = 'temba-node-edit-requested',
+  NodeSaved = 'temba-node-saved',
+  NodeEditCancelled = 'temba-node-edit-cancelled'
 }

package/src/live/ContactChat.ts

@@ -11,7 +11,6 @@ import {
 import {
   fetchResults,
   getUrl,
-  oxford,
   oxfordFn,
   postJSON,
   postUrl,
@@ -21,24 +20,18 @@ import { ContactStoreElement } from './ContactStoreElement';
 import { Compose, ComposeValue } from '../form/Compose';
 import {
   AirtimeTransferredEvent,
-  CampaignFiredEvent,
   ChannelEvent,
   ContactEvent,
   ContactGroupsEvent,
   ContactHistoryPage,
   ContactLanguageChangedEvent,
-  EmailSentEvent,
-  ErrorMessageEvent,
   FlowEvent,
-  LabelsAddedEvent,
   MsgEvent,
   NameChangedEvent,
   OptinRequestedEvent,
   TicketEvent,
   UpdateFieldEvent,
-  UpdateResultEvent,
-  URNsChangedEvent,
-  WebhookEvent
+  URNsChangedEvent
 } from '../events';
 import { Chat, ChatEvent, MessageType } from '../display/Chat';
 import { getUserDisplay } from '../webchat';
@@ -63,19 +56,14 @@ export enum Events {
   FLOW_ENTERED = 'flow_entered',
 
   FLOW_EXITED = 'flow_exited',
-  RUN_RESULT_CHANGED = 'run_result_changed',
   CONTACT_FIELD_CHANGED = 'contact_field_changed',
   CONTACT_GROUPS_CHANGED = 'contact_groups_changed',
   CONTACT_NAME_CHANGED = 'contact_name_changed',
   CONTACT_URNS_CHANGED = 'contact_urns_changed',
-  CAMPAIGN_FIRED = 'campaign_fired',
   CHANNEL_EVENT = 'channel_event',
   CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',
-  WEBHOOK_CALLED = 'webhook_called',
   AIRTIME_TRANSFERRED = 'airtime_transferred',
   CALL_STARTED = 'call_started',
-  EMAIL_SENT = 'email_sent',
-  INPUT_LABELS_ADDED = 'input_labels_added',
   NOTE_CREATED = 'note_created',
   TICKET_ASSIGNED = 'ticket_assigned',
   TICKET_NOTE_ADDED = 'ticket_note_added',
@@ -83,9 +71,7 @@ export enum Events {
   TICKET_OPENED = 'ticket_opened',
   TICKET_REOPENED = 'ticket_reopened',
   TICKET_TOPIC_CHANGED = 'ticket_topic_changed',
-  OPTIN_REQUESTED = 'optin_requested',
-  ERROR = 'error',
-  FAILURE = 'failure'
+  OPTIN_REQUESTED = 'optin_requested'
 }
 
 const renderInfoList = (singular: string, plural: string, items: any[]) => {
@@ -102,10 +88,6 @@ const renderInfoList = (singular: string, plural: string, items: any[]) => {
   }
 };
 
-const toTitleCase = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-
 const renderChannelEvent = (event: ChannelEvent): string => {
   if (event.event.type === 'mt_miss') {
     return 'Missed outgoing call';
@@ -144,12 +126,6 @@ const renderFlowEvent = (event: FlowEvent): string => {
   return `${verb} [**${event.flow.name}**](/flow/editor/${event.flow.uuid}/)`;
 };
 
-const renderResultEvent = (event: UpdateResultEvent): string => {
-  if (!event.name.startsWith('_') && event.value) {
-    return `Updated flow result **${event.name}** to **${event.value}**`;
-  }
-};
-
 const renderUpdateEvent = (event: UpdateFieldEvent): string => {
   return event.value
     ? `Updated **${event.field.name}** to **${event.value.text}**`
@@ -167,16 +143,6 @@ const renderContactURNsChanged = (event: URNsChangedEvent): string => {
   )}`;
 };
 
-const renderEmailSent = (event: EmailSentEvent): string => {
-  return `Email sent to **${oxford(event.to, 'and')}** with subject **${
-    event.subject
-  }**`;
-};
-
-const renderLabelsAdded = (event: LabelsAddedEvent): string => {
-  return `Applied ${renderInfoList('label', 'labels', event.labels)}`;
-};
-
 export const renderTicketAction = (
   event: TicketEvent,
   action: string
@@ -216,31 +182,10 @@ export const renderContactGroupsEvent = (event: ContactGroupsEvent): string => {
   }
 };
 
-export const renderCampaignFiredEvent = (event: CampaignFiredEvent): string => {
-  return `Campaign ${event.campaign.name}
-      ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
-      ${event.campaign_event.offset_display}
-      ${event.campaign_event.relative_to.name}`;
-};
-
 export const renderTicketOpened = (event: TicketEvent): string => {
   return `${event.ticket.topic.name} ticket was opened`;
 };
 
-export const renderErrorMessage = (event: ErrorMessageEvent): string => {
-  return `${event.text} ${
-    event.type === Events.FAILURE
-      ? `Run ended prematurely, check the flow design`
-      : null
-  }`;
-};
-
-export const renderWebhookEvent = (event: WebhookEvent): string => {
-  return event.status === 'success'
-    ? `Successfully called ${event.url}`
-    : `Failed to call ${event.url}`;
-};
-
 export const renderAirtimeTransferredEvent = (
   event: AirtimeTransferredEvent
 ): string => {
@@ -656,15 +601,6 @@ export class ContactChat extends ContactStoreElement {
   public getEventMessage(event: ContactEvent): ChatEvent {
     let message = null;
     switch (event.type) {
-      case Events.ERROR:
-      case Events.FAILURE:
-        message = {
-          type: MessageType.Inline,
-          text: `Error during flow: ${toTitleCase(
-            (event as ErrorMessageEvent).text
-          )}`
-        };
-        break;
       case Events.TICKET_OPENED:
         message = {
           type: MessageType.Inline,
@@ -702,12 +638,6 @@ export class ContactChat extends ContactStoreElement {
           text: renderFlowEvent(event as FlowEvent)
         };
         break;
-      case Events.RUN_RESULT_CHANGED:
-        message = {
-          type: MessageType.Inline,
-          text: renderResultEvent(event as UpdateResultEvent)
-        };
-        break;
       case Events.CONTACT_FIELD_CHANGED:
         message = {
           type: MessageType.Inline,
@@ -726,30 +656,12 @@ export class ContactChat extends ContactStoreElement {
           text: renderContactURNsChanged(event as URNsChangedEvent)
         };
         break;
-      case Events.EMAIL_SENT:
-        message = {
-          type: MessageType.Inline,
-          text: renderEmailSent(event as EmailSentEvent)
-        };
-        break;
-      case Events.INPUT_LABELS_ADDED:
-        message = {
-          type: MessageType.Inline,
-          text: renderLabelsAdded(event as LabelsAddedEvent)
-        };
-        break;
       case Events.CONTACT_GROUPS_CHANGED:
         message = {
           type: MessageType.Inline,
           text: renderContactGroupsEvent(event as ContactGroupsEvent)
         };
         break;
-      case Events.WEBHOOK_CALLED:
-        message = {
-          type: MessageType.Inline,
-          text: renderWebhookEvent(event as WebhookEvent)
-        };
-        break;
       case Events.AIRTIME_TRANSFERRED:
         message = {
           type: MessageType.Inline,
@@ -762,12 +674,6 @@ export class ContactChat extends ContactStoreElement {
           text: renderCallStartedEvent()
         };
         break;
-      case Events.CAMPAIGN_FIRED:
-        message = {
-          type: MessageType.Inline,
-          text: renderCampaignFiredEvent(event as CampaignFiredEvent)
-        };
-        break;
       case Events.CHANNEL_EVENT:
         message = {
           type: MessageType.Inline,
@@ -853,8 +759,8 @@ export class ContactChat extends ContactStoreElement {
         ) {
           const msgEvent = event as MsgEvent;
           messages.push({
+            uuid: event.uuid,
             type: msgEvent.type === 'msg_received' ? 'msg_in' : 'msg_out',
-            id: msgEvent.msg.id + '',
             user: this.getUserForEvent(msgEvent),
             date: new Date(msgEvent.created_on),
             attachments: msgEvent.msg.attachments,

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

@@ -76,7 +76,7 @@ export interface Group extends NamedObject {
 
 export interface SendMsg extends Action {
   text: string;
-  quick_replies: string[];
+  quick_replies?: string[];
 }
 
 export interface SetRunResult extends Action {
@@ -91,6 +91,10 @@ export interface SetContactName extends Action {
 
 export interface CallWebhook extends Action {
   url: string;
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  headers?: Record<string, string>;
+  body?: string;
+  result_name?: string;
 }
 
 export interface AddToGroup extends Action {
@@ -99,6 +103,7 @@ export interface AddToGroup extends Action {
 
 export interface RemoveFromGroup extends Action {
   groups: Group[];
+  all_groups?: boolean;
 }
 
 export interface SetContactField extends Action {

package/static/api/contacts.json

@@ -0,0 +1,30 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "contact-1",
+      "name": "John Doe",
+      "language": "eng",
+      "urns": ["tel:+1234567890"],
+      "fields": {},
+      "groups": [],
+      "blocked": false,
+      "stopped": false,
+      "created_on": "2024-01-01T00:00:00Z",
+      "modified_on": "2024-01-01T00:00:00Z"
+    },
+    {
+      "uuid": "contact-2",
+      "name": "Jane Smith",
+      "language": "eng",
+      "urns": ["tel:+0987654321"],
+      "fields": {},
+      "groups": [],
+      "blocked": false,
+      "stopped": false,
+      "created_on": "2024-01-01T00:00:00Z",
+      "modified_on": "2024-01-01T00:00:00Z"
+    }
+  ]
+}