@nyaruka/temba-components 0.42.1 → 0.43.1

package/out-tsc/test/temba-lightbox.test.js

@@ -0,0 +1,28 @@
+import { fixture, assert } from '@open-wc/testing';
+import { Lightbox } from '../src/lightbox/Lightbox';
+import { assertScreenshot } from './utils.test';
+export const getHTML = () => {
+    return `<temba-lightbox animationTime="0"></temba-lightbox>`;
+};
+// let clock: any;
+describe('temba-lightbox', () => {
+    it('can be created', async () => {
+        const lightbox = await fixture(getHTML());
+        const img = await fixture("<img style='width:100px;height:auto' src='./test-assets/img/meow.jpg'/>");
+        await assertScreenshot('lightbox/img', {
+            x: 28,
+            y: 28,
+            width: 1024,
+            height: 768,
+        });
+        assert.instanceOf(lightbox, Lightbox);
+        lightbox.showElement(img);
+        await assertScreenshot('lightbox/img-zoomed', {
+            x: 28,
+            y: 28,
+            width: 1024,
+            height: 768,
+        });
+    });
+});
+//# sourceMappingURL=temba-lightbox.test.js.map

package/out-tsc/test/temba-lightbox.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"temba-lightbox.test.js","sourceRoot":"","sources":["../../test/temba-lightbox.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE;IAC1B,OAAO,qDAAqD,CAAC;AAC/D,CAAC,CAAC;AAEF,kBAAkB;AAElB,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,QAAQ,GAAa,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;QACpD,MAAM,GAAG,GAAG,MAAM,OAAO,CACvB,yEAAyE,CAC1E,CAAC;QAEF,MAAM,gBAAgB,CAAC,cAAc,EAAE;YACrC,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,GAAG;SACZ,CAAC,CAAC;QAEH,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACtC,QAAQ,CAAC,WAAW,CAAC,GAAkB,CAAC,CAAC;QAEzC,MAAM,gBAAgB,CAAC,qBAAqB,EAAE;YAC5C,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,GAAG;SACZ,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, assert } from '@open-wc/testing';\nimport { Lightbox } from '../src/lightbox/Lightbox';\nimport { assertScreenshot } from './utils.test';\n\nexport const getHTML = () => {\n  return `<temba-lightbox animationTime=\"0\"></temba-lightbox>`;\n};\n\n// let clock: any;\n\ndescribe('temba-lightbox', () => {\n  it('can be created', async () => {\n    const lightbox: Lightbox = await fixture(getHTML());\n    const img = await fixture(\n      \"<img style='width:100px;height:auto' src='./test-assets/img/meow.jpg'/>\"\n    );\n\n    await assertScreenshot('lightbox/img', {\n      x: 28,\n      y: 28,\n      width: 1024,\n      height: 768,\n    });\n\n    assert.instanceOf(lightbox, Lightbox);\n    lightbox.showElement(img as HTMLElement);\n\n    await assertScreenshot('lightbox/img-zoomed', {\n      x: 28,\n      y: 28,\n      width: 1024,\n      height: 768,\n    });\n  });\n});\n"]}

package/out-tsc/test/utils.test.js

@@ -29,8 +29,7 @@ export const getComponent = async (tag, attrs = {}, slot = '', width = 250, heig
     ${style ? style : ``}
   `;
     parentNode.setAttribute('style', styleAttribute);
-    const component = await fixture(spec, { parentNode });
-    return component;
+    return await fixture(spec, { parentNode });
 };
 const createResponse = mocked => {
     const mockResponse = new window.Response(mocked.body, {

package/out-tsc/test/utils.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\nimport { DateTime } from 'luxon';\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';\nimport MouseHelper from './MouseHelper';\nimport { Store } from '../src/store/Store';\nimport { replace, stub } from 'sinon';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n  status: string;\n}\n\nconst gets: CodeMock[] = [];\nlet posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const showMouse = async () => {\n  const mouse = await fixture(html`<mouse-helper />`);\n  assert.instanceOf(mouse, MouseHelper);\n};\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  height = 0,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n  const parentNode = document.createElement('div');\n  const styleAttribute = `\n    ${width > 0 ? `width:${width}px;` : ``} \n    ${height > 0 ? `height:${height}px;` : ``}\n    ${style ? style : ``}\n  `;\n  parentNode.setAttribute('style', styleAttribute);\n  const component = await fixture(spec, { parentNode });\n  return component;\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: mocked.status,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: mocked.status,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (\n  endpoint: RegExp,\n  body: any,\n  headers: any = {},\n  status = '200'\n) => {\n  gets.push({ endpoint, body, headers, status });\n};\n\nexport const mockPOST = (\n  endpoint: RegExp,\n  body: any,\n  headers: any = {},\n  status = '200'\n) => {\n  posts.push({ endpoint, body, headers, status });\n};\n\nexport const clearMockPosts = () => {\n  posts = [];\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(!!clock.timers).to.equal(true, 'Expected timers not found');\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    window.setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  waitFor?: { clock?: any; predicate?: () => boolean }\n) => {\n  if (waitFor) {\n    if (waitFor.clock) {\n      waitFor.clock.restore();\n    }\n    await waitUntil(waitFor.predicate);\n  }\n\n  const threshold = 0.1;\n  const exclude: Clip[] = [];\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n\nexport const loadStore = async () => {\n  const store: Store = await fixture(\n    `<temba-store \n      completion='/test-assets/store/editor.json'\n      groups='/test-assets/store/groups.json'\n      languages='/test-assets/store/languages.json'\n      fields='/test-assets/store/fields.json'\n    />`\n  );\n  await store.httpComplete;\n  await store.httpComplete;\n\n  return store;\n};\n\nexport const mockNow = (isodate: string) => {\n  const now = DateTime.fromISO(isodate);\n  // mock the current time\n  replace(DateTime, 'now', () => {\n    return now;\n  });\n};\n"]}
+{"version":3,"file":"utils.test.js","sourceRoot":"","sources":["../../test/utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import '../temba-modules';\nimport { DateTime } from 'luxon';\ninterface Clip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\nimport { expect, fixture, html, assert, waitUntil } from '@open-wc/testing';\nimport MouseHelper from './MouseHelper';\nimport { Store } from '../src/store/Store';\nimport { replace, stub } from 'sinon';\n\nexport interface CodeMock {\n  endpoint: RegExp;\n  body: string;\n  headers: any;\n  status: string;\n}\n\nconst gets: CodeMock[] = [];\nlet posts: CodeMock[] = [];\nlet normalFetch;\n\nexport const showMouse = async () => {\n  const mouse = await fixture(html`<mouse-helper />`);\n  assert.instanceOf(mouse, MouseHelper);\n};\n\nexport const getAttributes = (attrs: any = {}) => {\n  return `${Object.keys(attrs)\n    .map((name: string) => {\n      if (typeof attrs[name] === 'boolean' && attrs[name]) {\n        return name;\n      }\n      return `${name}='${attrs[name]}'`;\n    })\n    .join(' ')}`;\n};\n\nexport const getComponent = async (\n  tag,\n  attrs: any = {},\n  slot = '',\n  width = 250,\n  height = 0,\n  style = ''\n) => {\n  const spec = `<${tag} ${getAttributes(attrs)}>${slot}</${tag}>`;\n  const parentNode = document.createElement('div');\n  const styleAttribute = `\n    ${width > 0 ? `width:${width}px;` : ``} \n    ${height > 0 ? `height:${height}px;` : ``}\n    ${style ? style : ``}\n  `;\n  parentNode.setAttribute('style', styleAttribute);\n  return await fixture(spec, { parentNode });\n};\n\nconst createResponse = mocked => {\n  const mockResponse = new window.Response(mocked.body, {\n    status: mocked.status,\n    headers: {\n      'Content-type': 'text/html',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst createJSONResponse = mocked => {\n  const mockResponse = new window.Response(JSON.stringify(mocked.body), {\n    status: mocked.status,\n    headers: {\n      'Content-type': 'application/json',\n      ...mocked.headers,\n    },\n  });\n\n  return Promise.resolve(mockResponse);\n};\n\nconst getResponse = (endpoint: string, options) => {\n  // check if our path has been mocked in code\n  const mocks = options.method === 'GET' ? gets : posts;\n  const codeMock = mocks.find(mock => mock.endpoint.test(endpoint));\n\n  if (codeMock) {\n    if (typeof codeMock.body === 'string') {\n      // see if we are being mocked to a file\n      if (codeMock.body.startsWith('/')) {\n        endpoint = codeMock.body;\n      } else {\n        return createResponse(codeMock);\n      }\n    } else {\n      return createJSONResponse(codeMock);\n    }\n  }\n\n  // otherwise fetch over http\n  return normalFetch(endpoint, options);\n};\n\nbefore(async () => {\n  normalFetch = window.fetch;\n  stub(window, 'fetch').callsFake(getResponse);\n  await setViewport({ width: 1024, height: 768, deviceScaleFactor: 2 });\n});\n\nafter(() => {\n  (window.fetch as any).restore();\n});\n\nexport const mockGET = (\n  endpoint: RegExp,\n  body: any,\n  headers: any = {},\n  status = '200'\n) => {\n  gets.push({ endpoint, body, headers, status });\n};\n\nexport const mockPOST = (\n  endpoint: RegExp,\n  body: any,\n  headers: any = {},\n  status = '200'\n) => {\n  posts.push({ endpoint, body, headers, status });\n};\n\nexport const clearMockPosts = () => {\n  posts = [];\n};\n\nexport const checkTimers = (clock: any) => {\n  expect(!!clock.timers).to.equal(true, 'Expected timers not found');\n  expect(\n    Object.keys(clock.timers).length,\n    `Timers still to be run ${JSON.stringify(clock.timers)}`\n  ).to.equal(0);\n};\n\nexport const delay = (millis: number) => {\n  return new Promise(function (resolve) {\n    window.setTimeout(resolve, millis);\n  });\n};\n\nexport const assertScreenshot = async (\n  filename: string,\n  clip: Clip,\n  waitFor?: { clock?: any; predicate?: () => boolean }\n) => {\n  if (waitFor) {\n    if (waitFor.clock) {\n      waitFor.clock.restore();\n    }\n    await waitUntil(waitFor.predicate);\n  }\n\n  const threshold = 0.1;\n  const exclude: Clip[] = [];\n\n  try {\n    await (window as any).matchPageSnapshot(\n      `${filename}.png`,\n      clip,\n      exclude,\n      threshold\n    );\n  } catch (error) {\n    if (error.message) {\n      throw new Error(\n        `${error.message} ${\n          error.expected\n            ? `Expected ${error.expected} but got ${error.actual}`\n            : ''\n        } ${error.files ? `\\n${error.files.join('\\n')}` : ''}`\n      );\n    }\n    throw new Error(error);\n  }\n};\n\nexport const getClip = (ele: HTMLElement) => {\n  let clip: any = ele.getBoundingClientRect();\n  if (!clip.width || !clip.height) {\n    clip = ele.shadowRoot.firstElementChild.getBoundingClientRect();\n  }\n\n  const padding = 10;\n  const width = clip.width + padding * 2;\n  const height = clip.height + padding * 2;\n  const y = clip.y - padding;\n  const x = clip.x - padding;\n\n  const newClip = {\n    x,\n    y,\n    width,\n    height,\n    bottom: y + height,\n    right: x + width,\n    top: y,\n    left: x,\n  };\n\n  return newClip;\n};\n\nexport const getHTMLAttrs = (attrs: any = {}) => {\n  return Object.keys(attrs)\n    .map((name: string) => `${name}='${attrs[name]}'`)\n    .join(' ');\n};\n\nexport const getHTML = (tag: string, attrs: any = {}) => {\n  return `<${tag} ${getHTMLAttrs(attrs)}></${tag}>`;\n};\n\nexport const loadStore = async () => {\n  const store: Store = await fixture(\n    `<temba-store \n      completion='/test-assets/store/editor.json'\n      groups='/test-assets/store/groups.json'\n      languages='/test-assets/store/languages.json'\n      fields='/test-assets/store/fields.json'\n    />`\n  );\n  await store.httpComplete;\n  await store.httpComplete;\n\n  return store;\n};\n\nexport const mockNow = (isodate: string) => {\n  const now = DateTime.fromISO(isodate);\n  // mock the current time\n  replace(DateTime, 'now', () => {\n    return now;\n  });\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.42.1",
+  "version": "0.43.1",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/compose/Compose.ts

@@ -16,13 +16,14 @@ import { Completion } from '../completion/Completion';
 export interface Attachment {
   uuid: string;
   content_type: string;
-  type: string; //deprecated
   url: string;
-  name: string;
+  filename: string;
   size: number;
   error: string;
 }
 
+export const upload_endpoint = '/api/v2/media.json';
+
 export class Compose extends FormElement {
   static get styles() {
     return css`
@@ -199,7 +200,7 @@ export class Compose extends FormElement {
   accept = ''; //e.g. ".xls,.xlsx"
 
   @property({ type: String, attribute: false })
-  endpoint = '/msgmedia/upload/';
+  endpoint = upload_endpoint;
 
   @property({ type: Boolean, attribute: false })
   uploading: boolean;
@@ -334,19 +335,21 @@ export class Compose extends FormElement {
     payload.append('file', file);
     postFormData(url, payload)
       .then((response: WebResponse) => {
-        if (response.json.error) {
-          this.addErrorValue(file, response.json.error);
-        } else {
-          const attachment = response.json as Attachment;
-          if (attachment) {
-            this.addValue(attachment);
-            this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);
-          }
+        const attachment = response.json as Attachment;
+        if (attachment) {
+          this.addValue(attachment);
+          this.fireCustomEvent(CustomEventType.AttachmentAdded, attachment);
         }
       })
-      .catch((error: string) => {
-        console.log(error);
-        this.addErrorValue(file, error);
+      .catch((error: WebResponse) => {
+        let fileError = '';
+        if (error.status === 400) {
+          fileError = error.json.file[0];
+        } else {
+          fileError = 'Server failure';
+        }
+        console.error(fileError);
+        this.addErrorValue(file, fileError);
       })
       .finally(() => {
         this.uploading = false;
@@ -357,12 +360,11 @@ export class Compose extends FormElement {
     const errorValue = {
       uuid: Math.random().toString(36).slice(2, 6),
       content_type: file.type,
-      type: file.type,
-      name: file.name,
+      filename: file.name,
       url: file.name,
       size: file.size,
       error: error,
-    };
+    } as Attachment;
     this.errorValues.push(errorValue);
     this.requestUpdate('errorValues');
   }
@@ -492,13 +494,13 @@ export class Compose extends FormElement {
                 </div>
                 <div class="attachment-name">
                   <span
-                    title="${attachment.name} (${formatFileSize(
+                    title="${attachment.filename} (${formatFileSize(
                       attachment.size,
                       2
-                    )}) ${attachment.type}"
-                    >${truncate(attachment.name, 25)}
+                    )}) ${attachment.content_type}"
+                    >${truncate(attachment.filename, 25)}
                     (${formatFileSize(attachment.size, 0)})
-                    ${formatFileType(attachment.type)}</span
+                    ${formatFileType(attachment.content_type)}</span
                   >
                 </div>
               </div>`;
@@ -516,11 +518,11 @@ export class Compose extends FormElement {
                 </div>
                 <div class="attachment-name">
                   <span
-                    title="${errorAttachment.name} (${formatFileSize(
+                    title="${errorAttachment.filename} (${formatFileSize(
                       0,
                       0
                     )}) - Attachment failed - ${errorAttachment.error}"
-                    >${truncate(errorAttachment.name, 25)}
+                    >${truncate(errorAttachment.filename, 25)}
                     (${formatFileSize(0, 0)}) - Attachment failed</span
                   >
                 </div>

package/src/contacts/ContactChat.ts

@@ -267,7 +267,7 @@ export class ContactChat extends ContactStoreElement {
     const buttonName = evt.detail.name;
     if (buttonName === 'Send') {
       const payload = {
-        contacts: [this.currentContact.uuid],
+        contact: this.currentContact.uuid,
       };
       const compose = evt.currentTarget as Compose;
       if (compose) {
@@ -277,8 +277,7 @@ export class ContactChat extends ContactStoreElement {
         }
         const attachments = compose.values.map(attachment => {
           const content_type = attachment.content_type;
-          const url = new URL(attachment.url, document.baseURI).href;
-          return content_type + ':' + url;
+          return content_type + ':' + attachment.url;
         });
         if (attachments.length > 0) {
           payload['attachments'] = attachments;
@@ -290,7 +289,7 @@ export class ContactChat extends ContactStoreElement {
 
       const genericError = buttonName + ' failed, please try again.';
 
-      postJSON(`/api/v2/broadcasts.json`, payload)
+      postJSON(`/api/v2/messages.json`, payload)
         .then(response => {
           if (response.status < 400) {
             compose.reset();

package/src/contacts/ContactHistory.ts

@@ -55,6 +55,7 @@ import {
   MIN_CHAT_REFRESH,
   SCROLL_THRESHOLD,
 } from './helpers';
+import { Lightbox } from '../lightbox/Lightbox';
 
 // when images load, make sure we are on the bottom of the scroll window if necessary
 export const loadHandler = function (event) {
@@ -128,6 +129,7 @@ export class ContactHistory extends RapidElement {
         flex-grow: 1;
         min-height: 0;
         padding-top: 3em;
+        padding-bottom: 1em;
       }
 
       temba-loading {
@@ -222,6 +224,10 @@ export class ContactHistory extends RapidElement {
       .sticky-bin .attn {
         color: var(--color-text);
       }
+
+      .attachment img {
+        cursor: pointer;
+      }
     `;
   }
 
@@ -756,7 +762,7 @@ export class ContactHistory extends RapidElement {
         return renderTicketOpened(ticketEvent, closeHandler, !this.ticket);
       }
       case Events.TICKET_NOTE_ADDED:
-        return renderNoteCreated(event as TicketEvent, this.agent);
+        return renderNoteCreated(event as TicketEvent);
 
       case Events.TICKET_ASSIGNED:
         return renderTicketAssigned(event as TicketEvent);
@@ -851,12 +857,24 @@ export class ContactHistory extends RapidElement {
     return !this.ticketEvents[ticket.uuid];
   }
 
+  private handleEventClicked(event) {
+    const ele = event.target as HTMLDivElement;
+    if (ele.tagName == 'IMG') {
+      // if we have one, show in our lightbox
+      const lightbox = document.querySelector('temba-lightbox') as Lightbox;
+      if (lightbox) {
+        lightbox.showElement(ele);
+      }
+    }
+  }
+
   private renderEventContainer(event: ContactEvent) {
     const stickyId = this.getStickyId(event);
     const isSticky = !!stickyId;
 
     const renderedEvent = html`
       <div
+        @click=${this.handleEventClicked}
         class="${this.ticket
           ? 'active-ticket'
           : ''} event ${event.type} ${isSticky ? 'has-sticky' : ''}"

package/src/contacts/events.ts

@@ -1,6 +1,13 @@
 import { css, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
-import { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';
+import {
+  getClasses,
+  oxford,
+  oxfordFn,
+  oxfordNamed,
+  renderAvatar,
+  timeSince,
+} from '../utils';
 import { Icon } from '../vectoricon';
 import { getDisplayName } from './helpers';
 
@@ -165,11 +172,20 @@ export const getEventStyles = () => {
     }
 
     .msg {
-      padding: var(--event-padding);
-      border-radius: 8px;
+      border-radius: calc(var(--curvature) * 2.5);
       border: 2px solid rgba(100, 100, 100, 0.1);
       max-width: 300px;
       word-break: break-word;
+      overflow: hidden;
+    }
+
+    .msg.attachments-1.no-message {
+      border: 2px solid transparent;
+      background-color: transparent !important;
+    }
+
+    .msg .text {
+      padding: var(--event-padding);
     }
 
     .event.msg_received .msg {
@@ -186,7 +202,13 @@ export const getEventStyles = () => {
     .event.msg_created .msg,
     .event.broadcast_created .msg,
     .event.ivr_created .msg {
-      background: rgb(231, 243, 255);
+      background: var(--color-primary-dark);
+      color: white;
+      font-weight: 400;
+    }
+
+    .msg.automated {
+      background: var(--color-automated) !important;
     }
 
     .webhook_called {
@@ -439,7 +461,17 @@ export const getEventStyles = () => {
     }
 
     .attachments {
-      margin-top: 1em;
+      display: flex;
+      flex-wrap: wrap;
+      margin: -0.2em;
+    }
+
+    .attachment {
+      flex: 1 0 45%;
+      border-top: 0.05em solid transparent;
+      border-left: 0.05em solid transparent;
+      margin-top: 0.05em;
+      margin-left: 0.05em;
     }
   `;
 };
@@ -636,36 +668,10 @@ export const getEventGroupType = (event: ContactEvent, ticket: string) => {
   return 'verbose';
 };
 
-export const renderAvatar = (user: User, agent = '') => {
-  const current = user && user.email === agent;
-  if (user.email === FLOW_USER_ID || !user || !user.first_name) {
-    return html`<temba-tip text="Automated message" position="top"
-      ><div class="avatar flow" style="margin-top:0.5em">
-        <temba-icon size="1" name="${Icon.flow_user}" /></div
-    ></temba-tip>`;
-  } else {
-    return html`<temba-tip
-      text="${user.first_name + ' ' + user.last_name}"
-      position="top"
-    >
-      <div
-        class="avatar"
-        style="
-          border-radius: 9999px; 
-          display:flex;
-          align-items:center;
-          border: 2px solid rgba(0,0,0,.05);
-          background: ${current ? 'var(--color-primary-dark)' : '#eee'};
-          color: ${current ? '#fff' : '#999'} ;
-          font-weight: 400;
-          padding: 0.5em;
-          line-height:1.2em;
-        "
-      >
-        ${user.first_name[0] + user.last_name[0]}
-      </div>
-    </temba-tip>`;
-  }
+export const renderUserAvatar = (user: User) => {
+  return html`<div style="width:3.5em;font-size:0.8em">
+    ${renderAvatar({ user, position: 'left' })}
+  </div>`;
 };
 
 export const renderAttachment = (attachment: string): TemplateResult => {
@@ -676,10 +682,12 @@ export const renderAttachment = (attachment: string): TemplateResult => {
 
   let inner = null;
   if (mediaType === 'image') {
-    inner = html`<div class="linked" onclick="goto(event)" href="${url}"><img src="${url}" style="width:100%;height:auto;display:block"></img></a>`;
+    inner = html`
+      <img src="${url}" style="height:auto;width:100%;display:block;" />
+    `;
   } else if (ext === 'pdf') {
     return html`<div
-      style="width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
+      style="width:100%;height:300px;border-radius:calc(var(--curvature) * 2.5);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
     ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
   } else if (mediaType === 'video') {
     return html`<video
@@ -724,11 +732,7 @@ export const renderAttachment = (attachment: string): TemplateResult => {
     </div>`;
   }
 
-  return html`<div
-    style="width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 6px 0px rgba(0,0,0,.15);overflow:hidden"
-  >
-    ${inner}
-  </div>`;
+  return html`<div style="">${inner}</div>`;
 };
 
 export const renderMsgEvent = (
@@ -741,6 +745,7 @@ export const renderMsgEvent = (
 
   // summary items which appear under the message bubble
   const summary: TemplateResult[] = [];
+
   if (event.logs_url) {
     summary.push(html` <div class="icon-link">
       <temba-icon
@@ -786,17 +791,32 @@ export const renderMsgEvent = (
 
   return html`<div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
-      ${event.msg.text ? html`<div class="msg">${event.msg.text}</div>` : null}
-      ${event.msg.attachments
-        ? html`<div class="attachments">
-            ${event.msg.attachments.map(attachment =>
-              renderAttachment(attachment)
-            )}
-          </div> `
-        : null}
+      <div
+        class="${event.msg.text ? '' : 'no-message'} attachments-${(
+          event.msg.attachments || []
+        ).length} ${getClasses({
+          msg: true,
+          automated: !isInbound && !event.msg.created_by,
+        })}"
+      >
+        ${event.msg.text
+          ? html` <div class="text">${event.msg.text}</div> `
+          : null}
+        ${event.msg.attachments
+          ? html`<div class="attachments">
+              ${event.msg.attachments.map(
+                attachment =>
+                  html` <div class="attachment">
+                    ${renderAttachment(attachment)}
+                  </div>`
+              )}
+            </div> `
+          : null}
+      </div>
       ${!event.msg.text && !event.msg.attachments
         ? html`<div class="unsupported">Unsupported Message</div>`
         : null}
+
       <div
         class="msg-summary"
         style="flex-direction:row${isInbound ? '-reverse' : ''}"
@@ -807,12 +827,10 @@ export const renderMsgEvent = (
     </div>
 
     ${!isInbound
-      ? html`<div style="margin-left:0.8em;margin-top:0.3em">
+      ? html`<div style="margin-left:0.8em;margin-top:0.3em;font-size:0.9em">
           ${event.msg.created_by
-            ? html`<div style="font-size:0.8em">
-                ${renderAvatar(event.msg.created_by, agent)}
-              </div>`
-            : renderAvatar({ email: FLOW_USER_ID })}
+            ? renderUserAvatar(event.msg.created_by)
+            : renderUserAvatar(null)}
         </div>`
       : null}
   </div>`;
@@ -934,10 +952,7 @@ export const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {
   `;
 };
 
-export const renderNoteCreated = (
-  event: TicketEvent,
-  agent: string
-): TemplateResult => {
+export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
   return html`<div style="display:flex;align-items:flex-start">
     <div style="display:flex;flex-direction:column">
       <div class="description">${event.note}</div>
@@ -951,7 +966,7 @@ export const renderNoteCreated = (
       </div>
     </div>
     <div style="margin-left:0.8em;margin-top:0.3em;font-size:0.8em">
-      ${renderAvatar(event.created_by, agent)}
+      ${renderUserAvatar(event.created_by)}
     </div>
   </div>`;
 };
@@ -1187,16 +1202,16 @@ export const renderCampaignFiredEvent = (
       Campaign
       <span
         class="linked"
-        onclick="goto(event)"
-        href="/campaign/read/${event.campaign.uuid}"
+        onclick="goto(event, this)"
+        href="/campaign/read/${event.campaign.uuid}/"
         >${event.campaign.name}</span
       >
       ${event.fired_result === 'S' ? 'skipped' : 'triggered'}
       <span
         class="linked"
-        onclick="goto(event)"
+        onclick="goto(event, this)"
         href="/campaignevent/read/${event.campaign.uuid}/${event.campaign_event
-          .id}"
+          .id}/"
       >
         ${event.campaign_event.offset_display}
         ${event.campaign_event.relative_to.name}</span