@nyaruka/temba-components 0.129.7 → 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,14 +4,19 @@ 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.7](https://github.com/nyaruka/temba-components/compare/v0.129.6...v0.129.7)
+#### [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)
-- 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)
 

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",

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

@@ -10,17 +10,27 @@
         "uuid": "a229fa3c-16bb-440b-9ae8-b7ee7a723f44",
         "actions": [
           {
+            "uuid": "3d56e4cf-1e88-499a-b0b4-ff48385fc9a5",
+            "type": "send_msg",
+            "text": "What is your favorite color?! @contact.uuid. It works.",
             "attachments": [
-              "image:http://google.com/logo.png"
+              "image/jpeg:http://localhost:9000/temba-attachments/c4e84ebf-fdd7-439b-a2ca-aeb5e54dfc1d-IMG_3245.jpeg",
+              "image/jpeg:http://localhost:9000/temba-attachments/e7d4d3cd-ec89-45c2-bc0b-4f652f1f7fde-IMG_3262.jpeg",
+              "image/jpeg:http://localhost:9000/temba-attachments/ae831575-0d23-40b7-ae0c-531b8775a6bc-IMG_3282.jpeg",
+              "image/jpeg:http://localhost:9000/temba-attachments/837ac13b-e524-4a4c-9385-81873c5df138-IMG_3290.jpeg",
+              "image/jpeg:http://localhost:9000/temba-attachments/761e6345-3a19-49da-8a53-5c772d7739bc-IMG_3339.jpeg",
+              "image/jpeg:http://localhost:9000/temba-attachments/ea6b336d-4389-4d32-b58a-e5a138d13c84-IMG_3237.jpeg"
             ],
-            "text": "What is your favorite color?",
-            "type": "send_msg",
             "quick_replies": [
               "Red",
               "Green",
-              "Blue"
-            ],
-            "uuid": "3d56e4cf-1e88-499a-b0b4-ff48385fc9a5"
+              "Blue",
+              "Yellow",
+              "Purple",
+              "@contact.first_name",
+              "@contact.uuid",
+              "@contact.last_name"
+            ]
           }
         ],
         "exits": [
@@ -135,7 +145,7 @@
               "Content-Type": "application/json",
               "Authorization": "Bearer token here"
             },
-            "body": "@(json(object(\n  \"contact\", object(\n    \"uuid\", contact.uuid, \n    \"name\", contact.name, \n    \"urn\", contact.urn\n  ),\n  \"flow\", object(\n    \"uuid\", run.flow.uuid, \n    \"name\", run.flow.name\n  ),\n  \"results\", foreach_value(results, extract_object, \"value\", \"category\")\n)))"
+            "body": "@(json(object(\n  \"contact\", object(\n    \"uuid\", contact.uuid, \n    \"name\", contact.name, \n    \"urn\", contact.urn\n  ),\n  \"flow\", object(\n    \"uuid\", run.flow.uuid, \n    \"name\", run.flow.name\n  ),\n  \"results\", foreach_value(results, extract_object, \"value\", \"category\")\n)))ast"
           }
         ],
         "router": {
@@ -181,6 +191,21 @@
       {
         "uuid": "4efc49e0-ebfe-454d-a1a0-900a911dd5ef",
         "actions": [
+          {
+            "uuid": "9963160a-a007-4c7b-8c9e-7325e1b69ed8",
+            "type": "send_msg",
+            "text": "Excellent choices.",
+            "attachments": [
+              "audio:http://arst",
+              "image:@contact.first_name"
+            ],
+            "quick_replies": [
+              "Red",
+              "Green",
+              "Blue",
+              "@contact.name"
+            ]
+          },
           {
             "uuid": "ffe1c2d3-4e5f-6a7b-8c9d-e0f1a2b3c4d5",
             "type": "remove_contact_groups",
@@ -221,15 +246,6 @@
             ],
             "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",
@@ -798,7 +814,7 @@
       "nodes": {
         "a229fa3c-16bb-440b-9ae8-b7ee7a723f44": {
           "position": {
-            "left": 260,
+            "left": 240,
             "top": 0
           },
           "type": "execute_actions"
@@ -806,8 +822,8 @@
         "ef1a5b06-1331-4c0d-9f46-58b1e5baf671": {
           "type": "wait_for_response",
           "position": {
-            "left": 260,
-            "top": 160
+            "left": 220,
+            "top": 260
           },
           "config": {
             "cases": {}
@@ -816,15 +832,15 @@
         "e1f22e97-a170-44b4-a79b-98ab916f4c34": {
           "type": "split_by_webhook",
           "position": {
-            "left": 800,
-            "top": 0
+            "left": 700,
+            "top": 20
           },
           "config": {}
         },
         "4efc49e0-ebfe-454d-a1a0-900a911dd5ef": {
           "position": {
-            "left": 240,
-            "top": 340
+            "left": 220,
+            "top": 440
           },
           "type": "execute_actions"
         },
@@ -887,8 +903,8 @@
         "5f1394c1-4b8c-4357-8863-db24817b2aa3": {
           "type": "split_by_groups",
           "position": {
-            "left": 500,
-            "top": 360
+            "left": 520,
+            "top": 380
           },
           "config": {
             "cases": {}
@@ -950,7 +966,7 @@
         "598a87e4-f20b-48ba-aac5-bb365d8f1501": {
           "position": {
             "left": 0,
-            "top": 720
+            "top": 780
           },
           "title": "Green Note",
           "body": "They also come in green, do I like them better? Maybe I do. There is a standard height, they will have to get used to it.",