@nyaruka/temba-components 0.129.3 → 0.129.5

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

@@ -1,358 +0,0 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { Icon } from '../Icons';
-// URN scheme mapping for user-friendly display
-const urnSchemeMap = {
-    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, icon) => {
-    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, icon) => {
-    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 `<div style="margin-right:0.5em; width: 1em;"></div>` // spacing placeholder
-            : null}
-      <div>+${remainingCount} more</div>
-    </div>`);
-    }
-    return items;
-};
-export const renderSendMsg = (node, action) => {
-    const text = action.text.replace(/\n/g, '<br>');
-    return html `
-    ${unsafeHTML(text)}
-    ${action.quick_replies.length > 0
-        ? html `<div class="quick-replies">
-          ${action.quick_replies.map((reply) => {
-            return html `<div class="quick-reply">${reply}</div>`;
-        })}
-        </div>`
-        : null}
-  `;
-};
-export const renderSetContactName = (node, action) => {
-    return html `<div>Set contact name to <b>${action.name}</b></div>`;
-};
-export const renderSetRunResult = (node, action) => {
-    return html `<div>Save ${action.value} as <b>${action.name}</b></div>`;
-};
-export const renderCallWebhook = (node, action) => {
-    return html `<div
-    style="word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-  >
-    ${action.url}
-  </div>`;
-};
-export const renderAddToGroups = (node, action) => {
-    return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
-};
-export const renderRemoveFromGroups = (node, action) => {
-    return html `<div>${renderNamedObjects(action.groups, 'group')}</div>`;
-};
-export const renderSetContactField = (node, action) => {
-    return html `<div>
-    Set <b>${action.field.name}</b> to <b>${action.value}</b>
-  </div>`;
-};
-export const renderSetContactLanguage = (node, action) => {
-    return html `<div>Set contact language to <b>${action.language}</b></div>`;
-};
-export const renderSetContactStatus = (node, action) => {
-    return html `<div>Set contact status to <b>${action.status}</b></div>`;
-};
-export const renderSetContactChannel = (node, action) => {
-    return html `<div>Set contact channel to <b>${action.channel.name}</b></div>`;
-};
-export const renderAddContactUrn = (node, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    return html `<div>Enter flow <b>${action.flow.name}</b></div>`;
-};
-export const renderStartSession = (node, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    return html `<div>Request opt-in for <b>${action.optin.name}</b></div>`;
-};
-export const renderAddInputLabels = (node, action) => {
-    return html `<div>${renderNamedObjects(action.labels, 'label')}</div>`;
-};
-export const renderSayMsg = (node, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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, action) => {
-    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>`;
-};
-//# sourceMappingURL=render.js.map

package/out-tsc/src/flow/render.js.map

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