@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/flow/config.ts

@@ -1,10 +1,36 @@
 import { TemplateResult } from 'lit-html';
 import {
+  renderAddContactUrn,
+  renderAddInputLabels,
   renderAddToGroups,
+  renderCallClassifier,
+  renderCallLLM,
+  renderCallResthook,
   renderCallWebhook,
+  renderEnterFlow,
+  renderOpenTicket,
+  renderPlayAudio,
+  renderRemoveFromGroups,
+  renderRequestOptin,
+  renderSayMsg,
+  renderSendBroadcast,
+  renderSendEmail,
   renderSendMsg,
+  renderSetContactChannel,
+  renderSetContactField,
+  renderSetContactLanguage,
   renderSetContactName,
-  renderSetRunResult
+  renderSetContactStatus,
+  renderSetRunResult,
+  renderStartSession,
+  renderTransferAirtime,
+  renderWaitForAudio,
+  renderWaitForDigits,
+  renderWaitForImage,
+  renderWaitForLocation,
+  renderWaitForMenu,
+  renderWaitForResponse,
+  renderWaitForVideo
 } from './render';
 
 export interface UIConfig {
@@ -32,27 +58,38 @@ export const EDITOR_CONFIG: {
 } = {
   add_input_labels: {
     name: 'Add Labels',
-    color: COLORS.update
+    color: COLORS.update,
+    render: renderAddInputLabels
   },
   add_contact_urn: {
     name: 'Add Contact URN',
-    color: COLORS.update
+    color: COLORS.update,
+    render: renderAddContactUrn
   },
   set_contact_field: {
     name: 'Update Contact Field',
-    color: COLORS.update
+    color: COLORS.update,
+    render: renderSetContactField
   },
   set_contact_channel: {
     name: 'Update Contact Channel',
-    color: COLORS.update
+    color: COLORS.update,
+    render: renderSetContactChannel
   },
   set_contact_language: {
     name: 'Update Contact Language',
-    color: COLORS.update
+    color: COLORS.update,
+    render: renderSetContactLanguage
+  },
+  set_contact_status: {
+    name: 'Update Contact Status',
+    color: COLORS.update,
+    render: renderSetContactStatus
   },
   send_broadcast: {
     name: 'Send Broadcast',
-    color: COLORS.broadcast
+    color: COLORS.broadcast,
+    render: renderSendBroadcast
   },
   set_run_result: {
     name: 'Save Flow Result',
@@ -66,36 +103,83 @@ export const EDITOR_CONFIG: {
   },
   send_email: {
     name: 'Send Email',
-    color: COLORS.broadcast
+    color: COLORS.broadcast,
+    render: renderSendEmail
   },
   start_session: {
     name: 'Start Somebody Else',
-    color: COLORS.broadcast
+    color: COLORS.broadcast,
+    render: renderStartSession
   },
   open_ticket: {
     name: 'Open Ticket',
-    color: COLORS.execute
+    color: COLORS.execute,
+    render: renderOpenTicket
   },
   call_webhook: {
     name: 'Call Webhook',
     color: COLORS.call,
     render: renderCallWebhook
   },
-  enter_flow: {
-    name: 'Enter Subflow',
-    color: COLORS.execute
+  call_classifier: {
+    name: 'Call Classifier',
+    color: COLORS.call,
+    render: renderCallClassifier
+  },
+  call_resthook: {
+    name: 'Call Resthook',
+    color: COLORS.call,
+    render: renderCallResthook
   },
   call_llm: {
     name: 'Call AI',
-    color: COLORS.call
+    color: COLORS.call,
+    render: renderCallLLM
+  },
+  enter_flow: {
+    name: 'Enter Subflow',
+    color: COLORS.execute,
+    render: renderEnterFlow
   },
   transfer_airtime: {
     name: 'Send Airtime',
-    color: COLORS.call
+    color: COLORS.call,
+    render: renderTransferAirtime
   },
   wait_for_response: {
     name: 'Wait for Response',
-    color: COLORS.wait
+    color: COLORS.wait,
+    render: renderWaitForResponse
+  },
+  wait_for_menu: {
+    name: 'Wait for Menu Selection',
+    color: COLORS.wait,
+    render: renderWaitForMenu
+  },
+  wait_for_digits: {
+    name: 'Wait for Digits',
+    color: COLORS.wait,
+    render: renderWaitForDigits
+  },
+  wait_for_audio: {
+    name: 'Wait for Audio',
+    color: COLORS.wait,
+    render: renderWaitForAudio
+  },
+  wait_for_video: {
+    name: 'Wait for Video',
+    color: COLORS.wait,
+    render: renderWaitForVideo
+  },
+  wait_for_image: {
+    name: 'Wait for Image',
+    color: COLORS.wait,
+    render: renderWaitForImage
+  },
+  wait_for_location: {
+    name: 'Wait for Location',
+    color: COLORS.wait,
+    render: renderWaitForLocation
   },
   set_contact_name: {
     name: 'Update Contact',
@@ -109,11 +193,23 @@ export const EDITOR_CONFIG: {
   },
   remove_contact_groups: {
     name: 'Remove from Group',
-    color: COLORS.remove
+    color: COLORS.remove,
+    render: renderRemoveFromGroups
   },
   request_optin: {
     name: 'Request Opt-in',
-    color: COLORS.send
+    color: COLORS.send,
+    render: renderRequestOptin
+  },
+  say_msg: {
+    name: 'Say Message',
+    color: COLORS.send,
+    render: renderSayMsg
+  },
+  play_audio: {
+    name: 'Play Audio',
+    color: COLORS.send,
+    render: renderPlayAudio
   },
   split_by_run_result: {
     name: 'Split by Flow Result',

package/src/flow/render.ts

@@ -2,27 +2,95 @@ import { html } from 'lit-html';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 
 import {
+  AddContactUrn,
+  AddInputLabels,
   AddToGroup,
+  CallClassifier,
+  CallLLM,
+  CallResthook,
   CallWebhook,
+  EnterFlow,
   Node,
   NamedObject,
+  OpenTicket,
+  PlayAudio,
+  RemoveFromGroup,
+  RequestOptin,
+  SayMsg,
+  SendBroadcast,
+  SendEmail,
   SendMsg,
+  SetContactChannel,
+  SetContactField,
+  SetContactLanguage,
   SetContactName,
-  SetRunResult
+  SetContactStatus,
+  SetRunResult,
+  StartSession,
+  TransferAirtime,
+  WaitForAudio,
+  WaitForDigits,
+  WaitForImage,
+  WaitForLocation,
+  WaitForMenu,
+  WaitForResponse,
+  WaitForVideo
 } from '../store/flow-definition';
+import { Icon } from '../Icons';
+
+// URN scheme mapping for user-friendly display
+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'
+};
+
+const renderLineItem = (name: string, icon?: string) => {
+  return html`<div style="display:flex;items-align:center">
+    ${icon
+      ? html`<temba-icon name=${icon} style="margin-right:0.5em"></temba-icon>`
+      : null}
+    <div
+      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+    >
+      ${name}
+    </div>
+  </div>`;
+};
 
 const renderNamedObjects = (assets: NamedObject[], icon?: string) => {
-  return assets.map((asset) => {
-    return html`<div style="display:flex;items-align:center">
+  const items = [];
+  const maxDisplay = 3;
+
+  // Show up to 3 items, or all 4 if exactly 4 items
+  const displayCount =
+    assets.length === 4 ? 4 : Math.min(maxDisplay, assets.length);
+
+  for (let i = 0; i < displayCount; i++) {
+    const asset = assets[i];
+    items.push(renderLineItem(asset.name, icon));
+  }
+
+  // Add "+X more" if there are more than 3 items (and not exactly 4)
+  if (assets.length > maxDisplay && assets.length !== 4) {
+    const remainingCount = assets.length - maxDisplay;
+    items.push(html`<div style="display:flex;items-align:center; color: #666;">
       ${icon
-        ? html`<temba-icon
-            name=${icon}
-            style="margin-right:0.5em"
-          ></temba-icon>`
+        ? html`<div style="margin-right:0.5em; width: 1em;"></div>` // spacing placeholder
         : null}
-      <div>${asset.name}</div>
-    </div>`;
-  });
+      <div>+${remainingCount} more</div>
+    </div>`);
+  }
+
+  return items;
 };
 
 export const renderSendMsg = (node: Node, action: SendMsg) => {
@@ -48,9 +116,328 @@ export const renderSetRunResult = (node: Node, action: SetRunResult) => {
 };
 
 export const renderCallWebhook = (node: Node, action: CallWebhook) => {
-  return html`<div style="word-break: break-all">${action.url}</div>`;
+  return html`<div
+    style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+  >
+    ${action.url}
+  </div>`;
 };
 
 export const renderAddToGroups = (node: Node, action: AddToGroup) => {
   return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
 };
+
+export const renderRemoveFromGroups = (node: Node, action: RemoveFromGroup) => {
+  return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;
+};
+
+export const renderSetContactField = (node: Node, action: SetContactField) => {
+  return html`<div>
+    Set <b>${action.field.name}</b> to <b>${action.value}</b>
+  </div>`;
+};
+
+export const renderSetContactLanguage = (
+  node: Node,
+  action: SetContactLanguage
+) => {
+  return html`<div>Set contact language to <b>${action.language}</b></div>`;
+};
+
+export const renderSetContactStatus = (
+  node: Node,
+  action: SetContactStatus
+) => {
+  return html`<div>Set contact status to <b>${action.status}</b></div>`;
+};
+
+export const renderSetContactChannel = (
+  node: Node,
+  action: SetContactChannel
+) => {
+  return html`<div>Set contact channel to <b>${action.channel.name}</b></div>`;
+};
+
+export const renderAddContactUrn = (node: Node, action: AddContactUrn) => {
+  const friendlyScheme = urnSchemeMap[action.scheme] || action.scheme;
+  return html`<div
+    style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;"
+  >
+    Add ${friendlyScheme} <b>${action.path}</b>
+  </div>`;
+};
+
+export const renderSendEmail = (node: Node, action: SendEmail) => {
+  const addressList = action.addresses.join(', ');
+  return html`<div>
+    <div
+      style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+    >
+      <b>${addressList}</b>
+    </div>
+    <div style="margin-top: 0.5em">
+      <div
+        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+      >
+        ${action.subject}
+      </div>
+      <div
+        style="margin-top: 0.25em; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+      >
+        ${action.body}
+      </div>
+    </div>
+  </div>`;
+};
+
+export const renderSendBroadcast = (node: Node, action: SendBroadcast) => {
+  const hasGroups = action.groups && action.groups.length > 0;
+  const hasContacts = action.contacts && action.contacts.length > 0;
+
+  return html`<div>
+    <div style="word-wrap: break-word; margin-bottom: 0.5em">
+      ${action.text}
+    </div>
+    ${hasGroups
+      ? html`<div style="margin-bottom: 0.25em">
+          <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
+          ${renderNamedObjects(action.groups, 'group')}
+        </div>`
+      : null}
+    ${hasContacts
+      ? html`<div>
+          <div style="font-weight: bold; margin-bottom: 0.25em">Contacts:</div>
+          ${renderNamedObjects(action.contacts, 'contact')}
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderEnterFlow = (node: Node, action: EnterFlow) => {
+  return html`<div>Enter flow <b>${action.flow.name}</b></div>`;
+};
+
+export const renderStartSession = (node: Node, action: StartSession) => {
+  const hasGroups = action.groups && action.groups.length > 0;
+  const hasContacts = action.contacts && action.contacts.length > 0;
+
+  return html`<div>
+    ${hasGroups
+      ? html`<div style="margin-top: 0.5em">
+          <div style="font-weight: bold; margin-bottom: 0.25em">Groups:</div>
+          ${renderNamedObjects(action.groups, 'group')}
+        </div>`
+      : null}
+    ${hasContacts
+      ? html`<div style="margin-top: 0.5em">
+          <div style="font-weight: bold; margin-bottom: 0.25em">Contacts:</div>
+          ${renderNamedObjects(action.contacts, 'contact')}
+        </div>`
+      : null}
+    ${action.create_contact
+      ? renderLineItem('Create contact', Icon.contact)
+      : null}
+    ${renderLineItem(action.flow.name, Icon.flow)}
+  </div>`;
+};
+
+export const renderTransferAirtime = (node: Node, action: TransferAirtime) => {
+  const amounts = action.amounts.join(', ');
+  return html`<div>
+    Transfer airtime amounts: <b>${amounts}</b>
+    <div>Save result as <b>${action.result_name}</b></div>
+  </div>`;
+};
+
+export const renderCallClassifier = (node: Node, action: CallClassifier) => {
+  return html`<div>
+    <div>Call classifier <b>${action.classifier.name}</b></div>
+    <div style="margin-top: 0.25em; word-wrap: break-word">
+      Input: <b>${action.input}</b>
+    </div>
+    <div style="margin-top: 0.25em">
+      Save result as <b>${action.result_name}</b>
+    </div>
+  </div>`;
+};
+
+export const renderCallResthook = (node: Node, action: CallResthook) => {
+  return html`<div>
+    <div>Call resthook <b>${action.resthook}</b></div>
+    <div style="margin-top: 0.25em">
+      Save result as <b>${action.result_name}</b>
+    </div>
+  </div>`;
+};
+
+export const renderCallLLM = (node: Node, action: CallLLM) => {
+  return html`<div>
+    <div style="margin-top: 0.25em; display: flex; align-items: center;">
+      <temba-icon name="ai" style="margin-right: 0.5em"></temba-icon>
+      <span
+        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+      >
+        ${action.llm.name}
+      </span>
+    </div>
+    <div
+      style="margin-top: 0.25em; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+    >
+      ${action.instructions}
+    </div>
+  </div>`;
+};
+
+export const renderOpenTicket = (node: Node, action: OpenTicket) => {
+  return html`<div>
+    <div
+      style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+    >
+      ${action.body}
+    </div>
+    ${action.assignee
+      ? html`<div
+          style="margin-top: 0.25em; display: flex; align-items: center;"
+        >
+          <temba-icon name="user" style="margin-right: 0.5em"></temba-icon>
+          <span
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+          >
+            ${action.assignee.name}
+          </span>
+        </div>`
+      : null}
+    ${action.topic
+      ? html`<div
+          style="margin-top: 0.25em; display: flex; align-items: center;"
+        >
+          <temba-icon name="topic" style="margin-right: 0.5em"></temba-icon>
+          <span
+            style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+          >
+            ${action.topic.name}
+          </span>
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderRequestOptin = (node: Node, action: RequestOptin) => {
+  return html`<div>Request opt-in for <b>${action.optin.name}</b></div>`;
+};
+
+export const renderAddInputLabels = (node: Node, action: AddInputLabels) => {
+  return html`<div>${renderNamedObjects(action.labels, 'label')}</div>`;
+};
+
+export const renderSayMsg = (node: Node, action: SayMsg) => {
+  return html`<div>
+    <div
+      style="word-wrap: break-word; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+    >
+      ${action.text}
+    </div>
+    ${action.audio_url
+      ? html`<div
+          style="margin-top: 0.5em; display: flex; align-items: center;"
+        >
+          <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
+          <span
+            style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+            >${action.audio_url}</span
+          >
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderPlayAudio = (node: Node, action: PlayAudio) => {
+  return html`<div style="display: flex; align-items: center;">
+    <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
+    <span
+      style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
+      >${action.audio_url}</span
+    >
+  </div>`;
+};
+
+export const renderWaitForResponse = (node: Node, action: WaitForResponse) => {
+  return html`<div>
+    Wait for message response
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForMenu = (node: Node, action: WaitForMenu) => {
+  return html`<div>
+    Wait for menu selection: <b>${action.menu.name}</b>
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForDigits = (node: Node, action: WaitForDigits) => {
+  return html`<div>
+    Wait for <b>${action.count}</b> digit${action.count !== 1 ? 's' : ''}
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForAudio = (node: Node, action: WaitForAudio) => {
+  return html`<div>
+    <temba-icon name="audio" style="margin-right: 0.25em"></temba-icon>
+    Wait for audio recording
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForVideo = (node: Node, action: WaitForVideo) => {
+  return html`<div>
+    <temba-icon name="video" style="margin-right: 0.25em"></temba-icon>
+    Wait for video recording
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForImage = (node: Node, action: WaitForImage) => {
+  return html`<div>
+    <temba-icon name="image" style="margin-right: 0.25em"></temba-icon>
+    Wait for image
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};
+
+export const renderWaitForLocation = (node: Node, action: WaitForLocation) => {
+  return html`<div>
+    <temba-icon name="location" style="margin-right: 0.25em"></temba-icon>
+    Wait for location
+    ${action.timeout
+      ? html`<div style="margin-top: 0.25em">
+          Timeout after <b>${action.timeout}</b> seconds
+        </div>`
+      : null}
+  </div>`;
+};

package/src/{checkbox → form}/Checkbox.ts

@@ -1,7 +1,7 @@
 import { TemplateResult, html, css } from 'lit';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { property } from 'lit/decorators.js';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 
 export class Checkbox extends FormElement {
   static get styles() {

package/src/{colorpicker → form}/ColorPicker.ts

@@ -1,8 +1,8 @@
 import { html, css, PropertyValueMap } from 'lit';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { property } from 'lit/decorators.js';
 import { getClasses, hslToHex } from '../utils';
-import { TextInput } from '../textinput/TextInput';
+import { TextInput } from './TextInput';
 
 export class ColorPicker extends FormElement {
   @property({ type: Boolean })

package/src/{completion → form}/Completion.ts

@@ -1,14 +1,14 @@
 import { TemplateResult, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { TextInput } from '../textinput/TextInput';
+import { TextInput } from './TextInput';
 import {
   renderCompletionOption,
   updateInputElementWithCompletion,
   executeCompletionQuery
-} from './helpers';
+} from '../excellent/helpers';
 
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { CompletionOption, Position } from '../interfaces';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { msg } from '@lit/localize';

package/src/{compose → form}/Compose.ts

@@ -1,14 +1,14 @@
 import { TemplateResult, html, css } from 'lit';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { property } from 'lit/decorators.js';
 import { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';
-import { Completion } from '../completion/Completion';
-import { Select } from '../select/Select';
-import { TabPane } from '../tabpane/TabPane';
-import { MediaPicker } from '../mediapicker/MediaPicker';
-import { Tab } from '../tabpane/Tab';
-import { TextInput } from '../textinput/TextInput';
+import { Completion } from './Completion';
+import { Select } from './select/Select';
+import { TabPane } from '../layout/TabPane';
+import { MediaPicker } from './MediaPicker';
+import { Tab } from '../layout/Tab';
+import { TextInput } from './TextInput';
 import { ShortcutList } from '../list/ShortcutList';
 
 export interface ComposeValue {