@nyaruka/temba-components 0.131.1 → 0.131.3

package/.github/workflows/publish.yml

@@ -4,7 +4,10 @@ on:
   push:
     tags:
       - '*'
-
+permissions:
+  id-token: write
+  contents: read
+  
 jobs:
   build:
     runs-on: ubuntu-latest

package/CHANGELOG.md

@@ -4,25 +4,99 @@ 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.131.3](https://github.com/nyaruka/temba-components/compare/v0.131.2...v0.131.3)
+
+- Chat history tweaks [`#754`](https://github.com/nyaruka/temba-components/pull/754)
+- Localization tab [`#753`](https://github.com/nyaruka/temba-components/pull/753)
+- Add localization editing framework for flow actions and router categories [`#747`](https://github.com/nyaruka/temba-components/pull/747)
+- Bump min-document from 2.19.0 to 2.19.2 [`#752`](https://github.com/nyaruka/temba-components/pull/752)
+- [WIP] Add a generic tab and floating window component [`#751`](https://github.com/nyaruka/temba-components/pull/751)
+- Add flow type and feature filtering to NodeTypeSelector [`#749`](https://github.com/nyaruka/temba-components/pull/749)
+- Add auto translate and category toggles [`cb1257c`](https://github.com/nyaruka/temba-components/commit/cb1257c2044ec8e5b7072274bdc0183811059229)
+- Add voice example file and improve filtering [`a00a21d`](https://github.com/nyaruka/temba-components/commit/a00a21dfeeb553da8f88ba2643792eb6c058a890)
+- Add FloatingTab and FloatingWindow components with tests [`38b3b13`](https://github.com/nyaruka/temba-components/commit/38b3b13bad1a961cd672ae2c246bd06e9adc7b51)
+
+#### [v0.131.2](https://github.com/nyaruka/temba-components/compare/v0.131.1...v0.131.2)
+
+> 14 November 2025
+
+- Support `_status` fields on msg events that are objects [`#745`](https://github.com/nyaruka/temba-components/pull/745)
+- Fix validate methods to use FormData instead of action types [`#742`](https://github.com/nyaruka/temba-components/pull/742)
+- Add mock channels endpoint for demo environment [`#744`](https://github.com/nyaruka/temba-components/pull/744)
+- Add delimiter support to split_by_run_result [`#740`](https://github.com/nyaruka/temba-components/pull/740)
+- Add send_broadcast action config with recipients and message fields [`#738`](https://github.com/nyaruka/temba-components/pull/738)
+- Enable dragging actions between execute_actions nodes [`#736`](https://github.com/nyaruka/temba-components/pull/736)
+- Enable dragging actions from execute_actions nodes to canvas to create new nodes [`#732`](https://github.com/nyaruka/temba-components/pull/732)
+- Add action button for execute_actions nodes [`#734`](https://github.com/nyaruka/temba-components/pull/734)
+- Add configuration for split_by_airtime node [`#730`](https://github.com/nyaruka/temba-components/pull/730)
+- Implement split_by_resthook router configuration [`#725`](https://github.com/nyaruka/temba-components/pull/725)
+- Tracking down intermittent CI failure [`#723`](https://github.com/nyaruka/temba-components/pull/723)
+- Fix split as action for new nodes [`#726`](https://github.com/nyaruka/temba-components/pull/726)
+- Ensure canvas menu is on screen [`#722`](https://github.com/nyaruka/temba-components/pull/722)
+- More structure for node types [`#721`](https://github.com/nyaruka/temba-components/pull/721)
+- Node creation menu [`#719`](https://github.com/nyaruka/temba-components/pull/719)
+- Bump validator from 13.11.0 to 13.15.20 [`#720`](https://github.com/nyaruka/temba-components/pull/720)
+- Add add_urn action [`#718`](https://github.com/nyaruka/temba-components/pull/718)
+- Type safety for formData [`#717`](https://github.com/nyaruka/temba-components/pull/717)
+- Implementation for start_session [`#716`](https://github.com/nyaruka/temba-components/pull/716)
+- Implement split_by_result [`#715`](https://github.com/nyaruka/temba-components/pull/715)
+- Add implementation split_by_contact_field [`#713`](https://github.com/nyaruka/temba-components/pull/713)
+- Add split by expression with shared rule logic [`#712`](https://github.com/nyaruka/temba-components/pull/712)
+- Add common save as result name [`#711`](https://github.com/nyaruka/temba-components/pull/711)
+- Split by scheme [`#710`](https://github.com/nyaruka/temba-components/pull/710)
+- Remove support for older fields on message events in chat history [`#705`](https://github.com/nyaruka/temba-components/pull/705)
+- Implement send_broadcast action config with form, validation and tests [`1212d8e`](https://github.com/nyaruka/temba-components/commit/1212d8eb082ffe74fbd29ebea0bc327e277305b9)
+- Add delimiter feature to split_by_run_result [`db66b81`](https://github.com/nyaruka/temba-components/commit/db66b81c8f216660f727f0e1a1eae544f31e7908)
+- Implement drag-to-canvas for actions [`32ffdb7`](https://github.com/nyaruka/temba-components/commit/32ffdb75344baf8cda915a4ad00c00c218765120)
+
 #### [v0.131.1](https://github.com/nyaruka/temba-components/compare/v0.131.0...v0.131.1)
 
+> 2 October 2025
+
 - Styling tweak for contact search [`2de5b31`](https://github.com/nyaruka/temba-components/commit/2de5b31280a9d6645780e10bbb7f2e97f182e4b7)
 
-#### [v0.131.0](https://github.com/nyaruka/temba-components/compare/v0.130.1...v0.131.0)
+#### [v0.131.0](https://github.com/nyaruka/temba-components/compare/v0.130.5...v0.131.0)
 
 > 2 October 2025
 
 - Empty row focus, auto categories [`#707`](https://github.com/nyaruka/temba-components/pull/707)
 - Fix omnibox [`#706`](https://github.com/nyaruka/temba-components/pull/706)
+- Fix system categories [`8c191f1`](https://github.com/nyaruka/temba-components/commit/8c191f158c7a67d1e15078e78160497b63317c50)
+- Add auto category generation [`5cb1af3`](https://github.com/nyaruka/temba-components/commit/5cb1af36b04a2440d7a5d2e37dbaf29338d89fa7)
+- Maintain focus after new row is added [`f485390`](https://github.com/nyaruka/temba-components/commit/f485390d11b316f2866213ee3261f2c1fee5b6fd)
+
+#### [v0.130.5](https://github.com/nyaruka/temba-components/compare/v0.130.4...v0.130.5)
+
+> 30 September 2025
+
 - Tweak msg event payload for chat history [`#704`](https://github.com/nyaruka/temba-components/pull/704)
 - Add split by groups [`#699`](https://github.com/nyaruka/temba-components/pull/699)
 - Some tweaks for smoother dragging [`#701`](https://github.com/nyaruka/temba-components/pull/701)
 - Switch to cloned dragged items [`#700`](https://github.com/nyaruka/temba-components/pull/700)
 - Show select fetching status [`#698`](https://github.com/nyaruka/temba-components/pull/698)
 - Add sorting for wait for response [`#695`](https://github.com/nyaruka/temba-components/pull/695)
+- Sortable rules wip [`f1af831`](https://github.com/nyaruka/temba-components/commit/f1af8312a136d0c3437e37ef75bee5dcdb9bd670)
+- Use the original element for dragging [`54e1cae`](https://github.com/nyaruka/temba-components/commit/54e1cae6da0ce57cd0821a9e4815efbb0c4dddbc)
+- Maintain order for like-named categories [`7149dc7`](https://github.com/nyaruka/temba-components/commit/7149dc778b54ddd1f8d25eddebeb442faef02b92)
+
+#### [v0.130.4](https://github.com/nyaruka/temba-components/compare/v0.130.3...v0.130.4)
+
+> 24 September 2025
+
 - Fix rendering of `ivr_created` events [`#697`](https://github.com/nyaruka/temba-components/pull/697)
 - Update chat history test with more realistic event data [`#696`](https://github.com/nyaruka/temba-components/pull/696)
+- Fix rendering of ivr_created events in chat history [`261f082`](https://github.com/nyaruka/temba-components/commit/261f082a6d8fbdc2244a1e59fa07a49f33439c36)
+
+#### [v0.130.3](https://github.com/nyaruka/temba-components/compare/v0.130.2...v0.130.3)
+
+> 23 September 2025
+
 - Remove support for legacy ticket events [`#694`](https://github.com/nyaruka/temba-components/pull/694)
+
+#### [v0.130.2](https://github.com/nyaruka/temba-components/compare/v0.130.1...v0.130.2)
+
+> 22 September 2025
+
 - Add support for ticket events from the engine [`#693`](https://github.com/nyaruka/temba-components/pull/693)
 - First draft for rules editor [`#691`](https://github.com/nyaruka/temba-components/pull/691)
 - Show contact ref on details tab since it might be hidden by name if set [`#690`](https://github.com/nyaruka/temba-components/pull/690)

package/demo/components/floating-tabs/example.html

@@ -0,0 +1,400 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Floating Tab & Window 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+    <style>
+      body {
+        min-height: 100vh;
+        position: relative;
+      }
+      .content {
+        padding: 20px;
+        max-width: 800px;
+                
+      }
+      .phone-simulator {
+        padding: 30px;
+        position: relative;
+      }
+      .phone-frame {
+        border-radius: 40px;
+        border: 8px solid #1f2937;
+        box-shadow: 0 0px 30px rgba(0, 0, 0, 0.4);
+        background: #000;
+        position: relative;
+        overflow:hidden;
+        
+      }
+      .phone-top {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        cursor: grab;
+      }
+      .phone-notch {
+        background: transparent;
+        height: 50px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 20px;
+      }
+      .phone-notch::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 100%;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
+        z-index: -1;
+      }
+      .dynamic-island {
+        
+        top: 10px;
+        left: 50%;
+        
+        width: 120px;
+        height: 30px;
+        background: #000;
+        border-radius: 20px;
+        z-index: 1;
+      }
+      .phone-notch .time {
+        color: #000;
+        font-size: 14px;
+        font-weight: 600;
+        
+      }
+      .phone-notch .status-icons {
+        display: flex;
+        gap: 4px;
+        align-items: center;
+      }
+      .phone-notch .status-icons span {
+        color: #000;
+        font-size: 14px;
+      }
+      .phone-header {
+        background: transparent;
+        padding: 10px 15px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: move;
+        user-select: none;
+        border-bottom: none;
+        pointer-events: all;
+      }
+      .close-btn {
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 50%;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width:29px;
+      }
+
+      .close-btn:hover {
+        color: rgba(0, 0, 0, 0.7);
+      }
+      .phone-screen {
+        background: white;
+        padding: 15px;
+        padding-top: 75px;
+        padding-bottom: 60px;
+        height:470px;
+        overflow-y: auto;
+        flex-direction: column-reverse;
+        display: flex;
+      }
+
+
+      .message {
+        padding: 10px 14px;
+        margin-bottom: 8px;
+        border-radius: 18px;
+        max-width: 70%;
+        font-size: 15px;
+        line-height: 1.4;
+      }
+      .message.incoming {
+        background: #e5e5ea;
+        color: #000;
+        margin-right: auto;
+        border-bottom-left-radius: 4px;
+      }
+      .message.outgoing {
+        background: #007aff;
+        color: white;
+        margin-left: auto;
+        text-align: left;
+        border-bottom-right-radius: 4px;
+      }
+      .message-input {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
+        padding: 8px 16px;
+        border-top: none;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        right: 0px;
+        z-index: 10;
+      }
+      .message-input input {
+        flex: 1;
+        border: 1px solid #c6c6c8;
+        border-radius: 20px;
+        padding: 8px 15px;
+        font-size: 15px;
+        margin-bottom:5px;
+        background: white;
+        border: none;
+        outline:none;
+      }
+      .message-input input::placeholder {
+        color: #8e8e93;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="content">
+      <h1>Floating Tab & Window Examples</h1>
+      <p><a href="/demo/index.html">← Back to main demo</a></p>
+
+      <div class="example">
+        <h3>Phone Simulator</h3>
+        <p>
+          Click the green phone icon on the right to open a phone simulator
+          window. The window can be dragged around the screen.
+        </p>
+        <p>
+          Hover over the tab to see the label animate in. Click again to close
+          the window.
+        </p>
+      </div>
+
+      <div class="example">
+        <h3>Multiple Tabs</h3>
+        <p>
+          Multiple floating tabs can be displayed at once, each with different
+          colors and purposes.
+        </p>
+        <ul>
+          <li><strong>Phone (Green):</strong> Phone simulator window</li>
+          <li><strong>Clock (Purple):</strong> Revision history window</li>
+          <li><strong>Globe (Gray):</strong> Translation/localization window</li>
+        </ul>
+      </div>
+
+      <div class="example">
+        <h3>Usage</h3>
+        <pre><code>&lt;!-- Floating Tab --&gt;
+&lt;temba-floating-tab
+  id="phone-tab"
+  icon="phone"
+  label="Phone Simulator"
+  color="#10b981"
+  top="100"
+&gt;&lt;/temba-floating-tab&gt;
+
+&lt;!-- Floating Window --&gt;
+&lt;temba-floating-window
+  id="phone-window"
+  title="Phone Simulator"
+  width="250"
+  height="700"
+  top="100"
+&gt;
+  &lt;!-- Your content here --&gt;
+&lt;/temba-floating-window&gt;</code></pre>
+      </div>
+    </div>
+
+
+    <!-- Phone Simulator Tab & Window -->
+         <temba-floating-window
+      id="translation-window"
+      header="Flow Translation"
+      width="350"
+      height="600"
+      top="100"
+      color="#6b7280"
+    >
+      <div style="padding: 20px">
+        <h4 style="margin-top: 0">Translate Flow</h4>
+        <div style="display: flex; flex-direction: column; gap: 15px">
+          <div>
+            <label style="display: block; margin-bottom: 5px; font-weight: 500"
+              >Language</label
+            >
+            <select style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #d1d5db">
+              <option>English</option>
+              <option>Spanish</option>
+              <option>French</option>
+              <option>Portuguese</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </temba-floating-window>
+
+    <temba-floating-window
+      id="phone-window"
+      width="375"
+      height="720"
+      top="60"
+      chromeless
+    >
+      <div class="phone-simulator">
+        
+        <div class="phone-frame">
+          <div class="phone-top drag-handle">
+
+            <div class="phone-notch">
+              <div style="width:29px;"></div>
+              <div class="dynamic-island"></div>
+              <button class="close-btn" onclick="document.getElementById('phone-window').close()">
+                <temba-icon name="x" clickable size="2"></temba-icon>
+              </button>
+            </div>
+            
+          </div>
+          <div class="phone-screen">
+            <div class="message outgoing">Always do!</div>
+            <div class="message incoming">Drive safe!</div>
+            <div class="message outgoing">Can't wait!</div>
+            <div class="message incoming">See you soon!</div>
+            <div class="message outgoing">On it!</div>
+            <div class="message incoming">Don't forget the salad dressing!</div>
+            <div class="message outgoing">Sure thing, see you soon!</div>
+            <div class="message incoming">Great! Also need some tomatoes.</div>
+            <div class="message outgoing">I got broccoli and asparagus</div>
+            <div class="message incoming">Can you buy some veggies on your way home?</div>
+          </div>
+          <div class="message-input">
+            <input type="text" placeholder="Enter Message"/>
+          </div>
+        </div>
+      </div>
+    </temba-floating-window>
+
+    <temba-floating-window
+      id="history-window"
+      header="Revision History"
+      width="300"
+      height="500"
+      top="100"
+      color="#8b5cf6"
+    >
+      <div style="padding: 20px">
+        <h4 style="margin-top: 0">Recent Changes</h4>
+        <ul style="list-style: none; padding: 0">
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>2 hours ago</strong><br />
+            Updated flow configuration
+          </li>
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>Yesterday</strong><br />
+            Added new message template
+          </li>
+          <li style="margin-bottom: 15px; padding: 10px; background: #f3f4f6; border-radius: 8px">
+            <strong>3 days ago</strong><br />
+            Modified contact fields
+          </li>
+        </ul>
+      </div>
+    </temba-floating-window>
+
+    <temba-floating-tab
+      id="phone-tab"
+      icon="simulator"
+      label="Phone Simulator"
+      color="#10b981"
+    ></temba-floating-tab>
+
+    
+
+    <!-- History Tab & Window -->
+    <temba-floating-tab
+      id="history-tab"
+      icon="revisions"
+      label="Revision History"
+      color="#8b5cf6"
+    ></temba-floating-tab>
+
+    
+
+    <!-- Translation Tab & Window -->
+    <temba-floating-tab
+      id="translation-tab"
+      icon="language"
+      label="Flow Translation"
+      color="#6b7280"
+    ></temba-floating-tab>
+
+
+
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+
+      // connect tabs to windows
+      const phoneTab = document.getElementById('phone-tab');
+      const phoneWindow = document.getElementById('phone-window');
+
+      const historyTab = document.getElementById('history-tab');
+      const historyWindow = document.getElementById('history-window');
+
+      const translationTab = document.getElementById('translation-tab');
+      const translationWindow = document.getElementById('translation-window');
+
+      // phone tab/window interaction
+      phoneTab.addEventListener('temba-button-clicked', () => {
+        phoneWindow.show();
+      });
+
+      phoneWindow.addEventListener('temba-dialog-hidden', () => {
+        phoneWindow.hide();
+      });
+
+      // history tab/window interaction
+      historyTab.addEventListener('temba-button-clicked', () => {
+        historyWindow.show();
+      });
+
+      historyWindow.addEventListener('temba-dialog-hidden', () => {
+        historyWindow.hide();
+      });
+
+      // translation tab/window interaction
+      translationTab.addEventListener('temba-button-clicked', () => {
+        translationWindow.show();
+      });
+
+      translationWindow.addEventListener('temba-dialog-hidden', () => {
+        translationWindow.hide();
+      });
+    </script>
+  </body>
+</html>

package/demo/components/flow/index.html

@@ -144,7 +144,7 @@
 
       // Fallback function for known flows
       async function loadKnownFlows(container) {
-        const knownFlows = ['sample-flow', 'food-order'];
+        const knownFlows = ['sample-flow', 'food-order', 'voicemail'];
         const flows = [];
 
         for (const flowId of knownFlows) {

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

@@ -45,8 +45,8 @@
             "type": "send_msg",
             "text": "Would you like chicken or fish?",
             "attachments": [
-              "image/jpeg:http://localhost:9000/temba-attachments/816f8797-c929-47a8-a1ad-9a33f0123406-IMG_0917.jpeg",
-              "image/jpeg:http://localhost:9000/temba-attachments/de0f23fc-2d71-4a93-90d3-729b1ad65cd2-IMG_3208.jpeg"
+              "image/jpeg:http://localhost:9000/temba-attachments/0b7acdd2-8563-4991-b3b4-abcb83aa4540-00001.jpg",
+              "image/jpeg:http://localhost:9000/temba-attachments/760f4437-e1b7-4de2-a728-1cbd35a59d35-2021-07-23 09.07.13.jpg"
             ],
             "quick_replies": [
               "Fish",