@nyaruka/temba-components 0.129.2 → 0.129.3

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

@@ -1,17 +1,52 @@
 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) => {
-    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, action) => {
     const text = action.text.replace(/\n/g, '<br>');
@@ -33,9 +68,291 @@ 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">${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, 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 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/flow/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAYhE,MAAM,kBAAkB,GAAG,CAAC,MAAqB,EAAE,IAAa,EAAE,EAAE;IAClE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC1B,OAAO,IAAI,CAAA;QACP,IAAI;YACJ,CAAC,CAAC,IAAI,CAAA;mBACK,IAAI;;yBAEE;YACjB,CAAC,CAAC,IAAI;aACD,KAAK,CAAC,IAAI;WACZ,CAAC;IACV,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAU,EAAE,MAAe,EAAE,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAChD,OAAO,IAAI,CAAA;MACP,UAAU,CAAC,IAAI,CAAC;MAChB,MAAM,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;QAC/B,CAAC,CAAC,IAAI,CAAA;YACA,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACnC,OAAO,IAAI,CAAA,4BAA4B,KAAK,QAAQ,CAAC;QACvD,CAAC,CAAC;eACG;QACT,CAAC,CAAC,IAAI;GACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAU,EAAE,MAAsB,EAAE,EAAE;IACzE,OAAO,IAAI,CAAA,+BAA+B,MAAM,CAAC,IAAI,YAAY,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,IAAU,EAAE,MAAoB,EAAE,EAAE;IACrE,OAAO,IAAI,CAAA,aAAa,MAAM,CAAC,KAAK,UAAU,MAAM,CAAC,IAAI,YAAY,CAAC;AACxE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAE,MAAmB,EAAE,EAAE;IACnE,OAAO,IAAI,CAAA,sCAAsC,MAAM,CAAC,GAAG,QAAQ,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,IAAU,EAAE,MAAkB,EAAE,EAAE;IAClE,OAAO,IAAI,CAAA,QAAQ,kBAAkB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC;AACxE,CAAC,CAAC","sourcesContent":["import { html } from 'lit-html';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport {\n  AddToGroup,\n  CallWebhook,\n  Node,\n  NamedObject,\n  SendMsg,\n  SetContactName,\n  SetRunResult\n} from '../store/flow-definition';\n\nconst renderNamedObjects = (assets: NamedObject[], icon?: string) => {\n  return assets.map((asset) => {\n    return html`<div style=\"display:flex;items-align:center\">\n      ${icon\n        ? html`<temba-icon\n            name=${icon}\n            style=\"margin-right:0.5em\"\n          ></temba-icon>`\n        : null}\n      <div>${asset.name}</div>\n    </div>`;\n  });\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 style=\"word-break: break-all\">${action.url}</div>`;\n};\n\nexport const renderAddToGroups = (node: Node, action: AddToGroup) => {\n  return html`<div>${renderNamedObjects(action.groups, 'group')}</div>`;\n};\n"]}
+{"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"]}

package/out-tsc/src/{checkbox → form}/Checkbox.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { 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 {
     constructor() {
         super(...arguments);

package/out-tsc/src/form/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../Icons';\n\nexport class Checkbox extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n      }\n\n      :host([label]) {\n        width: 100%;\n      }\n\n      .wrapper.label {\n        padding: var(--checkbox-padding, 10px);\n        border-radius: var(--curvature);\n      }\n\n      .wrapper.label:hover {\n        background: var(--checkbox-hover-bg, #f9f9f9);\n      }\n\n      temba-field {\n        --help-text-margin-left: 24px;\n        cursor: pointer;\n      }\n\n      .checkbox-container {\n        cursor: pointer;\n        display: flex;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .checkbox-label {\n        font-family: var(--font-family);\n        padding: 0px;\n        margin-left: 8px;\n        font-size: 14px;\n        line-height: 19px;\n        flex-grow: 1;\n      }\n\n      .far {\n        height: 16px;\n        margin-top: 1px;\n      }\n\n      .disabled {\n        cursor: not-allowed;\n        --icon-color: #ccc;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  checked: boolean;\n\n  @property({ type: Boolean })\n  partial: boolean;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Number })\n  size = 1.2;\n\n  @property({ type: String })\n  animateChange = 'pulse';\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n    if (changes.has('checked') || changes.has('value')) {\n      if (this.checked || this.partial) {\n        this.internals.setFormValue(this.value || '1');\n      } else {\n        this.internals.setFormValue(undefined);\n      }\n      this.fireEvent('change');\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  private handleClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n\n  public click(): void {\n    this.handleClick();\n    super.click();\n  }\n\n  public render(): TemplateResult {\n    const icon = html`<temba-icon\n      name=\"${this.checked\n        ? Icon.checkbox_checked\n        : this.partial\n        ? Icon.checkbox_partial\n        : Icon.checkbox}\"\n      size=\"${this.size}\"\n      animatechange=\"${this.animateChange}\"\n    />`;\n\n    this.label = this.label ? this.label.trim() : null;\n\n    return html`\n      <div class=\"wrapper ${this.label ? 'label' : ''}\">\n        <temba-field\n          name=${this.name}\n          .helpText=${this.helpText}\n          .errors=${this.errors}\n          .widgetOnly=${this.widgetOnly}\n          .helpAlways=${true}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          <div class=\"checkbox-container ${this.disabled ? 'disabled' : ''}\">\n            ${icon}\n            ${this.label\n              ? html`<div class=\"checkbox-label\">${this.label}</div>`\n              : null}\n          </div>\n        </temba-field>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/{colorpicker → form}/ColorPicker.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { property } from 'lit/decorators.js';
 import { getClasses, hslToHex } from '../utils';
 export class ColorPicker extends FormElement {

package/out-tsc/src/form/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/form/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from './TextInput';\n\nexport class ColorPicker extends FormElement {\n  @property({ type: Boolean })\n  expanded = false;\n\n  @property({ type: String })\n  previewColor = '#ffffff';\n\n  @property({ type: String })\n  labelColor = '#ffffffee';\n\n  @property({ type: Boolean })\n  selecting = false;\n\n  @property({ type: Number }) hue: number;\n  @property({ type: Number }) saturation = 100;\n  @property({ type: Number }) lightness = 50;\n  @property({ type: String }) hex = '';\n\n  static get styles() {\n    return css`\n      :host {\n        color: var(--color-text);\n        display: inline-block;\n        --curvature: 0.55em;\n        width: 100%;\n\n        --temba-textinput-padding: 0.4em;\n      }\n\n      temba-textinput {\n        margin-left: 0.3em;\n        width: 5em;\n      }\n\n      temba-field {\n        display: block;\n        width: 100%;\n      }\n\n      .wrapper {\n        border: 1px solid var(--color-widget-border);\n        padding: calc(var(--curvature) / 2);\n        border-radius: calc(var(--curvature) * 1.5);\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n        display: flex;\n        flex-grow: 0;\n      }\n\n      .picker-wrapper {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 0;\n      }\n\n      .preview {\n        width: initial;\n        border-radius: var(--curvature);\n        padding: 0.2em 0.5em;\n        font-weight: 400;\n        border: 2px solid rgba(0, 0, 0, 0.1);\n        white-space: nowrap;\n        cursor: pointer;\n        transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n      }\n\n      .preview.selecting {\n        transform: scale(1.05);\n      }\n\n      .wrapper.expanded {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .picker-wrapper {\n        flex-grow: 1 !important;\n      }\n\n      .wrapper.expanded .preview {\n        pointer-events: none;\n      }\n\n      .wrapper.expanded .color-picker {\n        margin-left: calc(var(--curvature) / 2);\n      }\n\n      .wrapper.expanded temba-textinput {\n        display: block;\n      }\n\n      .color-picker {\n        border-radius: var(--curvature);\n        cursor: pointer;\n        transition: all calc(var(--transition-speed) * 2) var(--bounce);\n        flex-grow: 1;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        background-image: linear-gradient(\n            to bottom,\n            rgba(0, 0, 0, 0) 60%,\n            rgba(0, 0, 0, 0.5) 90%,\n            rgba(0, 0, 0, 1)\n          ),\n          linear-gradient(\n            to top,\n            rgba(255, 255, 255, 0) 60%,\n            rgba(255, 255, 255, 0.8) 90%,\n            rgba(255, 255, 255, 1)\n          ),\n          linear-gradient(\n            to right,\n            hsla(0, 100%, 50%, 1),\n            hsla(60, 100%, 50%, 1),\n            hsla(120, 100%, 50%, 1),\n            hsla(180, 100%, 50%, 1),\n            hsla(240, 100%, 50%, 1),\n            hsla(300, 100%, 50%, 1),\n            hsla(360, 100%, 50%, 1)\n          );\n        mix-blend-mode: multiply;\n      }\n\n      .color-picker:focus {\n        outline: none;\n      }\n    `;\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n  }\n\n  public updated(changed: Map<string, any>): void {\n    super.updated(changed);\n\n    if (changed.has('value')) {\n      this.previewColor = this.value || '#9c9c9c';\n      this.hex = this.value;\n    }\n\n    if (changed.has('selecting')) {\n      if (this.selecting) {\n        window.setTimeout(() => {\n          this.selecting = false;\n        }, 100);\n      }\n    }\n\n    if (changed.has('previewLabel') && this.hue) {\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handleBlur() {\n    if (this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private handleMouseOut() {\n    this.previewColor = this.value;\n    this.hex = this.value;\n  }\n\n  private handleMouseMove(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.hex = hslToHex(this.hue, this.saturation, this.lightness);\n    }\n  }\n\n  private handlePreviewClick() {\n    this.expanded = !this.expanded;\n    this.selecting = true;\n    (this.shadowRoot.querySelector('.color-picker') as HTMLDivElement).focus();\n  }\n\n  private handleColorClick(event: MouseEvent) {\n    if (this.expanded) {\n      const rect = (event.target as HTMLElement).getBoundingClientRect();\n      const x = event.clientX - rect.left;\n      const y = event.clientY - rect.top;\n      this.hue = (x / rect.width) * 360;\n      this.lightness = 100 - (y / rect.height) * 100;\n      this.previewColor = `hsla(${this.hue}, ${this.saturation}%, ${this.lightness}%, 1)`;\n      this.value = this.hex;\n      this.selecting = true;\n      this.expanded = false;\n    }\n\n    if (!this.expanded) {\n      //\n    }\n  }\n\n  private handleHexInput(event: InputEvent) {\n    const hex = (event.target as TextInput).value;\n    if (hex.startsWith('#')) {\n      this.previewColor = hex;\n      this.value = hex;\n    }\n  }\n\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public render() {\n    return html`\n      <temba-field\n        name=${this.name}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div style=\"display:flex\" tabindex=\"0\">\n          <div class=${getClasses({ wrapper: true, expanded: this.expanded })}>\n            <div class=${getClasses({ 'picker-wrapper': true })}>\n              <div\n                class=${getClasses({\n                  preview: true,\n                  selecting: this.selecting\n                })}\n                style=\"color:${this.labelColor};background:${this.previewColor}\"\n                @click=${this.handlePreviewClick}\n              >\n                ${this.label}\n              </div>\n              <div\n                class=\"color-picker\"\n                tabindex=\"0\"\n                @blur=${this.handleBlur}\n                @mousemove=${this.handleMouseMove}\n                @mouseout=${this.handleMouseOut}\n                @click=${this.handleColorClick}\n              ></div>\n            </div>\n            <temba-textinput\n              value=${this.hex}\n              @input=${this.handleHexInput}\n              placeholder=\"#000000\"\n            ></temba-textinput>\n          </div>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/{completion → form}/Completion.js

@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from './helpers';
-import { FormElement } from '../FormElement';
+import { renderCompletionOption, updateInputElementWithCompletion, executeCompletionQuery } from '../excellent/helpers';
+import { FormElement } from './FormElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { msg } from '@lit/localize';
 /**

package/out-tsc/src/form/Completion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Completion.js","sourceRoot":"","sources":["../../../src/form/Completion.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from './TextInput';\nimport {\n  renderCompletionOption,\n  updateInputElementWithCompletion,\n  executeCompletionQuery\n} from '../excellent/helpers';\n\nimport { FormElement } from './FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      temba-options {\n        --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n        --color-focus: #e6e6e6;\n      }\n\n      .comp-container {\n        position: relative;\n        height: 100%;\n      }\n\n      #anchor {\n        /* background: rgba(132, 40, 158, .1); */\n        position: absolute;\n        visibility: hidden;\n        width: 250px;\n        height: 20px;\n      }\n\n      .fn-marker {\n        font-weight: bold;\n        font-size: 42px;\n      }\n\n      .option-slot {\n        background: #fff;\n      }\n\n      .current-fn {\n        padding: 10px;\n        margin: 5px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        border-radius: var(--curvature-widget);\n        font-size: 90%;\n      }\n\n      .footer {\n        padding: 5px 10px;\n        background: var(--color-primary-light);\n        color: rgba(0, 0, 0, 0.5);\n        font-size: 80%;\n        border-bottom-left-radius: var(--curvature-widget);\n        border-bottom-right-radius: var(--curvature-widget);\n      }\n\n      code {\n        background: rgba(0, 0, 0, 0.1);\n        padding: 1px 5px;\n        border-radius: var(--curvature);\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  maxLength: number;\n\n  @property({ type: Boolean })\n  session: boolean;\n\n  @property({ type: Boolean })\n  submitOnEnter = false;\n\n  @property({ type: Object })\n  anchorPosition: Position = { left: 0, top: 0 };\n\n  @property({ attribute: false })\n  currentFunction: CompletionOption;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ attribute: false })\n  textInputElement: TextInput;\n\n  @property({ attribute: false })\n  anchorElement: HTMLDivElement;\n\n  @property({ type: Array })\n  options: any[] = [];\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: Boolean })\n  disableCompletion: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  private hiddenElement: HTMLInputElement;\n  private query: string;\n\n  public firstUpdated() {\n    this.textInputElement = this.shadowRoot.querySelector(\n      'temba-textinput'\n    ) as TextInput;\n    this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n    // create our hidden container so it gets included in our host element's form\n    this.hiddenElement = document.createElement('input');\n    this.hiddenElement.setAttribute('type', 'hidden');\n    this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n    this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n    this.appendChild(this.hiddenElement);\n  }\n\n  private handleKeyUp(evt: KeyboardEvent) {\n    if (this.disableCompletion) {\n      // if we have options, ignore keys that are meant for them\n      if (this.options && this.options.length > 0) {\n        if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n          return;\n        }\n\n        if (evt.ctrlKey) {\n          if (evt.key === 'n' || evt.key === 'p') {\n            return;\n          }\n        }\n\n        if (\n          evt.key === 'Enter' ||\n          evt.key === 'Escape' ||\n          evt.key === 'Tab' ||\n          evt.key.startsWith('Control')\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          return;\n        }\n\n        this.executeQuery(evt.currentTarget as TextInput);\n      }\n    }\n  }\n\n  public hasVisibleOptions() {\n    return this.options.length > 0;\n  }\n\n  private executeQuery(ele: TextInput) {\n    if (this.disableCompletion) {\n      return;\n    }\n\n    if (!ele.inputElement) {\n      return;\n    }\n\n    const result = executeCompletionQuery(ele.inputElement, this.session);\n\n    this.query = result.query;\n    this.options = result.options;\n    this.anchorPosition = result.anchorPosition;\n  }\n\n  private handleClick(evt: MouseEvent) {\n    this.executeQuery(evt.currentTarget as TextInput);\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    super.updated(changedProperties);\n\n    // if our cursor changed, lets make sure our scrollbox is showing it\n    if (changedProperties.has('value')) {\n      this.hiddenElement.setAttribute('value', this.value);\n    }\n  }\n\n  private handleInput(evt: KeyboardEvent) {\n    const ele = evt.currentTarget as TextInput;\n    this.executeQuery(ele);\n    this.value = ele.inputElement.value;\n    this.fireEvent('change');\n  }\n\n  private handleOptionCanceled() {\n    // delay in case we are actively selecting\n    window.setTimeout(() => {\n      this.options = [];\n      this.query = '';\n    }, 100);\n  }\n\n  private handleOptionSelection(evt: CustomEvent) {\n    const option = evt.detail.selected as CompletionOption;\n    const tabbed = evt.detail.tabbed;\n\n    updateInputElementWithCompletion(\n      this.query,\n      this.textInputElement.inputElement,\n      option\n    );\n    this.query = '';\n    this.options = [];\n\n    if (tabbed) {\n      this.executeQuery(this.textInputElement);\n    }\n  }\n\n  public getTextInput(): TextInput {\n    return this.textInputElement;\n  }\n\n  public click() {\n    super.click();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.click();\n    }\n  }\n\n  public focus() {\n    super.focus();\n    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n    if (input) {\n      input.focus();\n    }\n  }\n\n  public render(): TemplateResult {\n    const anchorStyles = this.anchorPosition\n      ? {\n          top: `${this.anchorPosition.top}px`,\n          left: `${this.anchorPosition.left}px`\n        }\n      : {};\n\n    const visible = this.options && this.options.length > 0;\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=${this.label}\n        .helpText=${this.helpText}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n      >\n        <div class=\"comp-container\">\n          <div id=\"anchor\" style=${styleMap(anchorStyles)}></div>\n          <temba-textinput\n            name=${this.name}\n            placeholder=${this.placeholder}\n            gsm=${this.gsm}\n            counter=${ifDefined(this.counter)}\n            @keyup=${this.handleKeyUp}\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @blur=${this.handleOptionCanceled}\n            maxlength=\"${ifDefined(this.maxLength)}\"\n            .value=${this.value}\n            ?autogrow=${this.autogrow}\n            ?textarea=${this.textarea}\n            ?submitOnEnter=${this.submitOnEnter}\n          >\n          </temba-textinput>\n          <temba-options\n            @temba-selection=${this.handleOptionSelection}\n            @temba-canceled=${this.handleOptionCanceled}\n            .renderOption=${renderCompletionOption}\n            .anchorTo=${this.anchorElement}\n            .options=${this.options}\n            ?visible=${visible}\n          >\n            ${this.currentFunction\n              ? html`\n                  <div class=\"current-fn\">\n                    ${renderCompletionOption(this.currentFunction, true)}\n                  </div>\n                `\n              : null}\n            <div class=\"footer\" style=\"${!visible ? 'display:none' : null}\">\n              ${msg('Tab to complete, enter to select')}\n            </div>\n          </temba-options>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/{compose → form}/Compose.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';

package/out-tsc/src/form/Compose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/form/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from './FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from './Completion';\nimport { Select } from './select/Select';\nimport { TabPane } from '../layout/TabPane';\nimport { MediaPicker } from './MediaPicker';\nimport { Tab } from '../layout/Tab';\nimport { TextInput } from './TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n  text: string;\n  attachments: { uuid: string }[];\n  quick_replies: string[];\n  optin: string;\n  template: string;\n  variables: string[];\n}\n\nexport class Compose extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        overflow: hidden;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature);\n      }\n\n      .active-template .chatbox {\n        display: none;\n      }\n\n      .active-template .actions {\n        border: none;\n      }\n\n      .container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        position: relative;\n        overflow: hidden;\n        border-radius: var(--compose-curvature, var(--curvature-widget));\n        background: var(--color-widget-bg);\n        border: var(--compose-border, 1px solid var(--color-widget-border));\n        transition: all ease-in-out var(--transition-speed);\n        box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n        caret-color: var(--input-caret);\n        --color-widget-bg-focused: transparent;\n        --color-widget-bg: transparent;\n      }\n\n      .chatbox {\n        --color-widget-border: none;\n        --curvature-widget: var(\n          --compose-curvature,\n          var(--curvature) var(--curvature) 0px 0px\n        );\n\n        --widget-box-shadow: none;\n        display: block;\n        flex-grow: 1;\n        --widget-box-shadow-focused: none;\n        --temba-textinput-padding: 1em 1em;\n      }\n\n      .actions {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 0em;\n        background: #f9f9f9;\n      }\n\n      .actions-right {\n        display: flex;\n        align-items: center;\n      }\n\n      temba-charcount {\n        margin-right: 5px;\n        overflow: hidden;\n        --temba-charcount-counts-margin-top: 0px;\n        --temba-charcount-summary-margin-top: 0px;\n        --temba-charcount-summary-position: fixed;\n        --temba-charcount-summary-right: 105px;\n        --temba-charcount-summary-bottom: 105px;\n      }\n\n      .send-error {\n        color: rgba(250, 0, 0, 0.75);\n        font-size: var(--help-text-size);\n        padding: 0.5em;\n      }\n\n      .language {\n        margin-bottom: 0.6em;\n        display: block;\n      }\n\n      .top-right {\n        align-items: center;\n        display: flex;\n      }\n\n      .gutter {\n        align-items: center;\n        display: flex;\n        margin: 0.5em;\n      }\n\n      temba-tabs {\n        --temba-tabs-border-bottom: none;\n        --temba-tabs-border-left: none;\n        --temba-tabs-border-right: none;\n        --temba-tabs-options-padding: 0.25em 0 0 0.25em;\n      }\n\n      temba-completion {\n        --textarea-min-height: 8em;\n      }\n\n      .quick-replies {\n        margin: 0.8em;\n      }\n\n      .optins {\n        margin: 0.8em;\n      }\n\n      .templates {\n        margin: 0.8em;\n      }\n\n      .attachments {\n        min-height: 5em;\n        padding: 0.2em;\n        align-items: center;\n        display: flex;\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        margin: 0.6em;\n        margin-bottom: 0em;\n      }\n\n      .pane-bottom {\n        border: 0px solid red;\n        --color-placeholder: rgba(0, 0, 0, 0.2);\n        flex-grow: 99;\n      }\n\n      .shortcut-wrapper {\n        max-height: var(--shortcuts-height, 12em);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        --options-block-shadow: none;\n        --curvature-widget: 0px;\n        --color-options-bg: #fff;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      temba-shortcuts {\n        flex-grow: 1;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  index = 1;\n\n  @property({ type: Number })\n  maxAttachments = 3;\n\n  @property({ type: Number })\n  maxLength = 640;\n\n  @property({ type: Number })\n  maxQuickReplies = 10;\n\n  @property({ type: Boolean })\n  completion: boolean;\n\n  @property({ type: Boolean })\n  attachments: boolean;\n\n  @property({ type: Boolean })\n  quickReplies: boolean;\n\n  @property({ type: Boolean })\n  optIns: boolean;\n\n  @property({ type: Boolean })\n  templates: boolean;\n\n  @property({ type: Boolean })\n  counter: boolean;\n\n  @property({ type: Boolean })\n  autogrow: boolean;\n\n  @property({ type: Boolean })\n  shortcuts: boolean;\n\n  @property({ type: String })\n  currentText = '';\n\n  @property({ type: String })\n  initialText = '';\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  @property({ type: Array })\n  languages: Language[] = [];\n\n  @property({ type: Array })\n  currentAttachments: Attachment[] = [];\n\n  @property({ type: Array })\n  currentQuickReplies: { name: string; value: string }[] = [];\n\n  @property({ type: Array })\n  currentOptin: { name: string; uuid: string }[] = [];\n\n  @property({ type: Array })\n  variables: string[] = [];\n\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  currentTemplate: { name: string; uuid: string };\n\n  // locale for the template\n  @property({ type: String })\n  locale: string;\n\n  @property({ type: String })\n  optinEndpoint = '/api/v2/optins.json';\n\n  @property({ type: String })\n  templateEndpoint = '/api/internal/templates.json';\n\n  @property({ type: Boolean, attribute: false })\n  empty = true;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly: boolean;\n\n  @property({ type: Array })\n  errors: string[];\n\n  @property({ type: Object })\n  langValues: {\n    [lang: string]: {\n      text: string;\n      attachments: Attachment[];\n      quick_replies: string[];\n      optin?: { name: string; uuid: string };\n      template?: string;\n      variables?: string[];\n      locale?: string;\n    };\n  } = {};\n\n  @property({ type: String })\n  currentLanguage = 'und';\n\n  @property({ type: Object })\n  currentTab: Tab;\n\n  @property({ type: Boolean })\n  hasPendingText = false;\n\n  @property({ type: Object })\n  activeShortcut: Shortcut;\n\n  public constructor() {\n    super();\n  }\n\n  private isBaseLanguage(): boolean {\n    return (\n      this.currentLanguage == 'und' ||\n      this.currentLanguage == this.languages[0].iso\n    );\n  }\n\n  private handleTabChanged() {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    this.currentTab = tabs.getCurrentTab();\n    if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = '';\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public firstUpdated(changes: Map<string, any>): void {\n    super.firstUpdated(changes);\n\n    if (changes.has('languages') && this.languages.length > 0) {\n      this.currentLanguage = this.languages[0].iso;\n    }\n\n    if (changes.has('value')) {\n      this.langValues = this.getDeserializedValue() || {};\n      this.variables = this.langValues[this.currentLanguage]?.variables || [];\n      this.template = this.langValues[this.currentLanguage]?.template || null;\n    }\n    this.setFocusOnChatbox();\n  }\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n\n    if (changes.has('currentLanguage') && this.langValues) {\n      let langValue = {\n        text: '',\n        attachments: [],\n        quick_replies: []\n      };\n\n      if (this.currentLanguage in this.langValues) {\n        langValue = this.langValues[this.currentLanguage];\n      }\n\n      this.currentText = langValue.text;\n      this.initialText = langValue.text;\n      this.currentAttachments = langValue.attachments;\n      this.currentQuickReplies = (langValue.quick_replies || []).map(\n        (value) => {\n          return { name: value, value };\n        }\n      );\n      this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n      this.setFocusOnChatbox();\n\n      // TODO: this feels like it shouldn't be needed\n      const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n      if (chatbox) {\n        chatbox.value = this.initialText;\n      }\n      this.resetTabs();\n      this.requestUpdate('currentAttachments');\n    }\n\n    if (\n      (this.langValues &&\n        (changes.has('currentText') ||\n          changes.has('currentAttachments') ||\n          changes.has('currentQuickReplies'))) ||\n      changes.has('currentOptin') ||\n      changes.has('currentTemplate') ||\n      changes.has('variables')\n    ) {\n      this.checkIfEmpty();\n\n      const trimmed = this.currentText ? this.currentText.trim() : '';\n      if (\n        trimmed ||\n        (this.currentAttachments || []).length > 0 ||\n        this.currentQuickReplies.length > 0 ||\n        this.variables.length > 0\n      ) {\n        this.langValues[this.currentLanguage] = {\n          text: trimmed,\n          attachments: this.currentAttachments,\n          quick_replies: this.currentQuickReplies.map((option) => option.value),\n          optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n          template: this.currentTemplate ? this.currentTemplate.uuid : null,\n          variables: this.variables,\n          locale: this.locale\n        };\n      } else {\n        delete this.langValues[this.currentLanguage];\n      }\n      this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n      this.requestUpdate('langValues');\n      this.setValue(this.langValues);\n    }\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    this.currentAttachments = media.attachments;\n    this.requestUpdate();\n  }\n\n  private setFocusOnChatbox(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      window.setTimeout(() => {\n        completion.focus();\n      }, 0);\n    }\n  }\n\n  public reset(): void {\n    const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n    if (completion) {\n      completion.textInputElement.value = '';\n      completion.value = '';\n      this.initialText = '';\n      this.currentText = '';\n      this.currentQuickReplies = [];\n      this.currentAttachments = [];\n      this.resetTabs();\n    }\n  }\n\n  private handleQuickReplyChange() {\n    this.requestUpdate('currentQuickReplies');\n  }\n\n  private handleOptInChange(event: InputEvent) {\n    this.currentOptin = (event.target as any).values;\n    this.requestUpdate('optIn');\n  }\n\n  private handleChatboxChange(evt: Event) {\n    const chatbox = evt.target as Completion;\n    const inputElement = chatbox.getTextInput().inputElement;\n\n    this.currentText = inputElement.value;\n    this.hasPendingText = inputElement.value.length > 0;\n\n    // is the last character a / and is it at the beginning of the line\n    const cursor = inputElement.selectionStart;\n    const text = inputElement.value;\n    const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n    const line = text.substring(lineStart, cursor);\n\n    if (line.startsWith('/')) {\n      // switch to the shortcuts tab\n      if (this.currentTab.name !== 'Shortcuts') {\n        this.getTabs().focusTab('Shortcuts');\n      }\n      const shortcuts = this.shadowRoot.querySelector(\n        'temba-shortcuts'\n      ) as ShortcutList;\n      shortcuts.filter = line.substring(1);\n    }\n  }\n\n  public checkIfEmpty() {\n    const chatboxEmpty = this.currentText.trim().length === 0;\n    const attachmentsEmpty = this.currentAttachments.length === 0;\n    if (this.attachments) {\n      this.empty = chatboxEmpty && attachmentsEmpty;\n    } else {\n      this.empty = chatboxEmpty;\n    }\n  }\n\n  private getCurrentLine(): { text: string; index: number } {\n    const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n    const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n    const text = chatbox.value;\n    const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n    let end = chatbox.value.indexOf('\\n', start);\n    if (end === -1) {\n      end = chatbox.value.length;\n    }\n\n    return { text: chatbox.value.substring(start, end), index: start };\n  }\n\n  private handleKeyDown(evt: KeyboardEvent) {\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    const num = parseInt(evt.key);\n    if (\n      !Number.isNaN(num) &&\n      num > 0 &&\n      evt.ctrlKey &&\n      evt.metaKey &&\n      num <= tabs.options.length\n    ) {\n      tabs.index = num - 1;\n    }\n\n    if (evt.key === 'Backspace') {\n      const line = this.getCurrentLine();\n      const text = line.text;\n      if (text === '/') {\n        tabs.focusTab('Reply');\n      }\n    }\n\n    if (this.currentTab.name === 'Shortcuts') {\n      if (evt.key === 'Enter' && !evt.shiftKey) {\n        return;\n      }\n    }\n\n    if (evt.key === 'Enter') {\n      if (!evt.shiftKey) {\n        evt.preventDefault();\n        if (this.completion) {\n          const chat = evt.target as Completion;\n          if (!chat.hasVisibleOptions()) {\n            this.triggerSend();\n          }\n        } else {\n          this.triggerSend();\n        }\n      }\n    }\n  }\n\n  public triggerSend() {\n    if (!this.empty) {\n      this.fireCustomEvent(CustomEventType.Submitted, {\n        langValues: this.langValues\n      });\n    }\n  }\n\n  private handleLanguageChange(evt: Event) {\n    const select = evt.target as Select<any>;\n    this.currentLanguage = select.values[0].iso;\n  }\n\n  public resetTabs() {\n    this.getTabs().focusTab('Reply');\n  }\n\n  public getTabs(): TabPane {\n    return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <temba-field\n        name=${this.name}\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .value=${this.value}\n        class=${getClasses({\n          'active-template':\n            !!this.currentTemplate &&\n            this.currentTab &&\n            this.currentTab.name === 'Template'\n        })}\n      >\n        ${this.languages.length > 1\n          ? html`<temba-select\n              @change=${this.handleLanguageChange}\n              class=\"language\"\n              name=\"language\"\n              .staticOptions=${this.languages}\n              valueKey=\"iso\"\n            >\n            </temba-select>`\n          : null}\n        <div class=\"container\">\n          <div class=\"items actions\">${this.getActions()}</div>\n        </div>\n      </temba-field>\n    `;\n  }\n\n  private handleTemplateChanged(evt: CustomEvent) {\n    this.currentTemplate = evt.detail.template;\n    this.locale = evt.detail.translation?.locale;\n    this.requestUpdate();\n  }\n\n  private handleTemplateVariablesChanged(evt: CustomEvent) {\n    this.variables = [...evt.detail.variables];\n  }\n\n  public getTextInput(): TextInput {\n    return (\n      this.shadowRoot.querySelector('.chatbox') as Completion\n    ).getTextInput();\n  }\n\n  public handleShortcutSelection(event: CustomEvent) {\n    this.activeShortcut = event.detail.selected;\n    const line = this.getCurrentLine();\n    const chatbox = this.getTextInput();\n\n    const originalText = chatbox.value;\n\n    if (line.text.startsWith('/')) {\n      const newText =\n        originalText.substring(0, line.index) +\n        this.activeShortcut.text +\n        originalText.substring(line.index + line.text.length);\n\n      chatbox.updateValue(newText);\n\n      // set our cursor to the end of the shortcut\n      const cursor = line.index + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(cursor, cursor);\n    } else {\n      // add the text where the cursor is\n      const cursor = chatbox.inputElement.selectionStart;\n      const newText =\n        originalText.substring(0, cursor) +\n        this.activeShortcut.text +\n        originalText.substring(cursor);\n      chatbox.updateValue(newText);\n\n      // set the cursor to the end of the shortcut text\n      const newCursor = cursor + this.activeShortcut.text.length;\n      chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n    }\n\n    const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n    tabs.index = tabs.options.findIndex((tab) => tab.name === 'Reply');\n  }\n\n  private getActions(): TemplateResult {\n    const showOptins = this.optIns && this.isBaseLanguage();\n    const showTemplates = this.templates && this.isBaseLanguage();\n    return html`\n      <temba-tabs\n        focusedname\n        @temba-context-changed=${this.handleTabChanged}\n        refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n          .currentQuickReplies.length}|${showOptins}|${this\n          .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n      >\n        <temba-tab\n          name=\"Reply\"\n          icon=\"message\"\n          selectionBackground=\"#fff\"\n        ></temba-tab>\n        ${this.attachments\n          ? html`<temba-tab\n              name=\"Attachments\"\n              icon=\"attachment\"\n              selectionBackground=\"#fff\"\n              .count=${(this.currentAttachments || []).length}\n            >\n              <div class=\"items attachments\">\n                <temba-media-picker\n                  accept=${this.accept}\n                  max=${this.maxAttachments}\n                  attachments=${JSON.stringify(this.currentAttachments || [])}\n                  @change=${this.handleAttachmentsChanged.bind(this)}\n                ></temba-media-picker>\n              </div>\n            </temba-tab>`\n          : null}\n        ${this.quickReplies\n          ? html`<temba-tab\n              name=\"Quick Replies\"\n              icon=\"quick_replies\"\n              selectionBackground=\"#fff\"\n              .count=${this.currentQuickReplies.length}\n            >\n              <temba-select\n                @change=${this.handleQuickReplyChange}\n                .values=${this.currentQuickReplies}\n                maxItems=${this.maxQuickReplies}\n                maxItemsText=\"You can only add ${this\n                  .maxQuickReplies} Quick Replies\"\n                class=\"quick-replies\"\n                tags\n                multi\n                searchable\n                expressions\n                placeholder=\"Add Quick Reply\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showOptins\n          ? html`<temba-tab\n              name=\"Opt-in\"\n              icon=\"channel_fba\"\n              selectionBackground=\"#fff\"\n              ?hidden=${!showOptins}\n              ?checked=${this.currentOptin.length > 0}\n            >\n              <temba-select\n                @change=${this.handleOptInChange}\n                .values=${this.currentOptin}\n                endpoint=\"${this.optinEndpoint}\"\n                valueKey=\"uuid\"\n                class=\"optins\"\n                searchable\n                clearable\n                placeholder=\"Select an opt-in to use for Facebook (optional)\"\n              ></temba-select>\n            </temba-tab>`\n          : null}\n        ${showTemplates\n          ? html`<temba-tab\n              name=\"Template\"\n              icon=\"channel_wa\"\n              selectionBackground=\"#fff\"\n              ?alert=${this.errors &&\n              this.errors.find((error) => error.includes('template'))}\n              ?hidden=${!showTemplates}\n              ?checked=${this.currentTemplate}\n            >\n              <temba-template-editor\n                class=\"templates\"\n                @temba-context-changed=${this.handleTemplateChanged}\n                @temba-content-changed=${this.handleTemplateVariablesChanged}\n                template=${this.template}\n                variables=${JSON.stringify(this.variables)}\n                url=${this.templateEndpoint}\n                lang=${this.currentLanguage}\n              >\n              </temba-template-editor>\n            </temba-tab>`\n          : null}\n\n        <!--temba-tab\n          name=\"Note\"\n          icon=\"notes\"\n          activityColor=\"#ffbd00\"\n          selectionBackground=\"#fff9c2\"\n          borderColor=\"#ebdf6f\"\n        ></temba-tab-->\n\n        ${this.shortcuts\n          ? html`<temba-tab\n              name=\"Shortcuts\"\n              icon=\"shortcut\"\n              selectionBackground=\"#fff\"\n            >\n              <div class=\"shortcut-wrapper\">\n                <temba-shortcuts\n                  @temba-selection=${this.handleShortcutSelection}\n                ></temba-shortcuts>\n              </div>\n            </temba-tab>`\n          : null}\n\n        <div slot=\"tab-right\" class=\"top-right\">\n          ${this.counter ? this.getCounter() : null}\n        </div>\n\n        <div\n          slot=\"pane-bottom\"\n          class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n        >\n          <temba-completion\n            class=\"chatbox\"\n            .value=${this.initialText}\n            gsm\n            textarea\n            ?disableCompletion=${!this.completion}\n            ?autogrow=${this.autogrow}\n            maxlength=${this.maxLength}\n            @change=${this.handleChatboxChange}\n            @keydown=${this.handleKeyDown}\n            placeholder=\"Write something here\"\n          >\n          </temba-completion>\n        </div>\n      </temba-tabs>\n    `;\n  }\n\n  private getCounter(): TemplateResult {\n    return html`<temba-charcount\n      .text=\"${this.currentText}\"\n    ></temba-charcount>`;\n  }\n}\n"]}