@nyaruka/temba-components 0.129.7 → 0.129.9

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,8 +4,37 @@ 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.9](https://github.com/nyaruka/temba-components/compare/v0.129.8...v0.129.9)
+
+- Node helper tests [`#672`](https://github.com/nyaruka/temba-components/pull/672)
+- Node refactor to support split_by_llm_categorize [`#671`](https://github.com/nyaruka/temba-components/pull/671)
+- Implement editor for add_input_labels [`#670`](https://github.com/nyaruka/temba-components/pull/670)
+- Support real call and optin events [`#669`](https://github.com/nyaruka/temba-components/pull/669)
+- Add split_by_ticket node editor for ticket opening functionality [`#666`](https://github.com/nyaruka/temba-components/pull/666)
+- Implement Call AI (LLM) action configuration with dynamic model selection [`#664`](https://github.com/nyaruka/temba-components/pull/664)
+- Select placeholder and input tweaks [`#662`](https://github.com/nyaruka/temba-components/pull/662)
+- Add FieldRenderer [`#661`](https://github.com/nyaruka/temba-components/pull/661)
+- Add NodeHelper tests [`a94d342`](https://github.com/nyaruka/temba-components/commit/a94d342f0ab5b3f1338a733b2fc6e0ca051ec0d7)
+- Add field renderer [`f7c410b`](https://github.com/nyaruka/temba-components/commit/f7c410b7979448c498d33597dabbba22e5ea60b9)
+- Put node in charge of rendering if appropriate [`54b302d`](https://github.com/nyaruka/temba-components/commit/54b302d165ba842542462778f272d69180117835)
+
+#### [v0.129.8](https://github.com/nyaruka/temba-components/compare/v0.129.7...v0.129.8)
+
+> 20 August 2025
+
+- 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)
+- 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)
+- Catch networkidle failure, add stress-test script [`6d102d3`](https://github.com/nyaruka/temba-components/commit/6d102d3cb6f0144e9176c3c60f3243e0d30fc6ff)
+
 #### [v0.129.7](https://github.com/nyaruka/temba-components/compare/v0.129.6...v0.129.7)
 
+> 13 August 2025
+
 - 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)

package/demo/components/flow/example.html

@@ -36,7 +36,7 @@
     </style>
   </head>
   <body>
-    <temba-store></temba-store>
+    <temba-store completion="/api/v2/completion.json"></temba-store>
     <temba-flow-editor id="flow-editor"></temba-flow-editor>
 
     <script type="module">

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

@@ -4,8 +4,8 @@
       "nodes": {
         "b01610c8-d6dc-4bdb-9439-5713cdcf9afa": {
           "position": {
-            "left": 80,
-            "top": 80
+            "left": 60,
+            "top": 20
           },
           "type": "execute_actions"
         },
@@ -13,7 +13,7 @@
           "type": "wait_for_response",
           "position": {
             "left": 80,
-            "top": 260
+            "top": 240
           },
           "config": {
             "cases": {}
@@ -41,27 +41,17 @@
         "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://minio:9000/temba-default/orgs/1/media/495c/495c33e3-237e-4c36-b854-6ca609839e3a/intro-1745448388.jpg",
-              "image:@fields.profile_pic"
+              "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"
             ],
-            "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"
+              "Chicken",
+              "arst"
             ]
           }
         ],
@@ -124,7 +114,8 @@
             "uuid": "9e84e680-a710-4894-a838-dd22a8dcc341"
           },
           {
-            "uuid": "12043e9e-7aa0-41fd-8f04-e0d42a0c2099"
+            "uuid": "12043e9e-7aa0-41fd-8f04-e0d42a0c2099",
+            "destination_uuid": null
           },
           {
             "uuid": "79b6a4e6-1a00-44cc-9fd4-2d9ba2a394e0",