@nyaruka/temba-components 0.134.4 → 0.134.6

package/CHANGELOG.md

@@ -4,16 +4,46 @@ 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.134.4](https://github.com/nyaruka/temba-components/compare/v0.134.0...v0.134.4)
+#### [v0.134.6](https://github.com/nyaruka/temba-components/compare/v0.134.5...v0.134.6)
+
+- Deleted message treatment [`#775`](https://github.com/nyaruka/temba-components/pull/775)
+- Add screenshot tests for deleted messages [`db32633`](https://github.com/nyaruka/temba-components/commit/db32633ab3153d658e7d8f77cf77e8ce84186bdc)
+- MsgEVent._deleted.user is optional [`b8135d9`](https://github.com/nyaruka/temba-components/commit/b8135d944cb260b0594a0b40c7c4764d420045c3)
+
+#### [v0.134.5](https://github.com/nyaruka/temba-components/compare/v0.134.4...v0.134.5)
+
+> 2 December 2025
+
+- Fix message log links [`6bfb571`](https://github.com/nyaruka/temba-components/commit/6bfb571d6e09dba4d5b9ef9fea3d50718d98dbed)
+
+#### [v0.134.4](https://github.com/nyaruka/temba-components/compare/v0.134.3...v0.134.4)
+
+> 2 December 2025
 
 - Nicer popups for chat messages [`#773`](https://github.com/nyaruka/temba-components/pull/773)
 - Fix groupings, dates, new lines in messages [`#772`](https://github.com/nyaruka/temba-components/pull/772)
+- Revert unintended change [`4615b1d`](https://github.com/nyaruka/temba-components/commit/4615b1d68cb89060dac219c3ecab18488cee73d5)
+
+#### [v0.134.3](https://github.com/nyaruka/temba-components/compare/v0.134.2...v0.134.3)
+
+> 1 December 2025
+
 - Fix handling of showMessageLogsAfter property in ContactChat component [`#771`](https://github.com/nyaruka/temba-components/pull/771)
+
+#### [v0.134.2](https://github.com/nyaruka/temba-components/compare/v0.134.1...v0.134.2)
+
+> 1 December 2025
+
 - Generate message log URLs for messages [`#770`](https://github.com/nyaruka/temba-components/pull/770)
-- Fix rendering of note added events when no user [`#769`](https://github.com/nyaruka/temba-components/pull/769)
 - Generate message log URLs for messages created within a specified number of days. [`1e6433d`](https://github.com/nyaruka/temba-components/commit/1e6433dcaccf3a8cf1e07f5865eda16db7f16e70)
 - Use Date type property on Chat component [`cf244e1`](https://github.com/nyaruka/temba-components/commit/cf244e102fbb2aaa22eb688eeda9172270ddfb70)
-- Revert unintended change [`4615b1d`](https://github.com/nyaruka/temba-components/commit/4615b1d68cb89060dac219c3ecab18488cee73d5)
+- Apply suggestions from code review [`9ceae6a`](https://github.com/nyaruka/temba-components/commit/9ceae6a95aed669824d771c8cefeb7745f7628af)
+
+#### [v0.134.1](https://github.com/nyaruka/temba-components/compare/v0.134.0...v0.134.1)
+
+> 27 November 2025
+
+- Fix rendering of note added events when no user [`#769`](https://github.com/nyaruka/temba-components/pull/769)
 
 #### [v0.134.0](https://github.com/nyaruka/temba-components/compare/v0.133.0...v0.134.0)
 

package/dist/temba-components.js

@@ -2415,6 +2415,16 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
         color: #ad47479a;
       }
 
+      .deleted .bubble {
+        background: #fff;
+        color: #999;
+        border: 1px solid #e0e0e0;
+      }
+
+      .deleted .bubble .name {
+        color: #aaa;
+      }
+
       .message-text {
         white-space: pre-wrap;
         margin-bottom: 0.5em;
@@ -2422,6 +2432,12 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
         word-break: break-word;
       }
 
+      .message-deleted {
+        font-style: italic;
+        margin-bottom: 0.5em;
+        line-height: 1.2em;
+      }
+
       .chat {
         width: 28rem;
         border-radius: var(--curvature);
@@ -2713,8 +2729,8 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
       </div>`}const x=V`
       <div class="block  ${d?"incoming":"outgoing"}">
         <div class="group-messages" style="flex-grow:1">
-          ${ah(l,(t=>t),((t,e)=>{var i,n;const o=this.msgMap.get(t),s=o,r=o._status?o._status.status:"",a=(null===(i=s.msg)||void 0===i?void 0:i.unsendable_reason)||(null===(n=s._status)||void 0===n?void 0:n.reason)&&("failed"===r||"errored"===r);return V`<div
-                class="row message ${r} ${a?"error":""}"
+          ${ah(l,(t=>t),((t,e)=>{var i,n;const o=this.msgMap.get(t),s=o,r=o._status?o._status.status:"",a=(null===(i=s.msg)||void 0===i?void 0:i.unsendable_reason)||(null===(n=s._status)||void 0===n?void 0:n.reason)&&("failed"===r||"errored"===r)?"error":"",l=s._deleted?"deleted":"";return V`<div
+                class="row message ${r} ${a} ${l}"
               >
                 ${this.renderMessage(o,0==e?u:null)}
               </div>`}))}
@@ -2731,19 +2747,19 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
       </div>
       ${null}
       ${b}
-    `;return{html:x,timestamp:y}}renderMessage(t,e=null){var i,n;if(t._rendered)return V`<div class="event">${t._rendered.html}</div>`;const o=t,s=null===(i=o.msg)||void 0===i?void 0:i.unsendable_reason,r=null===(n=o._status)||void 0===n?void 0:n.reason,a=s?(t=>{switch(t){case"no_route":return"No channel available to send message";case"contact_blocked":return"Contact has been blocked";case"contact_stopped":return"Contact has been stopped";case"contact_archived":return"Contact is archived";case"org_suspended":return"Workspace is suspended";case"looping":return"Message loop detected";default:return"Unable to send message"}})(s):r?(t=>{switch(t){case"error_limit":return"Error limit reached";case"too_old":return"Message is too old to send";case"channel_removed":return"Channel was removed";default:return"Message failed to send"}})(r):null,l=this.showMessageLogsAfter&&o.created_on>=this.showMessageLogsAfter&&o.msg.channel?`/channels/channel/logs/${o.msg.channel}/msg/${t.uuid}/`:null;return V`
+    `;return{html:x,timestamp:y}}renderMessage(t,e=null){var i,n,o;if(t._rendered)return V`<div class="event">${t._rendered.html}</div>`;const s=t,r=null===(i=s.msg)||void 0===i?void 0:i.unsendable_reason,a=null===(n=s._status)||void 0===n?void 0:n.reason,l=r?(t=>{switch(t){case"no_route":return"No channel available to send message";case"contact_blocked":return"Contact has been blocked";case"contact_stopped":return"Contact has been stopped";case"contact_archived":return"Contact is archived";case"org_suspended":return"Workspace is suspended";case"looping":return"Message loop detected";default:return"Unable to send message"}})(r):a?(t=>{switch(t){case"error_limit":return"Error limit reached";case"too_old":return"Message is too old to send";case"channel_removed":return"Channel was removed";default:return"Message failed to send"}})(a):null,c=this.showMessageLogsAfter&&s.created_on>=this.showMessageLogsAfter&&s.msg.channel?`/channels/channel/logs/${s.msg.channel.uuid}/msg/${t.uuid}/`:null,h=s._deleted,d=h?s._deleted.by_contact?"contact":(null===(o=s._deleted.user)||void 0===o?void 0:o.name)||"user":null;return V`
       <div class="bubble-wrap">
         <div class="popup" style="white-space: nowrap;">
-          ${a?V`<div style="color: var(--color-error); margin-right: 1em;">
-                ${a}
+          ${l?V`<div style="color: var(--color-error); margin-right: 1em;">
+                ${l}
               </div>`:null}
           <temba-date
-            value="${o.created_on.toISOString()}"
+            value="${s.created_on.toISOString()}"
             display="relative"
           ></temba-date>
-          ${l?V`<a
+          ${c?V`<a
                 style="margin-left: 1em; color: var(--color-primary-dark);"
-                href="${l}"
+                href="${c}"
                 target="_blank"
                 rel="noopener noreferrer"
                 ><temba-icon name="log"></temba-icon
@@ -2751,13 +2767,18 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
 
           <div class="arrow">▼</div>
         </div>
-        ${o.msg.text?V`<div class="bubble">
+        ${h?V`<div class="bubble">
+              ${e?V`<div class="name">${e}</div>`:null}
+              <div class="message-deleted">
+                Message deleted by ${d}
+              </div>
+            </div>`:s.msg.text?V`<div class="bubble">
               ${e?V`<div class="name">${e}</div>`:null}
-              <div class="message-text">${o.msg.text}</div>
+              <div class="message-text">${s.msg.text}</div>
             </div>`:null}
 
         <div class="attachments">
-          ${(o.msg.attachments||[]).map((t=>V`<temba-thumbnail
+          ${(s.msg.attachments||[]).map((t=>V`<temba-thumbnail
                 attachment="${t}"
               ></temba-thumbnail>`))}
         </div>
@@ -3039,7 +3060,7 @@ const{I:th}=at,eh=()=>document.createComment(""),ih=(t,e,i)=>{const n=t._$AA.par
     `}set showMessageLogsAfter(t){const e=this._showMessageLogsAfter;this._showMessageLogsAfter=t?new Date(t):null,this.requestUpdate("showMessageLogsAfter",e)}get showMessageLogsAfter(){return this._showMessageLogsAfter}constructor(){super(),this.contactsEndpoint="/api/v2/contacts.json",this.currentNote="",this.showDetails=!0,this.currentTicket=null,this.currentContact=null,this.agent="",this.blockFetching=!1,this.showInterrupt=!1,this.avatar=yl,this._showMessageLogsAfter=null,this.ticket=null,this.beforeUUID=null,this.afterUUID=null,this.refreshId=null,this.polling=!1,this.pollingInterval=2e3,this.lastFetchTime=null}firstUpdated(t){super.firstUpdated(t)}connectedCallback(){super.connectedCallback(),this.chat=this.shadowRoot.querySelector("temba-chat")}disconnectedCallback(){super.disconnectedCallback(),this.refreshId&&clearInterval(this.refreshId)}updated(t){var e;super.updated(t),(t.has("data")||t.has("currentContact"))&&(this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),this.currentContact=this.data),t.has("currentContact")&&this.currentContact&&(this.chat=this.shadowRoot.querySelector("temba-chat"),this.currentContact.uuid!==(null===(e=t.get("currentContact"))||void 0===e?void 0:e.uuid)?this.reset():setTimeout((()=>this.checkForNewMessages()),500),this.fetchPreviousMessages())}reset(){this.chat&&this.chat.reset(),this.blockFetching=!1,this.ticket=null,this.beforeUUID=null,this.afterUUID=null,this.refreshId=null,this.polling=!1,this.pollingInterval=2e3,this.lastFetchTime=null,this.errorMessage=null;const t=this.shadowRoot.querySelector("temba-compose");t&&t.reset()}handleInterrupt(){this.fireCustomEvent(Dn.Interrupt,{contact:this.currentContact})}handleRetry(){this.shadowRoot.querySelector("temba-compose").triggerSend()}handleSend(t){this.errorMessage=null;const e=t.currentTarget,i=t.detail.langValues.und,n={contact:this.currentContact.uuid},o=i.text;o&&o.length>0&&(n.text=o);const s=i.attachments;if(s&&s.length>0){const t=s.map((t=>t.uuid));n.attachments=t}this.currentTicket&&(n.ticket=this.currentTicket.uuid);const r="Send failed, please try again.";pe(`/contact/chat/${this.currentContact.uuid}/`,n).then((t=>{if(t.status<400){const i=t.json.event;i.created_on=new Date(i.created_on),this.chat.addMessages([i],null,!0),this.pollingInterval=2e3,this.checkForNewMessages(),e.reset(),this.fireCustomEvent(Dn.MessageSent,{msg:n,response:t})}else this.errorMessage=r})).catch((()=>{this.errorMessage=r}))}getEndpoint(){return this.contact?`/contact/chat/${this.contact}/`:null}scheduleRefresh(t=!1){this.refreshId&&(clearTimeout(this.refreshId),this.refreshId=null),this.pollingInterval=t?2e3:Math.min(this.pollingInterval+1e3,15e3),this.refreshId=setTimeout((()=>{this.checkForNewMessages()}),this.pollingInterval)}prerender(t){switch(t.type){case mh.AIRTIME_TRANSFERRED:t._rendered={html:Ch(t),type:ch.Inline};break;case mh.CALL_CREATED:case mh.CALL_MISSED:case mh.CALL_RECEIVED:t._rendered={html:Ah(t),type:ch.Inline};break;case mh.CHAT_STARTED:t._rendered={html:vh(t),type:ch.Inline};break;case mh.CONTACT_FIELD_CHANGED:t._rendered={html:yh(t),type:ch.Inline};break;case mh.CONTACT_GROUPS_CHANGED:t._rendered={html:kh(t),type:ch.Inline};break;case mh.CONTACT_LANGUAGE_CHANGED:t._rendered={html:Sh(t),type:ch.Inline};break;case mh.CONTACT_NAME_CHANGED:t._rendered={html:bh(t),type:ch.Inline};break;case mh.CONTACT_STATUS_CHANGED:t._rendered={html:Eh(t),type:ch.Inline};break;case mh.CONTACT_URNS_CHANGED:t._rendered={html:xh(t),type:ch.Inline};break;case mh.OPTIN_REQUESTED:case mh.OPTIN_STARTED:case mh.OPTIN_STOPPED:t._rendered={html:Th(t),type:ch.Inline};break;case mh.RUN_STARTED:case mh.RUN_ENDED:t._rendered={html:fh(t),type:ch.Inline};break;case mh.TICKET_ASSIGNEE_CHANGED:t._rendered={html:wh(t),type:ch.Inline};break;case mh.TICKET_CLOSED:t._rendered={html:_h(t,"closed"),type:ch.Inline};break;case mh.TICKET_OPENED:t._rendered={html:_h(t,"opened"),type:ch.Inline};break;case mh.TICKET_NOTE_ADDED:t._rendered={html:_h(t,"noted"),type:ch.Inline};break;case mh.TICKET_REOPENED:t._rendered={html:_h(t,"reopened"),type:ch.Inline};break;case mh.TICKET_TOPIC_CHANGED:t._rendered={html:V`<div>
             Topic changed to
             <strong>${t.topic.name}</strong>
-          </div>`,type:ch.Inline};break;default:console.error("Unknown event type",t)}}createMessages(t){if(t.events){const e=[];return t.events.forEach((t=>{(!this.afterUUID||t.uuid.toLowerCase()>this.afterUUID.toLowerCase())&&(this.afterUUID=t.uuid),t.created_on=new Date(t.created_on),"msg_created"===t.type||"msg_received"===t.type||"ivr_created"===t.type?e.push(t):(this.prerender(t),t._rendered&&e.push(t))})),e.filter((t=>!!t))}return[]}checkForNewMessages(){var t;if(this.polling)return;const e=this.chat;if(this.currentContact&&this.afterUUID){this.polling=!0,this.lastFetchTime=Date.now();const i=this.getEndpoint();if(!i)return;const n=this.currentContact.uuid;Mh(i,null===(t=this.currentTicket)||void 0===t?void 0:t.uuid,null,this.afterUUID).then((t=>{const i=this.createMessages(t);if(i.reverse(),n===this.currentContact.uuid){const t=i.length>0;e.addMessages(i,null,!0),this.polling=!1,this.scheduleRefresh(t)}else this.polling=!1}))}}fetchPreviousMessages(){var t;const e=this.chat,i=this;if(e&&!e.fetching&&!i.blockFetching&&(e.fetching=!0,this.currentContact)){const n=this.getEndpoint();if(!n)return;if(!this.beforeUUID&&!this.afterUUID){const t=Jt();this.beforeUUID=t,this.afterUUID=t}Mh(n,null===(t=this.currentTicket)||void 0===t?void 0:t.uuid,this.beforeUUID,null).then((t=>{const n=this.createMessages(t);if(n.reverse(),0===n.length)i.blockFetching=!0;else if(t.next)this.beforeUUID=t.next;else if(i.blockFetching=!0,t.events&&t.events.length>0){const i=t.events[t.events.length-1];e.setEndOfHistory(new Date(i.created_on))}e.addMessages(n),this.scheduleRefresh()}))}}fetchComplete(){this.chat&&(this.chat.fetching=!1)}getTembaCompose(){return this.currentTicket?this.currentContact&&"active"!==this.currentContact.status||this.currentTicket.closed_on?null:this.getCompose():this.currentContact&&"active"!==this.currentContact.status?null:this.getCompose()}getCompose(){return V`<div class="border"></div>
+          </div>`,type:ch.Inline}}}createMessages(t){if(t.events){const e=[];return t.events.forEach((t=>{(!this.afterUUID||t.uuid.toLowerCase()>this.afterUUID.toLowerCase())&&(this.afterUUID=t.uuid),t.created_on=new Date(t.created_on),"msg_created"===t.type||"msg_received"===t.type||"ivr_created"===t.type?e.push(t):(this.prerender(t),t._rendered&&e.push(t))})),e.filter((t=>!!t))}return[]}checkForNewMessages(){var t;if(this.polling)return;const e=this.chat;if(this.currentContact&&this.afterUUID){this.polling=!0,this.lastFetchTime=Date.now();const i=this.getEndpoint();if(!i)return;const n=this.currentContact.uuid;Mh(i,null===(t=this.currentTicket)||void 0===t?void 0:t.uuid,null,this.afterUUID).then((t=>{const i=this.createMessages(t);if(i.reverse(),n===this.currentContact.uuid){const t=i.length>0;e.addMessages(i,null,!0),this.polling=!1,this.scheduleRefresh(t)}else this.polling=!1}))}}fetchPreviousMessages(){var t;const e=this.chat,i=this;if(e&&!e.fetching&&!i.blockFetching&&(e.fetching=!0,this.currentContact)){const n=this.getEndpoint();if(!n)return;if(!this.beforeUUID&&!this.afterUUID){const t=Jt();this.beforeUUID=t,this.afterUUID=t}Mh(n,null===(t=this.currentTicket)||void 0===t?void 0:t.uuid,this.beforeUUID,null).then((t=>{const n=this.createMessages(t);if(n.reverse(),0===n.length)i.blockFetching=!0;else if(t.next)this.beforeUUID=t.next;else if(i.blockFetching=!0,t.events&&t.events.length>0){const i=t.events[t.events.length-1];e.setEndOfHistory(new Date(i.created_on))}e.addMessages(n),this.scheduleRefresh()}))}}fetchComplete(){this.chat&&(this.chat.fetching=!1)}getTembaCompose(){return this.currentTicket?this.currentContact&&"active"!==this.currentContact.status||this.currentTicket.closed_on?null:this.getCompose():this.currentContact&&"active"!==this.currentContact.status?null:this.getCompose()}getCompose(){return V`<div class="border"></div>
       <div class="compose">
         <temba-compose
           attachments