@nyaruka/temba-components 0.129.6 → 0.129.8

package/.devcontainer/Dockerfile

@@ -1,14 +1,21 @@
 FROM "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye"
 
-RUN apt-get update \
-    && apt-get install chromium fonts-noto-color-emoji -y --no-install-recommends -qq
-
-# The rest of our environment
+# The rest of our environment
 ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
 ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 ENV CHROME_PATH=/usr/bin/chromium
 ENV DEBIAN_FRONTEND=noninteractive
 
+# Add minio configuration
+ENV MINIO_ENDPOINT=http://minio:9000
+ENV MINIO_PUBLIC_ENDPOINT=http://localhost:9000
+ENV MINIO_ACCESS_KEY=root
+ENV MINIO_SECRET_KEY=tembatemba
+ENV MINIO_BUCKET=temba-attachments
+
+RUN apt-get update \
+    && apt-get install chromium fonts-noto-color-emoji dnsutils curl -y --no-install-recommends -qq
+
 WORKDIR /workspaces/temba-components
 RUN yarn install
 USER node

package/.devcontainer/devcontainer.json

@@ -10,10 +10,11 @@
   "runArgs": [
     "--name=dev-components",
     "--network=textit_default",
-    "--hostname=temba-components"
+    "--hostname=temba-components",
+    "--add-host=minio:host-gateway"
   ],
   "remoteUser": "node",
-  "postCreateCommand": "sudo chown -R node /workspaces/temba-components/static/svg && sudo chown node /workspaces/temba-components && sudo chown node /workspaces/temba-components/screenshots && yarn install",
+  "postCreateCommand": "sudo chown -R node /workspaces/temba-components/static/svg && sudo chown node /workspaces/temba-components && sudo chown node /workspaces/temba-components/screenshots && yarn install && echo 'Testing minio connection:' && curl -f http://minio:9000/minio/health/live || echo 'Minio connection failed - this is expected if minio is not running'",
   "customizations": {
     "vscode": {
       "extensions": [

package/.github/workflows/build.yml

@@ -23,7 +23,6 @@ jobs:
       - name: Build and run dev container task
         id: validate
         uses: devcontainers/ci@v0.3
-        continue-on-error: true
         with:
           runCmd: |
             yarn validate 2>&1 | tee validate_output.log
@@ -33,7 +32,7 @@ jobs:
             CI=true
 
       - name: Extract coverage stats
-        if: always()
+        if: success() || failure()
         run: |
           if [ -f validate_output.log ]; then
             echo "Extracting coverage information from validate output..."
@@ -69,7 +68,7 @@ jobs:
           fi
 
       - name: Comment coverage on PR
-        if: github.event_name == 'pull_request' && always()
+        if: github.event_name == 'pull_request' && (success() || failure())
         uses: actions/github-script@v7
         with:
           script: |
@@ -123,7 +122,7 @@ jobs:
             }
 
       - name: Configure AWS credentials
-        if: always()
+        if: success() || failure()
         uses: aws-actions/configure-aws-credentials@v4
         with:
           aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
@@ -131,7 +130,7 @@ jobs:
           aws-region: us-east-1
 
       - name: Upload coverage report to S3
-        if: always()
+        if: success() || failure()
         run: |
           # Check if coverage directory exists
           if [ -d "coverage/lcov-report" ]; then
@@ -151,15 +150,6 @@ jobs:
             echo "No coverage report found to upload"
           fi
 
-      - name: Check validation result
-        run: |
-          if [ "${{ steps.validate.outcome }}" != "success" ]; then
-            echo "❌ Validation failed"
-            exit 1
-          else
-            echo "✅ Validation passed"
-          fi
-
       - name: Upload artifacts
         if: failure()
         uses: actions/upload-artifact@v4

package/CHANGELOG.md

@@ -4,15 +4,39 @@ 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.8](https://github.com/nyaruka/temba-components/compare/v0.129.6...v0.129.8)
+
+- Add support for `run_started` and `run_ended` events in chat history [`#660`](https://github.com/nyaruka/temba-components/pull/660)
+- Fix completion in dev environment [`#659`](https://github.com/nyaruka/temba-components/pull/659)
+- Roll our own flow info generator for dev env [`#658`](https://github.com/nyaruka/temba-components/pull/658)
+- Group updates [`#657`](https://github.com/nyaruka/temba-components/pull/657)
+- Integrate MessageEditor component with flow editor for send_msg action [`#654`](https://github.com/nyaruka/temba-components/pull/654)
+- 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)
+- Add minio dev support, finish attachment work [`8b1a930`](https://github.com/nyaruka/temba-components/commit/8b1a930ba6f2c87b46cfe7c79af949fe27fa43c8)
+- Add MessageEditor component with tests [`0994c7f`](https://github.com/nyaruka/temba-components/commit/0994c7fa58d8e77741925049934ccca96c85653a)
+- Support multiple flow examples [`932de08`](https://github.com/nyaruka/temba-components/commit/932de08987089145781dd9756ef9a8752f630ccb)
+
 #### [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.3...v0.129.5)
+#### [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

@@ -36,11 +36,18 @@
     </style>
   </head>
   <body>
-    <temba-store></temba-store>
-    <temba-flow-editor flow="sample-flow"></temba-flow-editor>
+    <temba-store completion="/api/v2/completion.json"></temba-store>
+    <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

@@ -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/components/message-editor/example.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Message 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="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Message Editor Examples</h1>
+
+    <p>
+      <a href="/demo/index.html">← Back to main demo</a>
+    </p>
+
+    <div class="example">
+      <h3>Basic Message Editor</h3>
+      <p>A composed component that combines text completion and media picker</p>
+      <temba-message-editor 
+        name="message"
+        placeholder="Type your message here..."
+        label="Message"
+      ></temba-message-editor>
+    </div>
+
+    <div class="example">
+      <h3>Message Editor with Value</h3>
+      <p>Pre-populated with a message</p>
+      <temba-message-editor 
+        name="message2"
+        value="Hello @contact.name, your order is ready!"
+        placeholder="Type your message here..."
+        label="Message with Completion"
+      ></temba-message-editor>
+    </div>
+
+    <div class="example">
+      <h3>Message Editor with Attachments</h3>
+      <p>Pre-populated with mixed attachment types (static and runtime)</p>
+      <temba-message-editor 
+        name="message3"
+        value="Check out this document and image"
+        placeholder="Type your message here..."
+        label="Message with Attachments"
+        attachments='["image/jpeg:http://example.com/photo.jpg", "application/pdf:http://example.com/doc.pdf", "image:@fields.profile_pic", "video:@fields.intro_video"]'
+      ></temba-message-editor>
+    </div>
+
+    <div class="example">
+      <h3>Message Editor with File Type Restrictions</h3>
+      <p>Only accepts image files</p>
+      <temba-message-editor 
+        name="message4"
+        placeholder="Type your message and attach images..."
+        label="Images Only"
+        accept="image/*"
+        max-attachments="5"
+      ></temba-message-editor>
+    </div>
+
+    <div class="example">
+      <h3>Message Editor with Counter</h3>
+      <p>With GSM character counter</p>
+      <temba-message-editor 
+        name="message5"
+        value="This message has a GSM character counter"
+        placeholder="Type your message..."
+        label="Message with Counter"
+        counter="temba-charcount"
+        gsm
+      ></temba-message-editor>
+      <temba-charcount text="count this text"></temba-charcount>
+    </div>
+
+    <div class="example">
+      <h3>Compact Message Editor</h3>
+      <p>Smaller minimum height</p>
+      <temba-message-editor 
+        name="message6"
+        placeholder="Quick message..."
+        label="Compact Editor"
+        min-height="40"
+      ></temba-message-editor>
+    </div>
+
+    <div class="example">
+      <h3>Widget Only (No Label)</h3>
+      <p>Just the widget without field wrapper</p>
+      <temba-message-editor 
+        name="message7"
+        placeholder="Widget only mode..."
+        widget-only
+      ></temba-message-editor>
+    </div>
+
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+      
+      // Add some event listeners to show how the component works
+      document.addEventListener('DOMContentLoaded', () => {
+        const editors = document.querySelectorAll('temba-message-editor');
+        editors.forEach(editor => {
+          editor.addEventListener('change', (e) => {
+            console.log(`Message Editor "${editor.name}" changed:`, {
+              value: editor.value,
+              attachments: editor.attachments
+            });
+          });
+
+          editor.addEventListener('loading', (e) => {
+            console.log(`Message Editor "${editor.name}" loading:`, e.detail.loading);
+          });
+        });
+      });
+    </script>
+  </body>
+</html>

package/demo/components/textinput/completion.html

@@ -15,6 +15,7 @@
     <link href="/demo/static/css/styles.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
+    <temba-store completion="/api/v2/completion.json"></temba-store>
     <h1>Completion Examples</h1>
 
     <p>

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

@@ -0,0 +1,132 @@
+{
+  "definition": {
+    "_ui": {
+      "nodes": {
+        "b01610c8-d6dc-4bdb-9439-5713cdcf9afa": {
+          "position": {
+            "left": 60,
+            "top": 20
+          },
+          "type": "execute_actions"
+        },
+        "3b28a90f-27be-4753-b0c0-3e98b83f0627": {
+          "type": "wait_for_response",
+          "position": {
+            "left": 80,
+            "top": 240
+          },
+          "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": [
+          {
+            "uuid": "90957b4e-05a4-4d00-8163-47046f81246d",
+            "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"
+            ],
+            "quick_replies": [
+              "Fish",
+              "Chicken",
+              "arst"
+            ]
+          }
+        ],
+        "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",
+            "destination_uuid": null
+          },
+          {
+            "uuid": "79b6a4e6-1a00-44cc-9fd4-2d9ba2a394e0",
+            "destination_uuid": null
+          }
+        ]
+      }
+    ],
+    "spec_version": "14.3.0",
+    "type": "messaging",
+    "uuid": "8f1fa2e3-740a-4f06-b67b-d521643eb52b",
+    "revision": 50
+  }
+}