npm - @nyaruka/temba-components - Versions diffs - 0.129.5 → 0.129.7 - Mend

@nyaruka/temba-components 0.129.5 → 0.129.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -4,9 +4,34 @@ All notable changes to this project will be documented in this file. Dates are d
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
-#### [v0.129.5](https://github.com/nyaruka/temba-components/compare/v0.129.3...v0.129.5)
+#### [v0.129.7](https://github.com/nyaruka/temba-components/compare/v0.129.6...v0.129.7)
+- Fix rendering of airtime transfer events [`#656`](https://github.com/nyaruka/temba-components/pull/656)
+- Update some flow def, show wa templates, fix exit clicks [`#652`](https://github.com/nyaruka/temba-components/pull/652)
+- Flow example list page [`#651`](https://github.com/nyaruka/temba-components/pull/651)
+- Support multiple flow examples [`932de08`](https://github.com/nyaruka/temba-components/commit/932de08987089145781dd9756ef9a8752f630ccb)
+- Update screenshots [`7ee7687`](https://github.com/nyaruka/temba-components/commit/7ee76872923341ba310ccfe99cea1a939d72d9f3)
+- Use json for flow list [`208f26e`](https://github.com/nyaruka/temba-components/commit/208f26ead8060ebeedac68f4d50a9ade2f7fc4e6)
+#### [v0.129.6](https://github.com/nyaruka/temba-components/compare/v0.129.5...v0.129.6)
+> 12 August 2025
+- Fix message event to use ID for chatevent [`#650`](https://github.com/nyaruka/temba-components/pull/650)
+#### [v0.129.5](https://github.com/nyaruka/temba-components/compare/v0.129.4...v0.129.5)
+> 12 August 2025
 - Don't trigger ref change on internal values change for Select [`#648`](https://github.com/nyaruka/temba-components/pull/648)
+- Fixes for select change events [`cbb301f`](https://github.com/nyaruka/temba-components/commit/cbb301f372e5b7a17193365c2fc9392f4b0c7bf9)
+- Remove unneccessary change [`7ab2e16`](https://github.com/nyaruka/temba-components/commit/7ab2e16686f805592c96f686ef67cbf31882fe3f)
+- Update sample flow formatting [`c5b7554`](https://github.com/nyaruka/temba-components/commit/c5b75540e26b0ea0d775793af4259563af501f82)
+#### [v0.129.4](https://github.com/nyaruka/temba-components/compare/v0.129.3...v0.129.4)
+> 11 August 2025
 - Cleanup unused chat event types and remove some unused properties on other types [`#647`](https://github.com/nyaruka/temba-components/pull/647)
 - Nestable form layouts [`#644`](https://github.com/nyaruka/temba-components/pull/644)
 - Add KeyValueEditor and field config abstraction [`#643`](https://github.com/nyaruka/temba-components/pull/643)

package/demo/components/flow/example.html CHANGED Viewed

@@ -37,10 +37,17 @@
   </head>
   <body>
     <temba-store></temba-store>
-    <temba-flow-editor flow="sample-flow"></temba-flow-editor>
+    <temba-flow-editor id="flow-editor"></temba-flow-editor>
     <script type="module">
       import '/out-tsc/temba-modules.js';
+      // Get flow parameter from URL, default to 'sample-flow'
+      const urlParams = new URLSearchParams(window.location.search);
+      const flowName = urlParams.get('flow') || 'sample-flow';
+      // Set the flow attribute on the editor
+      document.getElementById('flow-editor').setAttribute('flow', flowName);
     </script>
   </body>
 </html>

package/demo/components/flow/index.html ADDED Viewed

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Flow Editor Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="../../styles.css" rel="stylesheet" type="text/css" />
+    <style>
+      .flow-list {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 40px 20px;
+      }
+      .flow-card {
+        background: white;
+        border: 1px solid #e1e5e9;
+        border-radius: 8px;
+        padding: 24px;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.2s ease;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .flow-card:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+      .flow-title {
+        font-size: 1.5em;
+        font-weight: 500;
+        color: #2c3e50;
+        margin: 0;
+      }
+      .flow-link {
+        display: inline-block;
+        background: #3498db;
+        color: white;
+        padding: 12px 24px;
+        text-decoration: none;
+        border-radius: 4px;
+        font-weight: 500;
+        transition: background-color 0.2s ease;
+      }
+      .flow-link:hover {
+        background: #2980b9;
+        color: white;
+      }
+      .back-link {
+        display: inline-block;
+        margin-bottom: 24px;
+        color: #3498db;
+        text-decoration: none;
+      }
+      .back-link:hover {
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="flow-list">
+      <a href="../../index.html" class="back-link">← Back to Component Demos</a>
+      <h1>Flow Editor Examples</h1>
+      <p>
+        Choose a flow to open in the Flow Editor. Each flow demonstrates
+        different features and capabilities.
+      </p>
+      <div id="flow-cards">
+        <div class="flow-card">
+          <div class="flow-title">Loading flows...</div>
+        </div>
+      </div>
+    </div>
+    <script type="module">
+      // Function to load and display flows dynamically
+      async function loadFlows() {
+        const flowCardsContainer = document.getElementById('flow-cards');
+        try {
+          // Get list of flow files from the flows directory API
+          const response = await fetch('/api/flows-list');
+          const files = await response.json();
+          if (!Array.isArray(files) || files.length === 0) {
+            // Fallback: try known flows if directory listing doesn't work
+            await loadKnownFlows(flowCardsContainer);
+            return;
+          }
+          const flows = [];
+          // Load each flow file to get its definition
+          for (const fileName of files) {
+            const flowId = fileName.replace('.json', '');
+            try {
+              const flowResponse = await fetch(`/demo/data/flows/${fileName}`);
+              const flowData = await flowResponse.json();
+              const flowName = flowData.definition?.name || flowId;
+              flows.push({
+                id: flowId,
+                name: flowName
+              });
+            } catch (error) {
+              console.warn(`Failed to load flow ${fileName}:`, error);
+              // Add with fallback name
+              flows.push({
+                id: flowId,
+                name: flowId
+                  .replace('-', ' ')
+                  .replace(/\b\w/g, (l) => l.toUpperCase())
+              });
+            }
+          }
+          displayFlows(flows, flowCardsContainer);
+        } catch (error) {
+          console.warn(
+            'Failed to load flows from directory, using fallback:',
+            error
+          );
+          // await loadKnownFlows(flowCardsContainer);
+        }
+      }
+      // Fallback function for known flows
+      async function loadKnownFlows(container) {
+        const knownFlows = ['sample-flow', 'food-order'];
+        const flows = [];
+        for (const flowId of knownFlows) {
+          try {
+            const response = await fetch(`/demo/data/flows/${flowId}.json`);
+            const flowData = await response.json();
+            const flowName = flowData.definition?.name || flowId;
+            flows.push({
+              id: flowId,
+              name: flowName
+            });
+          } catch (error) {
+            console.warn(`Failed to load flow ${flowId}:`, error);
+          }
+        }
+        displayFlows(flows, container);
+      }
+      // Function to display flows in the UI
+      function displayFlows(flows, container) {
+        if (flows.length === 0) {
+          container.innerHTML = `
+            <div class="flow-card">
+              <div class="flow-title">No flows found</div>
+            </div>
+          `;
+          return;
+        }
+        container.innerHTML = flows
+          .map(
+            (flow) => `
+          <div class="flow-card">
+            <div class="flow-title">${escapeHtml(flow.name)}</div>
+            <a href="example.html?flow=${encodeURIComponent(
+              flow.id
+            )}" class="flow-link">
+              Open Flow
+            </a>
+          </div>
+        `
+          )
+          .join('');
+      }
+      // Helper function to escape HTML
+      function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+      }
+      // Load flows when the page loads
+      loadFlows();
+    </script>
+  </body>
+</html>

package/demo/data/flows/food-order.json ADDED Viewed

@@ -0,0 +1,141 @@
+{
+  "definition": {
+    "_ui": {
+      "nodes": {
+        "b01610c8-d6dc-4bdb-9439-5713cdcf9afa": {
+          "position": {
+            "left": 80,
+            "top": 80
+          },
+          "type": "execute_actions"
+        },
+        "3b28a90f-27be-4753-b0c0-3e98b83f0627": {
+          "type": "wait_for_response",
+          "position": {
+            "left": 80,
+            "top": 260
+          },
+          "config": {
+            "cases": {}
+          }
+        }
+      },
+      "stickies": {
+        "b1cb8cfa-8432-444c-bd48-3fd2cb3a014f": {
+          "position": {
+            "left": 340,
+            "top": 120
+          },
+          "title": "Long awaited note",
+          "body": "This is the body of a note that I have been waiting to write for a very long time. Now I am able to add it to my flow and that makes me very happy.",
+          "color": "blue"
+        }
+      }
+    },
+    "expire_after_minutes": 10080,
+    "language": "eng",
+    "localization": {},
+    "name": "Food Order",
+    "nodes": [
+      {
+        "uuid": "b01610c8-d6dc-4bdb-9439-5713cdcf9afa",
+        "actions": [
+          {
+            "attachments": [
+              "image/jpeg:http://minio:9000/temba-default/orgs/1/media/495c/495c33e3-237e-4c36-b854-6ca609839e3a/intro-1745448388.jpg",
+              "image:@fields.profile_pic"
+            ],
+            "text": "Chicken or fish?",
+            "type": "send_msg",
+            "quick_replies": [
+              "Chicken",
+              "Fish"
+            ],
+            "uuid": "90957b4e-05a4-4d00-8163-47046f81246d",
+            "template": {
+              "uuid": "b5e47571-4ee7-4e9e-b48f-1c4efd4d6429",
+              "name": "Dinner Menu"
+            },
+            "template_variables": [
+              "Food",
+              "@contact.name",
+              "Chicken",
+              "Fish",
+              "Rowan"
+            ]
+          }
+        ],
+        "exits": [
+          {
+            "uuid": "87e6cd04-4dd7-44e7-b517-3f3fa63e837e",
+            "destination_uuid": "3b28a90f-27be-4753-b0c0-3e98b83f0627"
+          }
+        ]
+      },
+      {
+        "uuid": "3b28a90f-27be-4753-b0c0-3e98b83f0627",
+        "actions": [],
+        "router": {
+          "type": "switch",
+          "default_category_uuid": "706df9a8-9f55-446f-9212-2493da1b42c2",
+          "cases": [
+            {
+              "arguments": [
+                "chicken 🐔"
+              ],
+              "type": "has_any_word",
+              "uuid": "a0046472-2a86-4c1f-b02d-a63a98abb5e3",
+              "category_uuid": "6f4689dd-6a8b-454c-a1db-192de1c283ee"
+            },
+            {
+              "arguments": [
+                "fish 🐟"
+              ],
+              "type": "has_any_word",
+              "uuid": "2f8fbf02-80cd-4b26-b7d7-709e8681d2ce",
+              "category_uuid": "390bbb17-49fd-4253-ac7f-6a27ef240b56"
+            }
+          ],
+          "categories": [
+            {
+              "uuid": "6f4689dd-6a8b-454c-a1db-192de1c283ee",
+              "name": "🐔",
+              "exit_uuid": "9e84e680-a710-4894-a838-dd22a8dcc341"
+            },
+            {
+              "uuid": "390bbb17-49fd-4253-ac7f-6a27ef240b56",
+              "name": "🐟",
+              "exit_uuid": "12043e9e-7aa0-41fd-8f04-e0d42a0c2099"
+            },
+            {
+              "uuid": "706df9a8-9f55-446f-9212-2493da1b42c2",
+              "name": "Other",
+              "exit_uuid": "79b6a4e6-1a00-44cc-9fd4-2d9ba2a394e0"
+            }
+          ],
+          "operand": "@input.text",
+          "wait": {
+            "type": "msg"
+          },
+          "result_name": "Order"
+        },
+        "exits": [
+          {
+            "uuid": "9e84e680-a710-4894-a838-dd22a8dcc341"
+          },
+          {
+            "uuid": "12043e9e-7aa0-41fd-8f04-e0d42a0c2099"
+          },
+          {
+            "uuid": "79b6a4e6-1a00-44cc-9fd4-2d9ba2a394e0",
+            "destination_uuid": null
+          }
+        ]
+      }
+    ],
+    "spec_version": "14.3.0",
+    "type": "messaging",
+    "uuid": "8f1fa2e3-740a-4f06-b67b-d521643eb52b",
+    "revision": 50
+  }
+}

package/demo/data/flows/sample-flow.json CHANGED Viewed

@@ -181,15 +181,6 @@
       {
         "uuid": "4efc49e0-ebfe-454d-a1a0-900a911dd5ef",
         "actions": [
-          {
-            "uuid": "9963160a-a007-4c7b-8c9e-7325e1b69ed8",
-            "type": "send_msg",
-            "text": "Excellent choices.",
-            "quick_replies": [
-              "blooooop",
-              "bleep"
-            ]
-          },
           {
             "uuid": "ffe1c2d3-4e5f-6a7b-8c9d-e0f1a2b3c4d5",
             "type": "remove_contact_groups",
@@ -230,6 +221,15 @@
             ],
             "all_groups": false
           },
+          {
+            "uuid": "9963160a-a007-4c7b-8c9e-7325e1b69ed8",
+            "type": "send_msg",
+            "text": "Excellent choices.",
+            "quick_replies": [
+              "blooooop",
+              "bleep"
+            ]
+          },
           {
             "uuid": "d1ca86da-f321-4e09-8bb2-981de03f5a90",
             "type": "add_contact_groups",
@@ -907,14 +907,14 @@
         "3dfe9cf2-72d1-496f-8d20-d5743af0f9c8": {
           "type": "split_by_llm",
           "position": {
-            "left": 580,
-            "top": 1040
+            "left": 520,
+            "top": 1020
           },
           "config": {}
         },
         "425c4757-bead-440f-92aa-a1cc3fcd7d35": {
           "position": {
-            "left": 620,
+            "left": 760,
             "top": 840
           },
           "type": "execute_actions"
@@ -922,8 +922,8 @@
         "21ff86c2-5276-4448-afb6-54d1f832ba0c": {
           "type": "split_by_ticket",
           "position": {
-            "left": 920,
-            "top": 900
+            "left": 820,
+            "top": 980
           },
           "config": {}
         }

package/demo/index.html CHANGED Viewed

@@ -175,7 +175,7 @@
             A work in progress editor for RapidPro flows to replace existing
             react editor.
           </p>
-          <a href="components/flow/example.html">Example</a>
+          <a href="components/flow/index.html">Examples</a>
         </div>
         <div class="component-card">

package/dist/temba-components.js CHANGED Viewed

@@ -2725,7 +2725,7 @@ let Ar=rr,Mr=!1;const Tr=["es","fr","pt"],Pr="data:image/png;base64,iVBORw0KGgoA
       </div>
       <slot class="header" name="header"></slot>
       <slot class="footer" name="footer"></slot>
-    </div>`}}var Gc;t([xe({type:Array})],Wc.prototype,"messageGroups",void 0),t([xe({type:Boolean})],Wc.prototype,"fetching",void 0),t([xe({type:Boolean,attribute:!1})],Wc.prototype,"hideTopScroll",void 0),t([xe({type:Boolean,attribute:!1})],Wc.prototype,"hideBottomScroll",void 0),t([xe({type:String,attribute:"avatar"})],Wc.prototype,"defaultAvatar",void 0),t([xe({type:Boolean})],Wc.prototype,"agent",void 0),function(t){t.send="send-03",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder"}(Gc||(Gc={}));var Zc;!function(t){t.MESSAGE_CREATED="msg_created",t.MESSAGE_RECEIVED="msg_received",t.BROADCAST_CREATED="broadcast_created",t.IVR_CREATED="ivr_created",t.FLOW_ENTERED="flow_entered",t.FLOW_EXITED="flow_exited",t.CONTACT_FIELD_CHANGED="contact_field_changed",t.CONTACT_GROUPS_CHANGED="contact_groups_changed",t.CONTACT_NAME_CHANGED="contact_name_changed",t.CONTACT_URNS_CHANGED="contact_urns_changed",t.CHANNEL_EVENT="channel_event",t.CONTACT_LANGUAGE_CHANGED="contact_language_changed",t.AIRTIME_TRANSFERRED="airtime_transferred",t.CALL_STARTED="call_started",t.NOTE_CREATED="note_created",t.TICKET_ASSIGNED="ticket_assigned",t.TICKET_NOTE_ADDED="ticket_note_added",t.TICKET_CLOSED="ticket_closed",t.TICKET_OPENED="ticket_opened",t.TICKET_REOPENED="ticket_reopened",t.TICKET_TOPIC_CHANGED="ticket_topic_changed",t.OPTIN_REQUESTED="optin_requested"}(Zc||(Zc={}));const Yc=(t,e,i)=>{if(1===i.length)return`${t} **${i[0].name}**`;{const t=i.map((t=>`**${t.name}**`));if(2===t.length)return`${e} ${t.join(" and ")}`;{const i=t.pop();return`${e} ${t.join(", ")}, and ${i}`}}},Xc=t=>{var e,i;return"mt_miss"===t.event.type?"Missed outgoing call":"mo_miss"===t.event.type?"Missed incoming call":"new_conversation"===t.event.type?"Started conversation":"welcome_message"===t.channel_event_type?"Welcome Message Sent":"referral"===t.event.type?"Referred":"follow"===t.event.type?"Followed":"stop_contact"===t.event.type?"Stopped":"mt_call"===t.event.type?"Outgoing Phone Call":"mo_call"==t.event.type?"Incoming Phone call":"optin"==t.event.type?`Opted in to **${null===(e=t.event.optin)||void 0===e?void 0:e.name}**`:"optout"==t.event.type?`Opted out of **${null===(i=t.event.optin)||void 0===i?void 0:i.name}**`:void 0},Kc=t=>{let e="Interrupted";return"I"!==t.status&&(e=t.type===Zc.FLOW_ENTERED?"Started":"Completed"),`${e} [**${t.flow.name}**](/flow/editor/${t.flow.uuid}/)`},Qc=t=>t.value?`Updated **${t.field.name}** to **${t.value.text}**`:`Cleared **${t.field.name}**`,Jc=t=>`Updated **Contact Name** to **${t.name}**`,th=t=>`Updated **URNs** to ${le(t.urns,(t=>`**${t.split(":")[1].split("?")[0]}**`))}`,eh=(t,e)=>t.created_by?`**${(t=>{if(t)return t.first_name&&t.last_name?`${t.first_name} ${t.last_name}`:t.first_name?t.first_name:t.email})(t.created_by)}** ${e} a **[ticket](/ticket/all/closed/${t.ticket.uuid}/)**`:`A **[ticket](/ticket/all/closed/${t.ticket.uuid}/)** was **${e}**`,ih=t=>t.assignee?t.assignee.id===t.created_by.id?`**${ch(t.created_by)}** took this ticket`:`${ch(t.created_by)} assigned this ticket to **${ch(t.assignee)}**`:`**${ch(t.created_by)}** unassigned this ticket`,nh=t=>{const e=t;return e.groups_added?Yc("Added to group","Added to groups",e.groups_added):e.groups_removed?Yc("Removed from group","Removed from groups",e.groups_removed):void 0},oh=t=>0===parseFloat(t.actual_amount)?"Airtime transfer failed":`Transferred **${t.actual_amount}** ${t.currency} of airtime`,sh=t=>`Language updated to **${t.language}**`,rh=t=>`Requested opt-in for ${t.optin.name}`;class ah extends Fc{static get styles(){return a`
+    </div>`}}var Gc;t([xe({type:Array})],Wc.prototype,"messageGroups",void 0),t([xe({type:Boolean})],Wc.prototype,"fetching",void 0),t([xe({type:Boolean,attribute:!1})],Wc.prototype,"hideTopScroll",void 0),t([xe({type:Boolean,attribute:!1})],Wc.prototype,"hideBottomScroll",void 0),t([xe({type:String,attribute:"avatar"})],Wc.prototype,"defaultAvatar",void 0),t([xe({type:Boolean})],Wc.prototype,"agent",void 0),function(t){t.send="send-03",t.attachment="paperclip",t.attachment_audio="volume-min",t.attachment_document="file-06",t.attachment_image="image-01",t.attachment_location="marker-pin-01",t.attachment_video="video-recorder"}(Gc||(Gc={}));var Zc;!function(t){t.MESSAGE_CREATED="msg_created",t.MESSAGE_RECEIVED="msg_received",t.BROADCAST_CREATED="broadcast_created",t.IVR_CREATED="ivr_created",t.FLOW_ENTERED="flow_entered",t.FLOW_EXITED="flow_exited",t.CONTACT_FIELD_CHANGED="contact_field_changed",t.CONTACT_GROUPS_CHANGED="contact_groups_changed",t.CONTACT_NAME_CHANGED="contact_name_changed",t.CONTACT_URNS_CHANGED="contact_urns_changed",t.CHANNEL_EVENT="channel_event",t.CONTACT_LANGUAGE_CHANGED="contact_language_changed",t.AIRTIME_TRANSFERRED="airtime_transferred",t.CALL_STARTED="call_started",t.NOTE_CREATED="note_created",t.TICKET_ASSIGNED="ticket_assigned",t.TICKET_NOTE_ADDED="ticket_note_added",t.TICKET_CLOSED="ticket_closed",t.TICKET_OPENED="ticket_opened",t.TICKET_REOPENED="ticket_reopened",t.TICKET_TOPIC_CHANGED="ticket_topic_changed",t.OPTIN_REQUESTED="optin_requested"}(Zc||(Zc={}));const Yc=(t,e,i)=>{if(1===i.length)return`${t} **${i[0].name}**`;{const t=i.map((t=>`**${t.name}**`));if(2===t.length)return`${e} ${t.join(" and ")}`;{const i=t.pop();return`${e} ${t.join(", ")}, and ${i}`}}},Xc=t=>{var e,i;return"mt_miss"===t.event.type?"Missed outgoing call":"mo_miss"===t.event.type?"Missed incoming call":"new_conversation"===t.event.type?"Started conversation":"welcome_message"===t.channel_event_type?"Welcome Message Sent":"referral"===t.event.type?"Referred":"follow"===t.event.type?"Followed":"stop_contact"===t.event.type?"Stopped":"mt_call"===t.event.type?"Outgoing Phone Call":"mo_call"==t.event.type?"Incoming Phone call":"optin"==t.event.type?`Opted in to **${null===(e=t.event.optin)||void 0===e?void 0:e.name}**`:"optout"==t.event.type?`Opted out of **${null===(i=t.event.optin)||void 0===i?void 0:i.name}**`:void 0},Kc=t=>{let e="Interrupted";return"I"!==t.status&&(e=t.type===Zc.FLOW_ENTERED?"Started":"Completed"),`${e} [**${t.flow.name}**](/flow/editor/${t.flow.uuid}/)`},Qc=t=>t.value?`Updated **${t.field.name}** to **${t.value.text}**`:`Cleared **${t.field.name}**`,Jc=t=>`Updated **Contact Name** to **${t.name}**`,th=t=>`Updated **URNs** to ${le(t.urns,(t=>`**${t.split(":")[1].split("?")[0]}**`))}`,eh=(t,e)=>t.created_by?`**${(t=>{if(t)return t.first_name&&t.last_name?`${t.first_name} ${t.last_name}`:t.first_name?t.first_name:t.email})(t.created_by)}** ${e} a **[ticket](/ticket/all/closed/${t.ticket.uuid}/)**`:`A **[ticket](/ticket/all/closed/${t.ticket.uuid}/)** was **${e}**`,ih=t=>t.assignee?t.assignee.id===t.created_by.id?`**${ch(t.created_by)}** took this ticket`:`${ch(t.created_by)} assigned this ticket to **${ch(t.assignee)}**`:`**${ch(t.created_by)}** unassigned this ticket`,nh=t=>{const e=t;return e.groups_added?Yc("Added to group","Added to groups",e.groups_added):e.groups_removed?Yc("Removed from group","Removed from groups",e.groups_removed):void 0},oh=t=>0===parseFloat(t.amount)?"Airtime transfer failed":`Transferred **${t.amount}** ${t.currency} of airtime`,sh=t=>`Language updated to **${t.language}**`,rh=t=>`Requested opt-in for ${t.optin.name}`;class ah extends Fc{static get styles(){return a`
       :host {
         flex-grow: 1;
         display: flex;
@@ -2924,7 +2924,7 @@ let Ar=rr,Mr=!1;const Tr=["es","fr","pt"],Pr="data:image/png;base64,iVBORw0KGgoA
       temba-button {
         --button-border: 1px solid #ddd;
       }
-    `}constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentNote="",this.showDetails=!0,this.currentTicket=null,this.currentContact=null,this.agent="",this.blockFetching=!1,this.showInterrupt=!1,this.avatar=Pr,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1}firstUpdated(t){super.firstUpdated(t)}connectedCallback(){super.connectedCallback(),this.chat=this.shadowRoot.querySelector("temba-chat")}disconnectedCallback(){super.disconnectedCallback(),this.refreshId&&clearInterval(this.refreshId)}updated(t){super.updated(t),(t.has("data")||t.has("currentContact"))&&(this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),this.currentContact=this.data),t.has("currentContact")&&(this.chat=this.shadowRoot.querySelector("temba-chat"),this.reset(),this.fetchPreviousMessages())}reset(){this.chat&&this.chat.reset(),this.blockFetching=!1,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1,this.errorMessage=null;const t=this.shadowRoot.querySelector("temba-compose");t&&t.reset()}handleInterrupt(){this.fireCustomEvent(je.Interrupt,{contact:this.currentContact})}handleRetry(){this.shadowRoot.querySelector("temba-compose").triggerSend()}handleSend(t){this.errorMessage=null;const e=t.currentTarget,i=t.detail.langValues.und,n={contact:this.currentContact.uuid},o=i.text;o&&o.length>0&&(n.text=o);const s=i.attachments;if(s&&s.length>0){const t=s.map((t=>t.uuid));n.attachments=t}this.currentTicket&&(n.ticket=this.currentTicket.uuid);const r="Send failed, please try again.";ne("/api/v2/messages.json",n).then((t=>{t.status<400?(this.checkForNewMessages(),e.reset(),this.fireCustomEvent(je.MessageSent,{msg:n})):this.errorMessage=r})).catch((()=>{this.errorMessage=r}))}getEndpoint(){return this.contact?`/contact/history/${this.contact}/?_format=json`:null}scheduleRefresh(){let t=(new Date).getTime()-this.newestEventTime/1e3-5e3;this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),t=Math.min(t,15e3),t=Math.max(t,2e3),this.refreshId=setTimeout((()=>{this.checkForNewMessages()}),t)}getEventMessage(t){let e=null;switch(t.type){case Zc.TICKET_OPENED:e={type:Vc.Inline,text:eh(t,"opened")};break;case Zc.TICKET_ASSIGNED:e={type:Vc.Inline,text:ih(t)};break;case Zc.TICKET_REOPENED:e={type:Vc.Inline,text:eh(t,"reopened")};break;case Zc.TICKET_CLOSED:e={type:Vc.Inline,text:eh(t,"closed")};break;case Zc.TICKET_TOPIC_CHANGED:e={type:Vc.Inline,text:`Topic changed to **${t.topic.name}**`};break;case Zc.FLOW_ENTERED:case Zc.FLOW_EXITED:e={type:Vc.Inline,text:Kc(t)};break;case Zc.CONTACT_FIELD_CHANGED:e={type:Vc.Inline,text:Qc(t)};break;case Zc.CONTACT_NAME_CHANGED:e={type:Vc.Inline,text:Jc(t)};break;case Zc.CONTACT_URNS_CHANGED:e={type:Vc.Inline,text:th(t)};break;case Zc.CONTACT_GROUPS_CHANGED:e={type:Vc.Inline,text:nh(t)};break;case Zc.AIRTIME_TRANSFERRED:e={type:Vc.Inline,text:oh(t)};break;case Zc.CALL_STARTED:e={type:Vc.Inline,text:"Call Started"};break;case Zc.CHANNEL_EVENT:e={type:Vc.Inline,text:Xc(t)};break;case Zc.CONTACT_LANGUAGE_CHANGED:e={type:Vc.Inline,text:sh(t)};break;case Zc.OPTIN_REQUESTED:e={type:Vc.Inline,text:rh(t)}}return e&&t.created_on?e.date=new Date(t.created_on):console.error("Unknown event type",t),e}getUserForEvent(t){let e=null;return"msg_received"===t.type?e={name:this.currentContact.name}:t.created_by&&(e={email:t.created_by.email,name:`${t.created_by.first_name} ${t.created_by.last_name}`.trim(),avatar:t.created_by.avatar}),e}createMessages(t){if(t.events){let e=[];return t.events.forEach((t=>{const i=1e3*new Date(t.created_on).getTime();if(i>this.newestEventTime&&(this.newestEventTime=i),"ticket_note_added"===t.type){const i=t;e.push({type:Vc.Note,id:t.created_on+t.type,user:this.getUserForEvent(i),date:new Date(i.created_on),text:i.note})}else if("ticket_opened"===t.type){const i=t;e.push({type:Vc.Note,id:t.created_on+t.type+"_note",user:this.getUserForEvent(i),date:new Date(i.created_on),text:i.note}),e.push(this.getEventMessage(t))}else if("msg_created"===t.type||"msg_received"===t.type||"broadcast_created"===t.type){const i=t;e.push({uuid:t.uuid,type:"msg_received"===i.type?"msg_in":"msg_out",user:this.getUserForEvent(i),date:new Date(i.created_on),attachments:i.msg.attachments,text:i.msg.text,sendError:"E"===i.status||"F"===i.status,popup:H`<div
+    `}constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentNote="",this.showDetails=!0,this.currentTicket=null,this.currentContact=null,this.agent="",this.blockFetching=!1,this.showInterrupt=!1,this.avatar=Pr,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1}firstUpdated(t){super.firstUpdated(t)}connectedCallback(){super.connectedCallback(),this.chat=this.shadowRoot.querySelector("temba-chat")}disconnectedCallback(){super.disconnectedCallback(),this.refreshId&&clearInterval(this.refreshId)}updated(t){super.updated(t),(t.has("data")||t.has("currentContact"))&&(this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),this.currentContact=this.data),t.has("currentContact")&&(this.chat=this.shadowRoot.querySelector("temba-chat"),this.reset(),this.fetchPreviousMessages())}reset(){this.chat&&this.chat.reset(),this.blockFetching=!1,this.ticket=null,this.lastEventTime=null,this.newestEventTime=null,this.refreshId=null,this.polling=!1,this.errorMessage=null;const t=this.shadowRoot.querySelector("temba-compose");t&&t.reset()}handleInterrupt(){this.fireCustomEvent(je.Interrupt,{contact:this.currentContact})}handleRetry(){this.shadowRoot.querySelector("temba-compose").triggerSend()}handleSend(t){this.errorMessage=null;const e=t.currentTarget,i=t.detail.langValues.und,n={contact:this.currentContact.uuid},o=i.text;o&&o.length>0&&(n.text=o);const s=i.attachments;if(s&&s.length>0){const t=s.map((t=>t.uuid));n.attachments=t}this.currentTicket&&(n.ticket=this.currentTicket.uuid);const r="Send failed, please try again.";ne("/api/v2/messages.json",n).then((t=>{t.status<400?(this.checkForNewMessages(),e.reset(),this.fireCustomEvent(je.MessageSent,{msg:n})):this.errorMessage=r})).catch((()=>{this.errorMessage=r}))}getEndpoint(){return this.contact?`/contact/history/${this.contact}/?_format=json`:null}scheduleRefresh(){let t=(new Date).getTime()-this.newestEventTime/1e3-5e3;this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),t=Math.min(t,15e3),t=Math.max(t,2e3),this.refreshId=setTimeout((()=>{this.checkForNewMessages()}),t)}getEventMessage(t){let e=null;switch(t.type){case Zc.TICKET_OPENED:e={type:Vc.Inline,text:eh(t,"opened")};break;case Zc.TICKET_ASSIGNED:e={type:Vc.Inline,text:ih(t)};break;case Zc.TICKET_REOPENED:e={type:Vc.Inline,text:eh(t,"reopened")};break;case Zc.TICKET_CLOSED:e={type:Vc.Inline,text:eh(t,"closed")};break;case Zc.TICKET_TOPIC_CHANGED:e={type:Vc.Inline,text:`Topic changed to **${t.topic.name}**`};break;case Zc.FLOW_ENTERED:case Zc.FLOW_EXITED:e={type:Vc.Inline,text:Kc(t)};break;case Zc.CONTACT_FIELD_CHANGED:e={type:Vc.Inline,text:Qc(t)};break;case Zc.CONTACT_NAME_CHANGED:e={type:Vc.Inline,text:Jc(t)};break;case Zc.CONTACT_URNS_CHANGED:e={type:Vc.Inline,text:th(t)};break;case Zc.CONTACT_GROUPS_CHANGED:e={type:Vc.Inline,text:nh(t)};break;case Zc.AIRTIME_TRANSFERRED:e={type:Vc.Inline,text:oh(t)};break;case Zc.CALL_STARTED:e={type:Vc.Inline,text:"Call Started"};break;case Zc.CHANNEL_EVENT:e={type:Vc.Inline,text:Xc(t)};break;case Zc.CONTACT_LANGUAGE_CHANGED:e={type:Vc.Inline,text:sh(t)};break;case Zc.OPTIN_REQUESTED:e={type:Vc.Inline,text:rh(t)}}return e&&t.created_on?e.date=new Date(t.created_on):console.error("Unknown event type",t),e}getUserForEvent(t){let e=null;return"msg_received"===t.type?e={name:this.currentContact.name}:t.created_by&&(e={email:t.created_by.email,name:`${t.created_by.first_name} ${t.created_by.last_name}`.trim(),avatar:t.created_by.avatar}),e}createMessages(t){if(t.events){let e=[];return t.events.forEach((t=>{const i=1e3*new Date(t.created_on).getTime();if(i>this.newestEventTime&&(this.newestEventTime=i),"ticket_note_added"===t.type){const i=t;e.push({type:Vc.Note,id:t.created_on+t.type,user:this.getUserForEvent(i),date:new Date(i.created_on),text:i.note})}else if("ticket_opened"===t.type){const i=t;e.push({type:Vc.Note,id:t.created_on+t.type+"_note",user:this.getUserForEvent(i),date:new Date(i.created_on),text:i.note}),e.push(this.getEventMessage(t))}else if("msg_created"===t.type||"msg_received"===t.type||"broadcast_created"===t.type){const i=t;e.push({id:t.uuid,type:"msg_received"===i.type?"msg_in":"msg_out",user:this.getUserForEvent(i),date:new Date(i.created_on),attachments:i.msg.attachments,text:i.msg.text,sendError:"E"===i.status||"F"===i.status,popup:H`<div
               style="display: flex; flex-direction: row; align-items:center; justify-content: space-between;font-size:0.9em;line-height:1em;min-width:10em"
             >
               <div style="justify-content:left;text-align:left">
@@ -8169,8 +8169,14 @@ const{I:ud}=at,pd=()=>document.createComment(""),md=(t,e,i)=>{const n=t._$AA.par
       ${Ba(n)}
       ${(null===(i=e.quick_replies)||void 0===i?void 0:i.length)>0?H`<div class="quick-replies">
             ${e.quick_replies.map((t=>H`<div class="quick-reply">${t}</div>`))}
+            ${e.template?H`<div
+                  style="border: 1px solid var(--color-widget-border);padding: 0.5em;margin-top: 1em;border-radius: var(--curvature); display:flex;background: rgba(0,0,0,.03);"
+                >
+                  <temba-icon name="channel_wac"></temba-icon>
+                  <div style="margin-left:0.5em">${e.template.name}</div>
+                </div>`:null}
           </div>`:null}
-    `},form:{text:{type:"textarea",label:"Message Text",helpText:"Enter the message to send. You can use expressions like @contact.name",required:!0,evaluated:!0,rows:5,minHeight:75},quick_replies:{type:"select",label:"Quick Replies",helpText:"Add quick reply options for this message",options:[],multi:!0,tags:!0,searchable:!0,placeholder:"Add quick replies...",maxItems:10,evaluated:!0}},validate:t=>{const e={};return t.text&&""!==t.text.trim()||(e.text="Message text is required"),{valid:0===Object.keys(e).length,errors:e}}},bb={name:"Send Email",color:lb,render:(t,e)=>H`<div>
+    `},form:{text:{type:"textarea",label:"Message Text",helpText:"Enter the message to send. You can use expressions like @contact.name",required:!0,evaluated:!0,minHeight:175},quick_replies:{type:"select",label:"Quick Replies",helpText:"Add quick reply options for this message",options:[],multi:!0,tags:!0,searchable:!0,placeholder:"Add quick replies...",maxItems:10,evaluated:!0}},validate:t=>{const e={};return t.text&&""!==t.text.trim()||(e.text="Message text is required"),{valid:0===Object.keys(e).length,errors:e}}},bb={name:"Send Email",color:lb,render:(t,e)=>H`<div>
       <div>${gb(e.addresses,Ee.email)}</div>
       <div style="margin-top: 0.5em">
         <div
@@ -8179,7 +8185,7 @@ const{I:ud}=at,pd=()=>document.createComment(""),md=(t,e,i)=>{const n=t._$AA.par
           ${e.subject}
         </div>
       </div>
-    </div>`,form:{addresses:{type:"select",label:"Recipients",options:[],multi:!0,searchable:!0,placeholder:"Search for contacts...",emails:!0},subject:{type:"text",label:"Subject",required:!0,placeholder:"Enter email subject",maxLength:255},body:{type:"textarea",required:!0,evaluated:!0,rows:4,minHeight:75}},validate:t=>{const e={};return t.addresses&&0!==t.addresses.length||(e.addresses="At least one recipient email address is required"),{valid:0===Object.keys(e).length,errors:e}}},xb={name:"Call Webhook",color:hb,render:(t,e)=>H`<div
+    </div>`,form:{addresses:{type:"select",label:"Recipients",options:[],multi:!0,searchable:!0,placeholder:"Search for contacts...",emails:!0},subject:{type:"text",label:"Subject",required:!0,placeholder:"Enter email subject",maxLength:255},body:{type:"textarea",required:!0,evaluated:!0,minHeight:175}},validate:t=>{const e={};return t.addresses&&0!==t.addresses.length||(e.addresses="At least one recipient email address is required"),{valid:0===Object.keys(e).length,errors:e}}},xb={name:"Call Webhook",color:hb,render:(t,e)=>H`<div
       style="word-wrap: break-word; overflow-wrap: break-word; hyphens: auto;"
     >
       ${e.url}
@@ -8320,6 +8326,10 @@ const{I:ud}=at,pd=()=>document.createComment(""),md=(t,e,i)=>{const n=t._$AA.par
         overflow: hidden;
       }
+      .node.execute-actions temba-sortable-list .action:last-child .body {
+        padding-bottom: 1.5em;
+      }
       .action .drag-handle {
         opacity: 0;
         transition: all 200ms ease-in-out;
@@ -8493,7 +8503,7 @@ const{I:ud}=at,pd=()=>document.createComment(""),md=(t,e,i)=>{const n=t._$AA.par
         border-top-left-radius: var(--curvature);
         border-top-right-radius: var(--curvature);
       }
-  }`}constructor(){super(),this.exitRemovalTimeouts=new Map,this.exitRemovingState=new Set,this.actionRemovalTimeouts=new Map,this.actionRemovingState=new Set,this.actionClickStartPos=null,this.pendingActionClick=null,this.nodeClickStartPos=null,this.pendingNodeClick=null,this.handleActionOrderChanged=this.handleActionOrderChanged.bind(this)}updated(t){var e;if(super.updated(t),t.has("node")){if(this.plumber){this.plumber.removeNodeConnections(this.node.uuid);for(const t of this.node.exits)t.destination_uuid?this.plumber.connectIds(this.node.uuid,t.uuid,t.destination_uuid):this.plumber.makeSource(t.uuid);this.plumber.revalidate([this.node.uuid])}const t=this.parentElement;if(t){const i=t.getBoundingClientRect();null===(e=Pa())||void 0===e||e.getState().expandCanvas(this.ui.position.left+i.width,this.ui.position.top+i.height)}}}disconnectedCallback(){super.disconnectedCallback(),this.exitRemovalTimeouts.forEach((t=>{clearTimeout(t)})),this.exitRemovalTimeouts.clear(),this.actionRemovalTimeouts.forEach((t=>{clearTimeout(t)})),this.actionRemovalTimeouts.clear(),this.exitRemovingState.clear(),this.actionRemovingState.clear()}handleExitClick(t,e){t.preventDefault(),t.stopPropagation();const i=e.uuid;if(!e.destination_uuid)return;if(this.exitRemovingState.has(i))return void this.disconnectExit(e);this.exitRemovingState.add(i),this.requestUpdate(),this.plumber.setConnectionRemovingState(i,!0),this.exitRemovalTimeouts.has(i)&&clearTimeout(this.exitRemovalTimeouts.get(i));const n=window.setTimeout((()=>{this.exitRemovingState.delete(i),this.exitRemovalTimeouts.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.requestUpdate()}),1500);this.exitRemovalTimeouts.set(i,n)}disconnectExit(t){var e;const i=t.uuid;this.exitRemovingState.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.exitRemovalTimeouts.has(i)&&(clearTimeout(this.exitRemovalTimeouts.get(i)),this.exitRemovalTimeouts.delete(i)),this.plumber.removeExitConnection(i);const n={...t,destination_uuid:null},o=this.node.exits.map((t=>t.uuid===i?n:t)),s={...this.node,exits:o};null===(e=Pa())||void 0===e||e.getState().updateNode(this.node.uuid,s),this.requestUpdate()}handleActionRemoveClick(t,e,i){t.preventDefault(),t.stopPropagation();const n=e.uuid;if(this.actionRemovingState.has(n))return void this.removeAction(e,i);this.actionRemovingState.add(n),this.requestUpdate(),this.actionRemovalTimeouts.has(n)&&clearTimeout(this.actionRemovalTimeouts.get(n));const o=window.setTimeout((()=>{this.actionRemovingState.delete(n),this.actionRemovalTimeouts.delete(n),this.requestUpdate()}),1e3);this.actionRemovalTimeouts.set(n,o)}removeAction(t,e){var i;const n=t.uuid;this.actionRemovingState.delete(n),this.actionRemovalTimeouts.has(n)&&(clearTimeout(this.actionRemovalTimeouts.get(n)),this.actionRemovalTimeouts.delete(n));const o=this.node.actions.filter((t=>t.uuid!==n));if(0===o.length)this.fireCustomEvent(je.NodeDeleted,{uuid:this.node.uuid});else{const t={...this.node,actions:o};null===(i=Pa())||void 0===i||i.getState().updateNode(this.node.uuid,t),this.requestUpdate()}}handleNodeRemoveClick(t){t.preventDefault(),t.stopPropagation();const e=this.node.uuid;if(this.actionRemovingState.has(e))return void this.removeNode();this.actionRemovingState.add(e),this.requestUpdate(),this.actionRemovalTimeouts.has(e)&&clearTimeout(this.actionRemovalTimeouts.get(e));const i=window.setTimeout((()=>{this.actionRemovingState.delete(e),this.actionRemovalTimeouts.delete(e),this.requestUpdate()}),1e3);this.actionRemovalTimeouts.set(e,i)}removeNode(){const t=this.node.uuid;this.actionRemovingState.delete(t),this.actionRemovalTimeouts.has(t)&&(clearTimeout(this.actionRemovalTimeouts.get(t)),this.actionRemovalTimeouts.delete(t)),this.fireCustomEvent(je.NodeDeleted,{uuid:this.node.uuid})}handleActionOrderChanged(t){var e;const[i,n]=t.detail.swap,o=[...this.node.actions],s=o.splice(i,1)[0];o.splice(n,0,s),this.node={...this.node,actions:o},null===(e=Pa())||void 0===e||e.getState().updateNode(this.node.uuid,{...this.node,actions:o})}handleActionMouseDown(t,e){t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||(this.actionClickStartPos={x:t.clientX,y:t.clientY},this.pendingActionClick={action:e,event:t})}handleActionMouseUp(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(this.actionClickStartPos){const i=t.clientX-this.actionClickStartPos.x,n=t.clientY-this.actionClickStartPos.y,o=Math.sqrt(i*i+n*n),s=this.closest("temba-flow-editor"),r=null==s?void 0:s.dragging;!(o<=5)||s&&r||this.fireCustomEvent(je.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionClick(t,e){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||this.fireCustomEvent(je.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}handleNodeEditClick(t){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid)||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(je.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(je.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}handleNodeMouseDown(t){t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid)||(this.nodeClickStartPos={x:t.clientX,y:t.clientY},this.pendingNodeClick={event:t})}handleNodeMouseUp(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);if(t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);if(this.nodeClickStartPos){const e=t.clientX-this.nodeClickStartPos.x,i=t.clientY-this.nodeClickStartPos.y,n=Math.sqrt(e*e+i*i),o=this.closest("temba-flow-editor"),s=null==o?void 0:o.dragging;!(n<=5)||o&&s||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(je.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(je.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}this.nodeClickStartPos=null,this.pendingNodeClick=null}renderTitle(t,e=!1){var i,n;return H`<div class="title" style="background:${t.color}">
+  }`}constructor(){super(),this.exitRemovalTimeouts=new Map,this.exitRemovingState=new Set,this.actionRemovalTimeouts=new Map,this.actionRemovingState=new Set,this.actionClickStartPos=null,this.pendingActionClick=null,this.nodeClickStartPos=null,this.pendingNodeClick=null,this.handleActionOrderChanged=this.handleActionOrderChanged.bind(this)}updated(t){var e;if(super.updated(t),t.has("node")){if(this.plumber){this.plumber.removeNodeConnections(this.node.uuid);for(const t of this.node.exits)t.destination_uuid?this.plumber.connectIds(this.node.uuid,t.uuid,t.destination_uuid):this.plumber.makeSource(t.uuid);this.plumber.revalidate([this.node.uuid])}const t=this.parentElement;if(t){const i=t.getBoundingClientRect();null===(e=Pa())||void 0===e||e.getState().expandCanvas(this.ui.position.left+i.width,this.ui.position.top+i.height)}}}disconnectedCallback(){super.disconnectedCallback(),this.exitRemovalTimeouts.forEach((t=>{clearTimeout(t)})),this.exitRemovalTimeouts.clear(),this.actionRemovalTimeouts.forEach((t=>{clearTimeout(t)})),this.actionRemovalTimeouts.clear(),this.exitRemovingState.clear(),this.actionRemovingState.clear()}handleExitClick(t,e){t.preventDefault(),t.stopPropagation();const i=e.uuid;if(!e.destination_uuid)return;if(this.exitRemovingState.has(i))return void this.disconnectExit(e);this.exitRemovingState.add(i),this.requestUpdate(),this.plumber.setConnectionRemovingState(i,!0),this.exitRemovalTimeouts.has(i)&&clearTimeout(this.exitRemovalTimeouts.get(i));const n=window.setTimeout((()=>{this.exitRemovingState.delete(i),this.exitRemovalTimeouts.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.requestUpdate()}),1500);this.exitRemovalTimeouts.set(i,n)}disconnectExit(t){var e;const i=t.uuid;this.exitRemovingState.delete(i),this.plumber.setConnectionRemovingState(i,!1),this.exitRemovalTimeouts.has(i)&&(clearTimeout(this.exitRemovalTimeouts.get(i)),this.exitRemovalTimeouts.delete(i)),this.plumber.removeExitConnection(i);const n={...t,destination_uuid:null},o=this.node.exits.map((t=>t.uuid===i?n:t)),s={...this.node,exits:o};null===(e=Pa())||void 0===e||e.getState().updateNode(this.node.uuid,s),this.requestUpdate()}handleActionRemoveClick(t,e,i){t.preventDefault(),t.stopPropagation();const n=e.uuid;if(this.actionRemovingState.has(n))return void this.removeAction(e,i);this.actionRemovingState.add(n),this.requestUpdate(),this.actionRemovalTimeouts.has(n)&&clearTimeout(this.actionRemovalTimeouts.get(n));const o=window.setTimeout((()=>{this.actionRemovingState.delete(n),this.actionRemovalTimeouts.delete(n),this.requestUpdate()}),1e3);this.actionRemovalTimeouts.set(n,o)}removeAction(t,e){var i;const n=t.uuid;this.actionRemovingState.delete(n),this.actionRemovalTimeouts.has(n)&&(clearTimeout(this.actionRemovalTimeouts.get(n)),this.actionRemovalTimeouts.delete(n));const o=this.node.actions.filter((t=>t.uuid!==n));if(0===o.length)this.fireCustomEvent(je.NodeDeleted,{uuid:this.node.uuid});else{const t={...this.node,actions:o};null===(i=Pa())||void 0===i||i.getState().updateNode(this.node.uuid,t),this.requestUpdate()}}handleNodeRemoveClick(t){t.preventDefault(),t.stopPropagation();const e=this.node.uuid;if(this.actionRemovingState.has(e))return void this.removeNode();this.actionRemovingState.add(e),this.requestUpdate(),this.actionRemovalTimeouts.has(e)&&clearTimeout(this.actionRemovalTimeouts.get(e));const i=window.setTimeout((()=>{this.actionRemovingState.delete(e),this.actionRemovalTimeouts.delete(e),this.requestUpdate()}),1e3);this.actionRemovalTimeouts.set(e,i)}removeNode(){const t=this.node.uuid;this.actionRemovingState.delete(t),this.actionRemovalTimeouts.has(t)&&(clearTimeout(this.actionRemovalTimeouts.get(t)),this.actionRemovalTimeouts.delete(t)),this.fireCustomEvent(je.NodeDeleted,{uuid:this.node.uuid})}handleActionOrderChanged(t){var e;const[i,n]=t.detail.swap,o=[...this.node.actions],s=o.splice(i,1)[0];o.splice(n,0,s),this.node={...this.node,actions:o},null===(e=Pa())||void 0===e||e.getState().updateNode(this.node.uuid,{...this.node,actions:o})}handleActionMouseDown(t,e){t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||(this.actionClickStartPos={x:t.clientX,y:t.clientY},this.pendingActionClick={action:e,event:t})}handleActionMouseUp(t,e){if(!this.pendingActionClick||this.pendingActionClick.action.uuid!==e.uuid)return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid))return this.actionClickStartPos=null,void(this.pendingActionClick=null);if(this.actionClickStartPos){const i=t.clientX-this.actionClickStartPos.x,n=t.clientY-this.actionClickStartPos.y,o=Math.sqrt(i*i+n*n),s=this.closest("temba-flow-editor"),r=null==s?void 0:s.dragging;!(o<=5)||s&&r||this.fireCustomEvent(je.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}this.actionClickStartPos=null,this.pendingActionClick=null}handleActionClick(t,e){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(e.uuid)||this.fireCustomEvent(je.ActionEditRequested,{action:e,nodeUuid:this.node.uuid})}handleNodeEditClick(t){t.preventDefault(),t.stopPropagation();t.target.closest(".remove-button")||this.actionRemovingState.has(this.node.uuid)||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(je.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(je.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}handleNodeMouseDown(t){const e=t.target;e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||this.actionRemovingState.has(this.node.uuid)||(this.nodeClickStartPos={x:t.clientX,y:t.clientY},this.pendingNodeClick={event:t})}handleNodeMouseUp(t){if(!this.pendingNodeClick)return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);const e=t.target;if(e.closest(".remove-button")||e.closest(".exit")||e.closest(".exit-wrapper")||this.actionRemovingState.has(this.node.uuid))return this.nodeClickStartPos=null,void(this.pendingNodeClick=null);if(this.nodeClickStartPos){const e=t.clientX-this.nodeClickStartPos.x,i=t.clientY-this.nodeClickStartPos.y,n=Math.sqrt(e*e+i*i),o=this.closest("temba-flow-editor"),s=null==o?void 0:o.dragging;!(n<=5)||o&&s||this.node.router&&(this.node.actions&&1===this.node.actions.length?this.fireCustomEvent(je.ActionEditRequested,{action:this.node.actions[0],nodeUuid:this.node.uuid}):this.fireCustomEvent(je.NodeEditRequested,{node:this.node,nodeUI:this.ui}))}this.nodeClickStartPos=null,this.pendingNodeClick=null}renderTitle(t,e=!1){var i,n;return H`<div class="title" style="background:${t.color}">
       ${(null===(n=null===(i=this.node)||void 0===i?void 0:i.actions)||void 0===n?void 0:n.length)>1?H`<temba-icon class="drag-handle" name="sort"></temba-icon>`:null}
       <div class="name">${e?"Remove?":t.name}</div>
@@ -8796,7 +8806,7 @@ const{I:ud}=at,pd=()=>document.createComment(""),md=(t,e,i)=>{const n=t._$AA.par
       }
       .sticky-note {
-        width: 200px;
+        width: 182px;
         background-color: var(--sticky-color);
         border: 1px solid var(--sticky-border-color);
         border-radius: var(--curvature);