@nyaruka/temba-components 0.134.5 → 0.135.9

package/src/display/Thumbnail.ts

@@ -10,6 +10,7 @@ enum ThumbnailContentType {
   AUDIO = 'audio',
   VIDEO = 'video',
   DOCUMENT = 'document',
+  LOCATION = 'location',
   OTHER = 'other'
 }
 
@@ -122,6 +123,28 @@ export class Thumbnail extends RapidElement {
   @property({ type: String, attribute: true })
   contentType: string;
 
+  @property({ type: Number, attribute: false })
+  latitude: number;
+
+  @property({ type: Number, attribute: false })
+  longitude: number;
+
+  // cached tile URL for location thumbnails
+  @property({ type: String, attribute: false })
+  private tileUrl: string = '';
+
+  // convert lat/lng to tile coordinates for OSM
+  private latLngToTile(lat: number, lng: number, zoom: number) {
+    const n = Math.pow(2, zoom);
+    const x = Math.floor(((lng + 180) / 360) * n);
+    const latRad = (lat * Math.PI) / 180;
+    const y = Math.floor(
+      ((1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2) *
+        n
+    );
+    return { x, y, z: zoom };
+  }
+
   protected updated(
     changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
   ): void {
@@ -162,12 +185,36 @@ export class Thumbnail extends RapidElement {
             this.contentType = ThumbnailContentType.VIDEO;
           } else if (contentType.startsWith('application')) {
             this.contentType = ThumbnailContentType.DOCUMENT;
+          } else if (contentType.startsWith('geo')) {
+            this.contentType = ThumbnailContentType.LOCATION;
+            // Parse coordinates from URL which is already stripped of "geo:" prefix
+            // Format is now just: lat,lng
+            const coords = this.url.match(/^([^,]+),([^,]+)/);
+            if (coords) {
+              this.latitude = parseFloat(coords[1]);
+              this.longitude = parseFloat(coords[2]);
+            }
           } else {
             this.contentType = ThumbnailContentType.OTHER;
           }
         }
       }
     }
+
+    // calculate tile URL when latitude/longitude changes
+    if (changes.has('latitude') || changes.has('longitude')) {
+      if (
+        this.latitude !== undefined &&
+        this.longitude !== undefined &&
+        !isNaN(this.latitude) &&
+        !isNaN(this.longitude)
+      ) {
+        const tile = this.latLngToTile(this.latitude, this.longitude, 13);
+        this.tileUrl = `https://tile.openstreetmap.org/${tile.z}/${tile.x}/${tile.y}.png`;
+      } else {
+        this.tileUrl = '';
+      }
+    }
   }
 
   public handleThumbnailClicked() {
@@ -176,6 +223,10 @@ export class Thumbnail extends RapidElement {
         const lightbox = document.querySelector('temba-lightbox') as Lightbox;
         lightbox.showElement(this);
       }, 100);
+    } else if (this.contentType === ThumbnailContentType.LOCATION) {
+      // open location in openstreetmap
+      const osmUrl = `https://www.openstreetmap.org/?mlat=${this.latitude}&mlon=${this.longitude}#map=15/${this.latitude}/${this.longitude}`;
+      window.open(osmUrl, '_blank');
     } else {
       window.open(this.url, '_blank');
     }
@@ -203,14 +254,22 @@ export class Thumbnail extends RapidElement {
           class="observe thumb ${this.contentType}"
           src="${this.url}"
         ></img></div>`
-          : html`<div
-              style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
-            >
-              <temba-icon
-                size="1.5"
-                name="${ThumbnailIcons[this.contentType]}"
-              ></temba-icon>
-            </div>`}
+          : html`
+              ${this.contentType === ThumbnailContentType.LOCATION
+                ? html`<img
+                    style="height:125px;margin-bottom:-3px;border-radius:var(--curvature);"
+                    src="${this.tileUrl}"
+                    alt="Location preview"
+                  />`
+                : html`<div
+                    style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
+                  >
+                    <temba-icon
+                      size="1.5"
+                      name="${ThumbnailIcons[this.contentType]}"
+                    ></temba-icon>
+                  </div>`}
+            `}
       </div>
     `;
   }

package/src/live/ContactChat.ts

@@ -827,7 +827,7 @@ export class ContactChat extends ContactStoreElement {
         };
         break;
       default:
-        console.error('Unknown event type', event);
+      // console.error('Unknown event type', event);
     }
   }
 

package/src/utils.ts

@@ -84,19 +84,19 @@ export const getHeaders = (headers: any = {}) => {
 
   const fetchHeaders: any = csrf ? { 'X-CSRFToken': csrf } : {};
 
-  // include the current org id
-  const org_id = (window as any).org_id;
-  if (org_id) {
-    fetchHeaders['X-Temba-Org'] = org_id;
+  // include the current workspace identifier
+  const workspaceUUID = (window as any).workspace?.uuid;
+  if (workspaceUUID) {
+    fetchHeaders['X-Temba-Workspace'] = workspaceUUID;
   }
 
   // mark us as ajax
   fetchHeaders['X-Requested-With'] = 'XMLHttpRequest';
 
   Object.keys(headers).forEach((key) => {
-    // if we are adding a service org, we omit temba-org
+    // if we are requesting to service, we omit current workspace identifier
     if (key === 'X-Temba-Service-Org') {
-      delete fetchHeaders['X-Temba-Org'];
+      delete fetchHeaders['X-Temba-Workspace'];
     }
 
     fetchHeaders[key] = headers[key];

package/test/temba-thumbnail.test.ts

@@ -0,0 +1,150 @@
+import { assert, expect } from '@open-wc/testing';
+import { Thumbnail } from '../src/display/Thumbnail';
+import { getComponent } from './utils.test';
+
+const TAG = 'temba-thumbnail';
+const getThumbnail = async (attrs: any = {}) => {
+  return (await getComponent(TAG, attrs)) as Thumbnail;
+};
+
+describe('temba-thumbnail', () => {
+  it('can be created', async () => {
+    const thumbnail = await getThumbnail();
+    assert.instanceOf(thumbnail, Thumbnail);
+  });
+
+  it('renders location thumbnail with map tile', async () => {
+    // test that a location attachment properly uses latLngToTile in render
+    const thumbnail = await getThumbnail({
+      attachment: 'geo:40.7128,-74.0060'
+    });
+    await thumbnail.updateComplete;
+    expect(thumbnail.latitude).to.equal(40.7128);
+    expect(thumbnail.longitude).to.equal(-74.006);
+    expect(thumbnail.contentType).to.equal('location');
+
+    // verify the rendered image contains the correct tile URL
+    const img = thumbnail.shadowRoot.querySelector('img');
+    expect(img).to.exist;
+    expect(img.src).to.include('tile.openstreetmap.org');
+    expect(img.src).to.include('/13/'); // zoom level
+  });
+
+  describe('latLngToTile', () => {
+    it('converts coordinates at 0,0', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test at zoom level 0
+      const tile0 = (thumbnail as any).latLngToTile(0, 0, 0);
+      expect(tile0.x).to.equal(0);
+      expect(tile0.y).to.equal(0);
+      expect(tile0.z).to.equal(0);
+
+      // test at zoom level 10
+      const tile10 = (thumbnail as any).latLngToTile(0, 0, 10);
+      expect(tile10.x).to.equal(512);
+      expect(tile10.y).to.equal(512);
+      expect(tile10.z).to.equal(10);
+    });
+
+    it('converts positive coordinates', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test London coordinates at zoom 13
+      const londonTile = (thumbnail as any).latLngToTile(51.5074, -0.1278, 13);
+      expect(londonTile.x).to.equal(4093);
+      expect(londonTile.y).to.equal(2724);
+      expect(londonTile.z).to.equal(13);
+    });
+
+    it('converts negative coordinates', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test Sydney coordinates (negative latitude) at zoom 13
+      const sydneyTile = (thumbnail as any).latLngToTile(
+        -33.8688,
+        151.2093,
+        13
+      );
+      expect(sydneyTile.x).to.equal(7536);
+      expect(sydneyTile.y).to.equal(4915);
+      expect(sydneyTile.z).to.equal(13);
+    });
+
+    it('converts coordinates near the North Pole', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test near North Pole (85.05 is practical limit for Web Mercator)
+      const northPoleTile = (thumbnail as any).latLngToTile(85, 0, 5);
+      expect(northPoleTile.x).to.equal(16);
+      expect(northPoleTile.y).to.equal(0);
+      expect(northPoleTile.z).to.equal(5);
+    });
+
+    it('converts coordinates near the South Pole', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test near South Pole (-85.05 is practical limit for Web Mercator)
+      const southPoleTile = (thumbnail as any).latLngToTile(-85, 0, 5);
+      expect(southPoleTile.x).to.equal(16);
+      expect(southPoleTile.y).to.equal(31);
+      expect(southPoleTile.z).to.equal(5);
+    });
+
+    it('converts coordinates near the Date Line (positive)', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test near Date Line (179.9 longitude)
+      const dateLineTile = (thumbnail as any).latLngToTile(0, 179.9, 10);
+      expect(dateLineTile.x).to.equal(1023);
+      expect(dateLineTile.y).to.equal(512);
+      expect(dateLineTile.z).to.equal(10);
+    });
+
+    it('converts coordinates near the Date Line (negative)', async () => {
+      const thumbnail = await getThumbnail();
+
+      // test near Date Line (-179.9 longitude)
+      const dateLineTile = (thumbnail as any).latLngToTile(0, -179.9, 10);
+      expect(dateLineTile.x).to.equal(0);
+      expect(dateLineTile.y).to.equal(512);
+      expect(dateLineTile.z).to.equal(10);
+    });
+
+    it('works correctly with zoom level 1', async () => {
+      const thumbnail = await getThumbnail();
+
+      const tile = (thumbnail as any).latLngToTile(40.7128, -74.006, 1);
+      expect(tile.x).to.equal(0);
+      expect(tile.y).to.equal(0);
+      expect(tile.z).to.equal(1);
+    });
+
+    it('works correctly with zoom level 5', async () => {
+      const thumbnail = await getThumbnail();
+
+      const tile = (thumbnail as any).latLngToTile(40.7128, -74.006, 5);
+      expect(tile.x).to.equal(9);
+      expect(tile.y).to.equal(12);
+      expect(tile.z).to.equal(5);
+    });
+
+    it('works correctly with zoom level 15', async () => {
+      const thumbnail = await getThumbnail();
+
+      const tile = (thumbnail as any).latLngToTile(40.7128, -74.006, 15);
+      expect(tile.x).to.equal(9647);
+      expect(tile.y).to.equal(12320);
+      expect(tile.z).to.equal(15);
+    });
+
+    it('works correctly with zoom level 18 (maximum)', async () => {
+      const thumbnail = await getThumbnail();
+
+      const tile = (thumbnail as any).latLngToTile(40.7128, -74.006, 18);
+      expect(tile.x).to.equal(77182);
+      expect(tile.y).to.equal(98561);
+      expect(tile.z).to.equal(18);
+    });
+  });
+});

package/test/temba-utils-index.test.ts

@@ -189,10 +189,15 @@ describe('utils/index', () => {
       expect(headers['X-CSRFToken']).to.equal('form-csrf-token');
     });
 
-    it('includes org id when available', () => {
-      (window as any).org_id = '123';
+    it('includes org uuid when available', () => {
+      (window as any).workspace = {
+        uuid: '3a7e2f10-b0b3-413d-bd84-626e147d5ed2',
+        anon: false
+      };
       const headers = getHeaders();
-      expect(headers['X-Temba-Org']).to.equal('123');
+      expect(headers['X-Temba-Workspace']).to.equal(
+        '3a7e2f10-b0b3-413d-bd84-626e147d5ed2'
+      );
     });
 
     it('merges provided headers', () => {
@@ -201,10 +206,13 @@ describe('utils/index', () => {
       expect(headers['X-Requested-With']).to.equal('XMLHttpRequest');
     });
 
-    it('removes X-Temba-Org when X-Temba-Service-Org is provided', () => {
-      (window as any).org_id = '123';
+    it('removes X-Temba-Workspace when X-Temba-Service-Org is provided', () => {
+      (window as any).workspace = {
+        uuid: '3a7e2f10-b0b3-413d-bd84-626e147d5ed2',
+        anon: false
+      };
       const headers = getHeaders({ 'X-Temba-Service-Org': 'service-org' });
-      expect(headers['X-Temba-Org']).to.be.undefined;
+      expect(headers['X-Temba-Workspace']).to.be.undefined;
       expect(headers['X-Temba-Service-Org']).to.equal('service-org');
     });
   });

package/test-assets/contacts/history.json

@@ -105,6 +105,10 @@
           "uuid": "8a81e9e0-10a0-4319-9b00-ce723cfa8303",
           "name": "SMS Channel"
         }
+      },
+      "_deleted": {
+        "created_on": "2025-09-23T20:40:27.239433+00:00",
+        "user": { "name": "Rowan Seymour", "uuid": "rowan-user-uuid" }
       }
     },
     {