@nyaruka/temba-components 0.136.1 → 0.137.0

package/out-tsc/src/events/eventRenderers.js

@@ -0,0 +1,442 @@
+import { html } from 'lit';
+import { oxfordFn } from '../utils';
+export var Events;
+(function (Events) {
+    Events["AIRTIME_TRANSFERRED"] = "airtime_transferred";
+    Events["BROADCAST_CREATED"] = "broadcast_created";
+    Events["CALL_CREATED"] = "call_created";
+    Events["CALL_MISSED"] = "call_missed";
+    Events["CALL_RECEIVED"] = "call_received";
+    Events["CHAT_STARTED"] = "chat_started";
+    Events["CONTACT_FIELD_CHANGED"] = "contact_field_changed";
+    Events["CONTACT_GROUPS_CHANGED"] = "contact_groups_changed";
+    Events["CONTACT_LANGUAGE_CHANGED"] = "contact_language_changed";
+    Events["CONTACT_NAME_CHANGED"] = "contact_name_changed";
+    Events["CONTACT_STATUS_CHANGED"] = "contact_status_changed";
+    Events["CONTACT_URNS_CHANGED"] = "contact_urns_changed";
+    Events["EMAIL_CREATED"] = "email_created";
+    Events["EMAIL_SENT"] = "email_sent";
+    Events["ERROR"] = "error";
+    Events["FAILURE"] = "failure";
+    Events["FLOW_ENTERED"] = "flow_entered";
+    Events["INPUT_LABELS_ADDED"] = "input_labels_added";
+    Events["IVR_CREATED"] = "ivr_created";
+    Events["MSG_CREATED"] = "msg_created";
+    Events["MSG_RECEIVED"] = "msg_received";
+    Events["OPTIN_REQUESTED"] = "optin_requested";
+    Events["OPTIN_STARTED"] = "optin_started";
+    Events["OPTIN_STOPPED"] = "optin_stopped";
+    Events["RESTHOOK_CALLED"] = "resthook_called";
+    Events["RUN_ENDED"] = "run_ended";
+    Events["RUN_RESULT_CHANGED"] = "run_result_changed";
+    Events["RUN_STARTED"] = "run_started";
+    Events["SERVICE_CALLED"] = "service_called";
+    Events["SESSION_TRIGGERED"] = "session_triggered";
+    Events["TICKET_ASSIGNEE_CHANGED"] = "ticket_assignee_changed";
+    Events["TICKET_CLOSED"] = "ticket_closed";
+    Events["TICKET_NOTE_ADDED"] = "ticket_note_added";
+    Events["TICKET_OPENED"] = "ticket_opened";
+    Events["TICKET_REOPENED"] = "ticket_reopened";
+    Events["TICKET_TOPIC_CHANGED"] = "ticket_topic_changed";
+    Events["WARNING"] = "warning";
+    Events["WEBHOOK_CALLED"] = "webhook_called";
+})(Events || (Events = {}));
+const renderInfoList = (singular, plural, items) => {
+    if (items.length === 1) {
+        return html `<div>${singular} <strong>${items[0].name}</strong></div>`;
+    }
+    else {
+        const list = items.map((item) => item.name);
+        if (list.length === 2) {
+            return html `<div>
+        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>
+      </div>`;
+        }
+        else {
+            const last = list.pop();
+            const middle = list.map((name, index) => html `<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`);
+            return html `<div>${plural} ${middle}, and <strong>${last}</strong></div>`;
+        }
+    }
+};
+export const renderRunEvent = (event) => {
+    let verb = 'Started';
+    if (event.type === Events.RUN_ENDED) {
+        if (event.status === 'completed') {
+            verb = 'Completed';
+        }
+        else if (event.status === 'expired') {
+            verb = 'Expired from';
+        }
+        else {
+            verb = 'Interrupted';
+        }
+    }
+    return html `<div>
+    ${verb}
+    <a href="/flow/editor/${event.flow.uuid}/"
+      ><strong>${event.flow.name}</strong></a
+    >
+  </div>`;
+};
+export const renderChatStartedEvent = (event) => {
+    if (event.params) {
+        return html `<div>Chat referral</div>`;
+    }
+    else {
+        return html `<div>Chat started</div>`;
+    }
+};
+export const renderUpdateEvent = (event) => {
+    return event.value
+        ? html `<div>
+        Updated <strong>${event.field.name}</strong> to
+        <strong>${event.value.text}</strong>
+      </div>`
+        : html `<div>Cleared <strong>${event.field.name}</strong></div>`;
+};
+export const renderNameChanged = (event) => {
+    return html `<div>
+    Updated <strong>name</strong> to <strong>${event.name}</strong>
+  </div>`;
+};
+export const renderContactURNsChanged = (event) => {
+    return html `<div>
+    Updated <strong>URNs</strong> to
+    ${oxfordFn(event.urns, (urn) => html `<strong>${urn.split(':')[1].split('?')[0]}</strong>`)}
+  </div>`;
+};
+export const renderTicketAction = (event, action) => {
+    var _a;
+    const ticketUUID = ((_a = event.ticket) === null || _a === void 0 ? void 0 : _a.uuid) || event.ticket_uuid;
+    const actionNote = event.note
+        ? html `<div
+        style="width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;"
+      >
+        <div style="color: #8e830fff; font-size: 1em;margin-bottom:0.25em; ">
+          <strong>${event._user ? event._user.name : 'Someone'}</strong> added a
+          note
+          <temba-date
+            value=${event.created_on.toISOString()}
+            display="relative"
+          ></temba-date>
+        </div>
+        <div style="white-space: pre-wrap;">${event.note}</div>
+      </div>`
+        : null;
+    if (action === 'noted') {
+        return html `${actionNote}`;
+    }
+    const description = event._user
+        ? html `<div>
+        <strong>${event._user.name}</strong> ${action} a
+        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+      </div>`
+        : html `<div>
+        A
+        <strong><a href="/ticket/all/closed/${ticketUUID}/">ticket</a></strong>
+        was <strong>${action}</strong>
+      </div>`;
+    return html `<div style="${actionNote ? 'margin-bottom: 1em;' : ''}">
+      ${description}
+    </div>
+    ${actionNote}`;
+};
+export const renderTicketAssigneeChanged = (event) => {
+    if (event._user) {
+        if (event.assignee) {
+            return html `<div>
+        <strong>${event._user.name}</strong> assigned this ticket to
+        <strong>${event.assignee.name}</strong>
+      </div>`;
+        }
+        else {
+            return html `<div>
+        <strong>${event._user.name}</strong> unassigned this ticket
+      </div>`;
+        }
+    }
+    else {
+        if (event.assignee) {
+            return html `<div>
+        This ticket was assigned to <strong>${event.assignee.name}</strong>
+      </div>`;
+        }
+        else {
+            return html `<div>This ticket was unassigned</div>`;
+        }
+    }
+};
+export const renderTicketOpened = (event) => {
+    return html `<div>${event.ticket.topic.name} ticket was opened</div>`;
+};
+export const renderContactGroupsEvent = (event) => {
+    const groupsEvent = event;
+    if (groupsEvent.groups_added) {
+        return renderInfoList('Added to group', 'Added to groups', groupsEvent.groups_added);
+    }
+    else if (groupsEvent.groups_removed) {
+        return renderInfoList('Removed from group', 'Removed from groups', groupsEvent.groups_removed);
+    }
+};
+export const renderAirtimeTransferredEvent = (event) => {
+    if (parseFloat(event.amount) === 0) {
+        return html `<div>Airtime transfer failed</div>`;
+    }
+    return html `<div>
+    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime
+  </div>`;
+};
+export const renderContactLanguageChangedEvent = (event) => {
+    return html `<div>
+    Language updated to <strong>${event.language}</strong>
+  </div>`;
+};
+export const renderContactStatusChangedEvent = (event) => {
+    return html `<div>Status updated to <strong>${event.status}</strong></div>`;
+};
+export const renderCallEvent = (event) => {
+    if (event.type === Events.CALL_CREATED) {
+        return html `<div>Call started</div>`;
+    }
+    else if (event.type === Events.CALL_MISSED) {
+        return html `<div>Call missed</div>`;
+    }
+    else if (event.type === Events.CALL_RECEIVED) {
+        return html `<div>Call answered</div>`;
+    }
+};
+export const renderOptInEvent = (event) => {
+    if (event.type === Events.OPTIN_REQUESTED) {
+        return html `<div>
+      Requested opt-in for <strong>${event.optin.name}</strong>
+    </div>`;
+    }
+    else if (event.type === Events.OPTIN_STARTED) {
+        return html `<div>Opted in to <strong>${event.optin.name}</strong></div>`;
+    }
+    else if (event.type === Events.OPTIN_STOPPED) {
+        return html `<div>Opted out of <strong>${event.optin.name}</strong></div>`;
+    }
+};
+export const renderDiagnosticEvent = (event, _isSimulation = false) => {
+    if (event.text) {
+        let icon = '⚠️';
+        let bgColor = '#fff3cd';
+        let textColor = '#856404';
+        if (event.type === 'error') {
+            icon = '❗';
+            bgColor = '#fee3e3';
+            textColor = '#c01829';
+        }
+        else if (event.type === 'failure') {
+            icon = '💥';
+            bgColor = '#fee3e3';
+            textColor = '#c01829';
+        }
+        return html `<div
+      style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: ${bgColor}; color: ${textColor}; border-radius: 12px; margin: 4px 18px;"
+    >
+      <span style="font-size: 16px; line-height: 1.4;">${icon}</span>
+      <span style="flex: 1; line-height: 1.4;">${event.text}</span>
+    </div>`;
+    }
+    return null;
+};
+export const renderRunResultChanged = (event, isSimulation = false) => {
+    const val = String(event.value);
+    const MAX_LEN = isSimulation ? 30 : 100;
+    if (val.length > MAX_LEN) {
+        const displayVal = val.substring(0, MAX_LEN) + '...';
+        return html `<div>
+      Set result <strong>${event.name}</strong> to "<span
+        title="${val}"
+        style="cursor: help; border-bottom: 1px dotted #999;"
+        >${displayVal}</span
+      >"
+    </div>`;
+    }
+    return html `<div>Set result <strong>${event.name}</strong> to "${val}"</div>`;
+};
+export const renderInputLabelsAdded = (event) => {
+    const labels = event.labels || [];
+    if (labels.length > 0) {
+        const labelList = labels.map((l) => l.name);
+        if (labelList.length === 1) {
+            return html `<div>
+        Message labeled with <strong>${labelList[0]}</strong>
+      </div>`;
+        }
+        else {
+            const last = labelList.pop();
+            return html `<div>
+        Message labeled with
+        ${labelList.map((name, index) => html `<strong>${name}</strong>${index < labelList.length - 1
+                ? ', '
+                : ''}`)}
+        and <strong>${last}</strong>
+      </div>`;
+        }
+    }
+    return null;
+};
+export const renderEmailSent = (event) => {
+    const recipients = event.to || event.addresses || [];
+    const subject = event.subject;
+    if (recipients.length > 0) {
+        const recipientList = recipients.join(', ');
+        return html `<div>
+      Sent email to <strong>${recipientList}</strong> with subject "${subject}"
+    </div>`;
+    }
+    return null;
+};
+export const renderBroadcastCreated = (event) => {
+    const translations = event.translations;
+    const baseLanguage = event.base_language;
+    if (translations && translations[baseLanguage]) {
+        return html `<div>
+      Sent broadcast: "${translations[baseLanguage].text}"
+    </div>`;
+    }
+    return html `<div>Sent broadcast</div>`;
+};
+export const renderSessionTriggered = (event) => {
+    const flow = event.flow;
+    if (flow) {
+        return html `<div>
+      Started somebody else in <strong>${flow.name}</strong>
+    </div>`;
+    }
+    return null;
+};
+export const renderResthookCalled = (event) => {
+    return html `<div>
+    Triggered flow event <strong>${event.resthook}</strong>
+  </div>`;
+};
+export const renderWebhookCalled = (event) => {
+    return html `<div>Called <strong>${event.url}</strong></div>`;
+};
+export const renderServiceCalled = (event) => {
+    const service = event.service;
+    if (service === 'classifier') {
+        return html `<div>Called classifier</div>`;
+    }
+    return html `<div>Called <strong>${service}</strong></div>`;
+};
+/**
+ * Unified event renderer that handles both simulation and contact chat contexts.
+ * @param event - The event to render
+ * @param isSimulation - Whether this is for simulation (true) or contact chat (false)
+ * @returns A template result or null if the event cannot be rendered
+ */
+export const renderEvent = (event, isSimulation) => {
+    let content = null;
+    switch (event.type) {
+        case Events.ERROR:
+        case Events.FAILURE:
+        case Events.WARNING:
+            content = renderDiagnosticEvent(event, isSimulation);
+            break;
+        case Events.AIRTIME_TRANSFERRED:
+            content = renderAirtimeTransferredEvent(event);
+            break;
+        case Events.CALL_CREATED:
+        case Events.CALL_MISSED:
+        case Events.CALL_RECEIVED:
+            content = renderCallEvent(event);
+            break;
+        case Events.CHAT_STARTED:
+            content = renderChatStartedEvent(event);
+            break;
+        case Events.CONTACT_FIELD_CHANGED:
+            content = renderUpdateEvent(event);
+            break;
+        case Events.CONTACT_GROUPS_CHANGED:
+            content = renderContactGroupsEvent(event);
+            break;
+        case Events.CONTACT_LANGUAGE_CHANGED:
+            content = renderContactLanguageChangedEvent(event);
+            break;
+        case Events.CONTACT_NAME_CHANGED:
+            content = renderNameChanged(event);
+            break;
+        case Events.CONTACT_STATUS_CHANGED:
+            content = renderContactStatusChangedEvent(event);
+            break;
+        case Events.CONTACT_URNS_CHANGED:
+            content = renderContactURNsChanged(event);
+            break;
+        case Events.INPUT_LABELS_ADDED:
+            content = renderInputLabelsAdded(event);
+            break;
+        case Events.RUN_RESULT_CHANGED:
+            content = renderRunResultChanged(event, isSimulation);
+            break;
+        case Events.OPTIN_REQUESTED:
+        case Events.OPTIN_STARTED:
+        case Events.OPTIN_STOPPED:
+            content = renderOptInEvent(event);
+            break;
+        case Events.RUN_STARTED:
+        case Events.RUN_ENDED:
+        case Events.FLOW_ENTERED:
+            content = renderRunEvent(event);
+            break;
+        case Events.EMAIL_CREATED:
+        case Events.EMAIL_SENT:
+            content = renderEmailSent(event);
+            break;
+        case Events.BROADCAST_CREATED:
+            content = renderBroadcastCreated(event);
+            break;
+        case Events.SESSION_TRIGGERED:
+            content = renderSessionTriggered(event);
+            break;
+        case Events.RESTHOOK_CALLED:
+            content = renderResthookCalled(event);
+            break;
+        case Events.WEBHOOK_CALLED:
+            content = renderWebhookCalled(event);
+            break;
+        case Events.SERVICE_CALLED:
+            content = renderServiceCalled(event);
+            break;
+        case Events.TICKET_ASSIGNEE_CHANGED:
+            content = renderTicketAssigneeChanged(event);
+            break;
+        case Events.TICKET_CLOSED:
+            content = renderTicketAction(event, 'closed');
+            break;
+        case Events.TICKET_OPENED:
+            content = renderTicketAction(event, 'opened');
+            break;
+        case Events.TICKET_NOTE_ADDED:
+            content = renderTicketAction(event, 'noted');
+            break;
+        case Events.TICKET_REOPENED:
+            content = renderTicketAction(event, 'reopened');
+            break;
+        case Events.TICKET_TOPIC_CHANGED:
+            content = html `<div>
+        Topic changed to <strong>${event.topic.name}</strong>
+      </div>`;
+            break;
+        default:
+            return null;
+    }
+    if (content === null) {
+        return null;
+    }
+    // wrap in a div with appropriate font size
+    const fontSize = isSimulation ? '11px' : '14px';
+    return html `<div style="font-size: ${fontSize}">${content}</div>`;
+};
+/**
+ * @deprecated Use renderEvent(event, true) instead
+ */
+export const renderSimulatorEvent = (event) => {
+    return renderEvent(event, true);
+};
+//# sourceMappingURL=eventRenderers.js.map

package/out-tsc/src/events/eventRenderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventRenderers.js","sourceRoot":"","sources":["../../../src/events/eventRenderers.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport {\n  AirtimeTransferredEvent,\n  CallEvent,\n  ChatStartedEvent,\n  ContactGroupsEvent,\n  ContactLanguageChangedEvent,\n  ContactStatusChangedEvent,\n  NameChangedEvent,\n  OptInEvent,\n  RunEvent,\n  TicketEvent,\n  UpdateFieldEvent,\n  URNsChangedEvent\n} from '../events';\nimport { oxfordFn } from '../utils';\n\nexport enum Events {\n  AIRTIME_TRANSFERRED = 'airtime_transferred',\n  BROADCAST_CREATED = 'broadcast_created',\n  CALL_CREATED = 'call_created',\n  CALL_MISSED = 'call_missed',\n  CALL_RECEIVED = 'call_received',\n  CHAT_STARTED = 'chat_started',\n  CONTACT_FIELD_CHANGED = 'contact_field_changed',\n  CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n  CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n  CONTACT_NAME_CHANGED = 'contact_name_changed',\n  CONTACT_STATUS_CHANGED = 'contact_status_changed',\n  CONTACT_URNS_CHANGED = 'contact_urns_changed',\n  EMAIL_CREATED = 'email_created',\n  EMAIL_SENT = 'email_sent',\n  ERROR = 'error',\n  FAILURE = 'failure',\n  FLOW_ENTERED = 'flow_entered',\n  INPUT_LABELS_ADDED = 'input_labels_added',\n  IVR_CREATED = 'ivr_created',\n  MSG_CREATED = 'msg_created',\n  MSG_RECEIVED = 'msg_received',\n  OPTIN_REQUESTED = 'optin_requested',\n  OPTIN_STARTED = 'optin_started',\n  OPTIN_STOPPED = 'optin_stopped',\n  RESTHOOK_CALLED = 'resthook_called',\n  RUN_ENDED = 'run_ended',\n  RUN_RESULT_CHANGED = 'run_result_changed',\n  RUN_STARTED = 'run_started',\n  SERVICE_CALLED = 'service_called',\n  SESSION_TRIGGERED = 'session_triggered',\n  TICKET_ASSIGNEE_CHANGED = 'ticket_assignee_changed',\n  TICKET_CLOSED = 'ticket_closed',\n  TICKET_NOTE_ADDED = 'ticket_note_added',\n  TICKET_OPENED = 'ticket_opened',\n  TICKET_REOPENED = 'ticket_reopened',\n  TICKET_TOPIC_CHANGED = 'ticket_topic_changed',\n  WARNING = 'warning',\n  WEBHOOK_CALLED = 'webhook_called'\n}\n\nconst renderInfoList = (\n  singular: string,\n  plural: string,\n  items: any[]\n): TemplateResult => {\n  if (items.length === 1) {\n    return html`<div>${singular} <strong>${items[0].name}</strong></div>`;\n  } else {\n    const list = items.map((item) => item.name);\n    if (list.length === 2) {\n      return html`<div>\n        ${plural} <strong>${list[0]}</strong> and <strong>${list[1]}</strong>\n      </div>`;\n    } else {\n      const last = list.pop();\n      const middle = list.map(\n        (name, index) =>\n          html`<strong>${name}</strong>${index < list.length - 1 ? ', ' : ''}`\n      );\n      return html`<div>${plural} ${middle}, and <strong>${last}</strong></div>`;\n    }\n  }\n};\n\nexport const renderRunEvent = (event: RunEvent): TemplateResult => {\n  let verb = 'Started';\n  if (event.type === Events.RUN_ENDED) {\n    if (event.status === 'completed') {\n      verb = 'Completed';\n    } else if (event.status === 'expired') {\n      verb = 'Expired from';\n    } else {\n      verb = 'Interrupted';\n    }\n  }\n\n  return html`<div>\n    ${verb}\n    <a href=\"/flow/editor/${event.flow.uuid}/\"\n      ><strong>${event.flow.name}</strong></a\n    >\n  </div>`;\n};\n\nexport const renderChatStartedEvent = (\n  event: ChatStartedEvent\n): TemplateResult => {\n  if (event.params) {\n    return html`<div>Chat referral</div>`;\n  } else {\n    return html`<div>Chat started</div>`;\n  }\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n  return event.value\n    ? html`<div>\n        Updated <strong>${event.field.name}</strong> to\n        <strong>${event.value.text}</strong>\n      </div>`\n    : html`<div>Cleared <strong>${event.field.name}</strong></div>`;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n  return html`<div>\n    Updated <strong>name</strong> to <strong>${event.name}</strong>\n  </div>`;\n};\n\nexport const renderContactURNsChanged = (\n  event: URNsChangedEvent\n): TemplateResult => {\n  return html`<div>\n    Updated <strong>URNs</strong> to\n    ${oxfordFn(\n      event.urns,\n      (urn: string) => html`<strong>${urn.split(':')[1].split('?')[0]}</strong>`\n    )}\n  </div>`;\n};\n\nexport const renderTicketAction = (\n  event: TicketEvent,\n  action: string\n): TemplateResult => {\n  const ticketUUID = event.ticket?.uuid || event.ticket_uuid;\n\n  const actionNote = event.note\n    ? html`<div\n        style=\"width:85%; background: #fffac3; padding: 1em;margin-bottom: 1em;margin-top:1em; border: 1px solid #ffe97f;border-radius: var(--curvature);line-height: 1.2em; word-break: break-word;\"\n      >\n        <div style=\"color: #8e830fff; font-size: 1em;margin-bottom:0.25em; \">\n          <strong>${event._user ? event._user.name : 'Someone'}</strong> added a\n          note\n          <temba-date\n            value=${event.created_on.toISOString()}\n            display=\"relative\"\n          ></temba-date>\n        </div>\n        <div style=\"white-space: pre-wrap;\">${event.note}</div>\n      </div>`\n    : null;\n\n  if (action === 'noted') {\n    return html`${actionNote}`;\n  }\n\n  const description = event._user\n    ? html`<div>\n        <strong>${event._user.name}</strong> ${action} a\n        <strong><a href=\"/ticket/all/closed/${ticketUUID}/\">ticket</a></strong>\n      </div>`\n    : html`<div>\n        A\n        <strong><a href=\"/ticket/all/closed/${ticketUUID}/\">ticket</a></strong>\n        was <strong>${action}</strong>\n      </div>`;\n\n  return html`<div style=\"${actionNote ? 'margin-bottom: 1em;' : ''}\">\n      ${description}\n    </div>\n    ${actionNote}`;\n};\n\nexport const renderTicketAssigneeChanged = (\n  event: TicketEvent\n): TemplateResult => {\n  if (event._user) {\n    if (event.assignee) {\n      return html`<div>\n        <strong>${event._user.name}</strong> assigned this ticket to\n        <strong>${event.assignee.name}</strong>\n      </div>`;\n    } else {\n      return html`<div>\n        <strong>${event._user.name}</strong> unassigned this ticket\n      </div>`;\n    }\n  } else {\n    if (event.assignee) {\n      return html`<div>\n        This ticket was assigned to <strong>${event.assignee.name}</strong>\n      </div>`;\n    } else {\n      return html`<div>This ticket was unassigned</div>`;\n    }\n  }\n};\n\nexport const renderTicketOpened = (event: TicketEvent): TemplateResult => {\n  return html`<div>${event.ticket.topic.name} ticket was opened</div>`;\n};\n\nexport const renderContactGroupsEvent = (\n  event: ContactGroupsEvent\n): TemplateResult => {\n  const groupsEvent = event as ContactGroupsEvent;\n  if (groupsEvent.groups_added) {\n    return renderInfoList(\n      'Added to group',\n      'Added to groups',\n      groupsEvent.groups_added\n    );\n  } else if (groupsEvent.groups_removed) {\n    return renderInfoList(\n      'Removed from group',\n      'Removed from groups',\n      groupsEvent.groups_removed\n    );\n  }\n};\n\nexport const renderAirtimeTransferredEvent = (\n  event: AirtimeTransferredEvent\n): TemplateResult => {\n  if (parseFloat(event.amount) === 0) {\n    return html`<div>Airtime transfer failed</div>`;\n  }\n  return html`<div>\n    Transferred <strong>${event.amount}</strong> ${event.currency} of airtime\n  </div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n  event: ContactLanguageChangedEvent\n): TemplateResult => {\n  return html`<div>\n    Language updated to <strong>${event.language}</strong>\n  </div>`;\n};\n\nexport const renderContactStatusChangedEvent = (\n  event: ContactStatusChangedEvent\n): TemplateResult => {\n  return html`<div>Status updated to <strong>${event.status}</strong></div>`;\n};\n\nexport const renderCallEvent = (event: CallEvent): TemplateResult => {\n  if (event.type === Events.CALL_CREATED) {\n    return html`<div>Call started</div>`;\n  } else if (event.type === Events.CALL_MISSED) {\n    return html`<div>Call missed</div>`;\n  } else if (event.type === Events.CALL_RECEIVED) {\n    return html`<div>Call answered</div>`;\n  }\n};\n\nexport const renderOptInEvent = (event: OptInEvent): TemplateResult => {\n  if (event.type === Events.OPTIN_REQUESTED) {\n    return html`<div>\n      Requested opt-in for <strong>${event.optin.name}</strong>\n    </div>`;\n  } else if (event.type === Events.OPTIN_STARTED) {\n    return html`<div>Opted in to <strong>${event.optin.name}</strong></div>`;\n  } else if (event.type === Events.OPTIN_STOPPED) {\n    return html`<div>Opted out of <strong>${event.optin.name}</strong></div>`;\n  }\n};\n\nexport const renderDiagnosticEvent = (\n  event: any,\n  _isSimulation: boolean = false\n): TemplateResult | null => {\n  if (event.text) {\n    let icon = '⚠️';\n    let bgColor = '#fff3cd';\n    let textColor = '#856404';\n\n    if (event.type === 'error') {\n      icon = '❗';\n      bgColor = '#fee3e3';\n      textColor = '#c01829';\n    } else if (event.type === 'failure') {\n      icon = '💥';\n      bgColor = '#fee3e3';\n      textColor = '#c01829';\n    }\n\n    return html`<div\n      style=\"display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: ${bgColor}; color: ${textColor}; border-radius: 12px; margin: 4px 18px;\"\n    >\n      <span style=\"font-size: 16px; line-height: 1.4;\">${icon}</span>\n      <span style=\"flex: 1; line-height: 1.4;\">${event.text}</span>\n    </div>`;\n  }\n  return null;\n};\n\nexport const renderRunResultChanged = (\n  event: any,\n  isSimulation: boolean = false\n): TemplateResult | null => {\n  const val = String(event.value);\n  const MAX_LEN = isSimulation ? 30 : 100;\n\n  if (val.length > MAX_LEN) {\n    const displayVal = val.substring(0, MAX_LEN) + '...';\n    return html`<div>\n      Set result <strong>${event.name}</strong> to \"<span\n        title=\"${val}\"\n        style=\"cursor: help; border-bottom: 1px dotted #999;\"\n        >${displayVal}</span\n      >\"\n    </div>`;\n  }\n  return html`<div>Set result <strong>${event.name}</strong> to \"${val}\"</div>`;\n};\n\nexport const renderInputLabelsAdded = (event: any): TemplateResult | null => {\n  const labels = event.labels || [];\n  if (labels.length > 0) {\n    const labelList = labels.map((l: any) => l.name);\n    if (labelList.length === 1) {\n      return html`<div>\n        Message labeled with <strong>${labelList[0]}</strong>\n      </div>`;\n    } else {\n      const last = labelList.pop();\n      return html`<div>\n        Message labeled with\n        ${labelList.map(\n          (name: string, index: number) =>\n            html`<strong>${name}</strong>${index < labelList.length - 1\n                ? ', '\n                : ''}`\n        )}\n        and <strong>${last}</strong>\n      </div>`;\n    }\n  }\n  return null;\n};\n\nexport const renderEmailSent = (event: any): TemplateResult | null => {\n  const recipients = event.to || event.addresses || [];\n  const subject = event.subject;\n  if (recipients.length > 0) {\n    const recipientList = recipients.join(', ');\n    return html`<div>\n      Sent email to <strong>${recipientList}</strong> with subject \"${subject}\"\n    </div>`;\n  }\n  return null;\n};\n\nexport const renderBroadcastCreated = (event: any): TemplateResult | null => {\n  const translations = event.translations;\n  const baseLanguage = event.base_language;\n  if (translations && translations[baseLanguage]) {\n    return html`<div>\n      Sent broadcast: \"${translations[baseLanguage].text}\"\n    </div>`;\n  }\n  return html`<div>Sent broadcast</div>`;\n};\n\nexport const renderSessionTriggered = (event: any): TemplateResult | null => {\n  const flow = event.flow;\n  if (flow) {\n    return html`<div>\n      Started somebody else in <strong>${flow.name}</strong>\n    </div>`;\n  }\n  return null;\n};\n\nexport const renderResthookCalled = (event: any): TemplateResult | null => {\n  return html`<div>\n    Triggered flow event <strong>${event.resthook}</strong>\n  </div>`;\n};\n\nexport const renderWebhookCalled = (event: any): TemplateResult | null => {\n  return html`<div>Called <strong>${event.url}</strong></div>`;\n};\n\nexport const renderServiceCalled = (event: any): TemplateResult | null => {\n  const service = event.service;\n  if (service === 'classifier') {\n    return html`<div>Called classifier</div>`;\n  }\n  return html`<div>Called <strong>${service}</strong></div>`;\n};\n\n/**\n * Unified event renderer that handles both simulation and contact chat contexts.\n * @param event - The event to render\n * @param isSimulation - Whether this is for simulation (true) or contact chat (false)\n * @returns A template result or null if the event cannot be rendered\n */\nexport const renderEvent = (\n  event: any,\n  isSimulation: boolean\n): TemplateResult | null => {\n  let content: TemplateResult | null = null;\n\n  switch (event.type) {\n    case Events.ERROR:\n    case Events.FAILURE:\n    case Events.WARNING:\n      content = renderDiagnosticEvent(event, isSimulation);\n      break;\n    case Events.AIRTIME_TRANSFERRED:\n      content = renderAirtimeTransferredEvent(event as AirtimeTransferredEvent);\n      break;\n    case Events.CALL_CREATED:\n    case Events.CALL_MISSED:\n    case Events.CALL_RECEIVED:\n      content = renderCallEvent(event as CallEvent);\n      break;\n    case Events.CHAT_STARTED:\n      content = renderChatStartedEvent(event as ChatStartedEvent);\n      break;\n    case Events.CONTACT_FIELD_CHANGED:\n      content = renderUpdateEvent(event as UpdateFieldEvent);\n      break;\n    case Events.CONTACT_GROUPS_CHANGED:\n      content = renderContactGroupsEvent(event as ContactGroupsEvent);\n      break;\n    case Events.CONTACT_LANGUAGE_CHANGED:\n      content = renderContactLanguageChangedEvent(\n        event as ContactLanguageChangedEvent\n      );\n      break;\n    case Events.CONTACT_NAME_CHANGED:\n      content = renderNameChanged(event as NameChangedEvent);\n      break;\n    case Events.CONTACT_STATUS_CHANGED:\n      content = renderContactStatusChangedEvent(\n        event as ContactStatusChangedEvent\n      );\n      break;\n    case Events.CONTACT_URNS_CHANGED:\n      content = renderContactURNsChanged(event as URNsChangedEvent);\n      break;\n    case Events.INPUT_LABELS_ADDED:\n      content = renderInputLabelsAdded(event);\n      break;\n    case Events.RUN_RESULT_CHANGED:\n      content = renderRunResultChanged(event, isSimulation);\n      break;\n    case Events.OPTIN_REQUESTED:\n    case Events.OPTIN_STARTED:\n    case Events.OPTIN_STOPPED:\n      content = renderOptInEvent(event as OptInEvent);\n      break;\n    case Events.RUN_STARTED:\n    case Events.RUN_ENDED:\n    case Events.FLOW_ENTERED:\n      content = renderRunEvent(event as RunEvent);\n      break;\n    case Events.EMAIL_CREATED:\n    case Events.EMAIL_SENT:\n      content = renderEmailSent(event);\n      break;\n    case Events.BROADCAST_CREATED:\n      content = renderBroadcastCreated(event);\n      break;\n    case Events.SESSION_TRIGGERED:\n      content = renderSessionTriggered(event);\n      break;\n    case Events.RESTHOOK_CALLED:\n      content = renderResthookCalled(event);\n      break;\n    case Events.WEBHOOK_CALLED:\n      content = renderWebhookCalled(event);\n      break;\n    case Events.SERVICE_CALLED:\n      content = renderServiceCalled(event);\n      break;\n    case Events.TICKET_ASSIGNEE_CHANGED:\n      content = renderTicketAssigneeChanged(event as TicketEvent);\n      break;\n    case Events.TICKET_CLOSED:\n      content = renderTicketAction(event as TicketEvent, 'closed');\n      break;\n    case Events.TICKET_OPENED:\n      content = renderTicketAction(event as TicketEvent, 'opened');\n      break;\n    case Events.TICKET_NOTE_ADDED:\n      content = renderTicketAction(event as TicketEvent, 'noted');\n      break;\n    case Events.TICKET_REOPENED:\n      content = renderTicketAction(event as TicketEvent, 'reopened');\n      break;\n    case Events.TICKET_TOPIC_CHANGED:\n      content = html`<div>\n        Topic changed to <strong>${(event as TicketEvent).topic.name}</strong>\n      </div>`;\n      break;\n    default:\n      return null;\n  }\n\n  if (content === null) {\n    return null;\n  }\n\n  // wrap in a div with appropriate font size\n  const fontSize = isSimulation ? '11px' : '14px';\n  return html`<div style=\"font-size: ${fontSize}\">${content}</div>`;\n};\n\n/**\n * @deprecated Use renderEvent(event, true) instead\n */\nexport const renderSimulatorEvent = (event: any): TemplateResult | null => {\n  return renderEvent(event, true);\n};\n"]}

package/out-tsc/src/flow/Editor.js

@@ -90,6 +90,7 @@ export class Editor extends RapidElement {
         background-position: 10px 10px;
         width: 100%;
         display: flex;
+        padding-top: 20px;
       }
 
       #canvas {
@@ -190,13 +191,13 @@ export class Editor extends RapidElement {
         background: #3498db;
         border: 1px solid #2980b9;
         border-radius: 12px;
-        padding: 3px 5px;
+        padding: 3px 6px;
         color: #fff;
         font-weight: 500;
         top: -10px;
         left: -10px;
         font-size: 13px;
-        min-width: 22px;
+
         text-align: center;
         z-index: 600;
         line-height: 1;