@nyaruka/temba-components 0.64.1 → 0.65.1

package/.github/workflows/build.yml

@@ -6,6 +6,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
+      - name: Set Timezone
+        uses: szenius/set-timezone@v1.2
+        with:
+          timezoneLinux: "UTC"
       - name: Checkout (GitHub)
         uses: actions/checkout@v3
       - run: docker network create --driver bridge textit_default

package/CHANGELOG.md

@@ -4,8 +4,23 @@ 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.65.1](https://github.com/nyaruka/temba-components/compare/v0.65.0...v0.65.1)
+
+- Customizable compose styling [`#386`](https://github.com/nyaruka/temba-components/pull/386)
+- Temp removal assertinos with tz name [`6ba7fe9`](https://github.com/nyaruka/temba-components/commit/6ba7fe95e4bf32d2bd4d305e914c5b84f81a158b)
+- Set timezone for build [`1d9b73b`](https://github.com/nyaruka/temba-components/commit/1d9b73b5ddc43c98b81a1ef652e5c9725aa28b22)
+- Match correct OS for github build [`a277f7d`](https://github.com/nyaruka/temba-components/commit/a277f7d732a40d3a477266acc83866a189cda21d)
+
+#### [v0.65.0](https://github.com/nyaruka/temba-components/compare/v0.64.1...v0.65.0)
+
+> 11 December 2023
+
+- Add queued treatment for messages, allow updating most recent message [`#385`](https://github.com/nyaruka/temba-components/pull/385)
+
 #### [v0.64.1](https://github.com/nyaruka/temba-components/compare/v0.64.0...v0.64.1)
 
+> 23 November 2023
+
 - Improve extraction of initials for avatars [`#383`](https://github.com/nyaruka/temba-components/pull/383)
 - Improve non-ascii support in extractInitials [`2f291cd`](https://github.com/nyaruka/temba-components/commit/2f291cd0400cce84ae7657c19578db680f451660)
 
@@ -104,12 +119,16 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Fix reading created_by for msg events [`#364`](https://github.com/nyaruka/temba-components/pull/364)
 - Add logical icon names for optin and optout [`#365`](https://github.com/nyaruka/temba-components/pull/365)
 
-#### [v0.58.8](https://github.com/nyaruka/temba-components/compare/v0.58.6...v0.58.8)
+#### [v0.58.8](https://github.com/nyaruka/temba-components/compare/v0.58.7...v0.58.8)
 
 > 28 September 2023
 
 - Update publish.yml [`7dc7d69`](https://github.com/nyaruka/temba-components/commit/7dc7d69822942b39c3b35e06846cfd4c65108b2d)
 
+#### [v0.58.7](https://github.com/nyaruka/temba-components/compare/v0.58.6...v0.58.7)
+
+> 28 September 2023
+
 #### [v0.58.6](https://github.com/nyaruka/temba-components/compare/v0.58.5...v0.58.6)
 
 > 28 September 2023

package/dist/{43489c4a.js → 8ce5c6c3.js}

@@ -1703,34 +1703,26 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             &nbsp;/&nbsp;${this.segments}${t?D`+`:null}
             <div></div>
           </div>`:null}</div> ${n}</div></div>`}}t([ct({type:String})],Xa.prototype,"text",void 0),t([ct({type:Number})],Xa.prototype,"count",void 0),t([ct({type:Number,attribute:!1})],Xa.prototype,"segments",void 0),t([ct({type:Object,attribute:!1})],Xa.prototype,"extended",void 0);class Qa extends lt{constructor(){super(...arguments),this.showLoading=!1}prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){this.store.initialHttpComplete.then((()=>{if(t.detail.url===this.url){const e=this.data;this.data=t.detail.data,this.fireCustomEvent(ke.Refreshed,{data:t.detail.data,previous:e})}}))}updated(t){super.updated(t),t.has("url")&&(this.url?this.store.makeRequest(this.url,{prepareData:this.prepareData}):this.data=null)}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(ke.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(ke.StoreUpdated,this.handleStoreUpdated)}render(){if(!this.store.ready&&this.showLoading)return D`<temba-loading></temba-loading>`}}t([ct({type:String})],Qa.prototype,"url",void 0),t([ct({type:Boolean})],Qa.prototype,"showLoading",void 0),t([ct({type:Object,attribute:!1})],Qa.prototype,"data",void 0);class tl extends Qa{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}setContact(t){this.data=this.prepareData([t]),this.store.updateCache(`${this.endpoint}${this.contact}`,this.data)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([ct({type:String})],tl.prototype,"contact",void 0),t([ct({type:Object,attribute:!1})],tl.prototype,"data",void 0),t([ct({type:String})],tl.prototype,"endpoint",void 0);class el extends tl{static get styles(){return r`
-      .left-pane {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
-        transition: box-shadow 600ms linear;
-      }
-
-      .left-pane.open {
-        z-index: 1000;
-      }
-
       :host {
         flex-grow: 1;
         display: flex;
         flex-direction: row;
         min-height: 0;
-        border-radius: var(--curvature);
+        --compose-shadow: none;
+        --compose-border: none;
+        --compose-padding: 3px;
+        --compose-curvature: none;
       }
 
       .chat-wrapper {
         display: flex;
         flex-grow: 1;
         flex-direction: column;
-        background: #e9e9e9;
-
         min-height: 0;
       }
 
       temba-contact-history {
-        border-bottom: 0px solid #f4f4f4;
+        border-bottom: 2px solid #f6f6f6;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
@@ -1738,11 +1730,8 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       .chatbox {
-        padding: 0.8em;
         display: flex;
         flex-direction: column;
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
       }
 
       .chatbox.full {
@@ -1819,11 +1808,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       class="broadcast"
       name="${pt.broadcast}"
     ></temba-icon>`),t.recipient_count>1&&s.push(D`<div class="recipients">${t.recipient_count} contacts</div>`),s.push(D`<div class="separator">•</div>`)),t.optin&&s.push(D`<div class="optin">${t.optin.name}</div>
-        <div class="separator">•</div>`),s.push(D`<temba-date
+        <div class="separator">•</div>`),"Q"===t.status&&s.push(D`<div>Queued</div>`),s.push(D`<temba-date
       class="time"
       value="${t.created_on}"
       display="duration"
-    ></temba-date>`),D`<div style="display:flex;align-items:flex-start">
+    ></temba-date>`),D`<div
+    style="display:flex;align-items:flex-start"
+    class=${ee({queued:"Q"===t.status})}
+  >
     <div style="display:flex;flex-direction:column">
       <div
         class="${t.msg.text?"":"no-message"} attachments-${(t.msg.attachments||[]).length} ${ee({msg:!0,automated:!i&&!t.created_by})}"
@@ -1869,7 +1861,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       <div
         class="msg-summary"
-        style="flex-direction:row${i?"-reverse":""}"
+        style="align-items:center;flex-direction:row${i?"-reverse":""}"
       >
         <div style="flex-grow:1"></div>
         ${s}
@@ -2111,6 +2103,10 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       background: var(--color-automated) !important;
     }
 
+    .queued {
+      opacity: 0.3;
+    }
+
     .optin_requested {
       --icon-color: var(--color-primary-dark);
     }
@@ -2458,7 +2454,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .attachment img {
         cursor: pointer;
       }
-    `}firstUpdated(t){super.firstUpdated(t),this.handleClose=this.handleClose.bind(this)}updated(t){if(super.updated(t),t.has("mostRecentEvent")&&t.get("mostRecentEvent")&&this.mostRecentEvent&&this.fireCustomEvent(ke.Refreshed),t.has("endDate")&&this.refreshTimeout&&this.endDate&&window.clearTimeout(this.refreshTimeout),t.has("uuid"))if(null==this.uuid)this.reset();else{const t=`/contact/history/${this.uuid}/?_format=json`;if(this.endpoint!==t){if(this.reset(),this.endDate){const t=new Date(this.endDate);this.nextBefore=1e3*t.getTime()+1e3}this.endpoint=t,this.refreshTickets()}}if(t.has("ticket")&&(this.endpoint=null,this.requestUpdate("uuid")),t.has("refreshing")&&this.refreshing&&this.endpoint&&!this.endDate){const t=1e3*(this.getLastEventTime()-1);let e=!1;nl(!1,this.endpoint,this.ticket,null,t).then((t=>{t.events&&t.events.length>0&&this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}}));let i=t.events.reverse();i=i.filter((t=>{const e=!!this.eventGroups.find((e=>!!e.events.find((e=>e.created_on===t.created_on&&e.type===t.type))));return!e})),this.lastRefreshAdded=i.length;const n=[...this.eventGroups];if(this.eventGroups.length>0){const t=n.splice(n.length-1,1)[0];e=t.open,i.splice(0,0,...t.events)}const o=this.getEventGroups(i);o.length&&(e&&(o[o.length-1].open=e),this.eventGroups=[...n,...o]),this.refreshing=!1,this.scheduleRefresh()})).catch((()=>{this.refreshing=!1,this.scheduleRefresh()}))}if(t.has("fetching")&&this.fetching&&(this.nextBefore||(this.nextBefore=1e3*(new Date).getTime()-1e3),this.httpComplete=nl(this.empty,this.endpoint,this.ticket,this.nextBefore,this.nextAfter).then((t=>{t.events&&t.events.length>0&&(this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}})));let e=!1;const i=t.events?t.events.reverse():[];if(this.eventGroups.length>0){const t=this.eventGroups.splice(0,1)[0];e=t.open,i.push(...t.events)}const n=this.getEventGroups(i);n.length&&(e&&(n[n.length-1].open=e),this.eventGroups=[...n,...this.eventGroups]),t.next_before===this.nextBefore&&(this.complete=!0),this.nextBefore=t.next_before,this.nextAfter=t.next_after,this.fetching=!1,this.empty=!1}))),t.has("refreshing")&&!this.refreshing&&this.lastRefreshAdded>0){const t=this.getEventsPane();if(this.lastHeight>0){const e=t.scrollHeight-this.lastHeight;t.scrollHeight-t.scrollTop-e-t.clientHeight<500?this.scrollToBottom():this.showMessageAlert=!0}this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}if(t.has("fetching")&&!this.fetching&&void 0!==t.get("fetching")){const t=this.getEventsPane();if(this.lastHeight&&t.scrollHeight>this.lastHeight){const e=t.scrollTop+t.scrollHeight-this.lastHeight;t.scrollTop=e}this.lastHeight||this.scrollToBottom(),this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}t.has("endpoint")&&this.endpoint&&(this.fetching=!0,this.empty=!0)}refreshTickets(){if(this.ticket){let t=`/api/v2/tickets.json?contact=${this.uuid}`;this.ticket&&(t=`${t}&ticket=${this.ticket}`),se(t).then((t=>{this.tickets=t.reverse()}))}}getEventsPane(){return this.getDiv(".events")}scrollToBottom(t=!1){const e=this.getEventsPane();e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"}),this.showMessageAlert=!1,window.setTimeout((()=>{e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"})}),0)}refresh(){this.scheduleRefresh(500)}getEventGroups(t){const e=[];let i;for(const n of t){const t=rl(n,this.ticket);i&&i.type===t?i.events.push(n):(i&&e.push(i),i={open:!1,events:[n],type:t})}return i&&i.events.length>0&&e.push(i),e}scheduleRefresh(t=-1){if(this.endDate)return;let e=t;if(-1===t){const t=this.getLastEventTime();e=Math.max(Math.min(((new Date).getTime()-t)/2,1e4),500)}t>-1&&this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=window.setTimeout((()=>{this.refreshing?(this.scheduleRefresh(),this.refreshing=!1):this.refreshing=!0}),e)}reset(){this.endpoint=null,this.tickets=null,this.ticketEvents={},this.eventGroups=[],this.fetching=!1,this.complete=!1,this.nextBefore=null,this.nextAfter=null,this.lastHeight=0}handleEventGroupShow(t){const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!0,this.requestUpdate("eventGroups")}handleEventGroupHide(t){t.preventDefault(),t.stopPropagation();const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!1,this.requestUpdate("eventGroups")}handleScroll(){this.getEventsPane().scrollTop<=100&&this.eventGroups.length>0&&!this.fetching&&!this.complete&&(this.fetching=!0)}updateMostRecent(t){this.mostRecentEvent&&this.mostRecentEvent.type===t.type&&this.mostRecentEvent.created_on===t.created_on||(this.mostRecentEvent=t)}getLastEventTime(){const t=this.eventGroups[this.eventGroups.length-1];if(t){const e=t.events[t.events.length-1];return new Date(e.created_on).getTime()}return 0}renderEvent(t){switch(t.type){case sl.IVR_CREATED:case sl.MESSAGE_CREATED:case sl.MESSAGE_RECEIVED:case sl.BROADCAST_CREATED:return ll(t,this.agent);case sl.FLOW_ENTERED:case sl.FLOW_EXITED:return(t=>{let e="Interrupted",i=pt.flow_interrupted;return"I"!==t.status&&(t.type===sl.FLOW_ENTERED?(e="Started",i=pt.flow):(e="Completed",i=pt.flow)),D`
+    `}firstUpdated(t){super.firstUpdated(t),this.handleClose=this.handleClose.bind(this)}updated(t){if(super.updated(t),t.has("mostRecentEvent")&&t.get("mostRecentEvent")&&this.mostRecentEvent&&this.fireCustomEvent(ke.Refreshed),t.has("endDate")&&this.refreshTimeout&&this.endDate&&window.clearTimeout(this.refreshTimeout),t.has("uuid"))if(null==this.uuid)this.reset();else{const t=`/contact/history/${this.uuid}/?_format=json`;if(this.endpoint!==t){if(this.reset(),this.endDate){const t=new Date(this.endDate);this.nextBefore=1e3*t.getTime()+1e3}this.endpoint=t,this.refreshTickets()}}if(t.has("ticket")&&(this.endpoint=null,this.requestUpdate("uuid")),t.has("refreshing")&&this.refreshing&&this.endpoint&&!this.endDate){const t=1e3*(this.getLastEventTime()-1);let e=!1;nl(!1,this.endpoint,this.ticket,null,t).then((t=>{t.events&&t.events.length>0&&this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}}));const i=t.events.reverse();let n=0;this.eventGroups.forEach((t=>{const e=t.events.length;t.events=t.events.filter((t=>!i.find((e=>t.created_on==e.created_on&&t.type===e.type)))),n+=e-t.events.length})),this.lastRefreshAdded=i.length-n;const o=[...this.eventGroups];if(this.eventGroups.length>0){const t=o.splice(o.length-1,1)[0];e=t.open,i.splice(0,0,...t.events)}const s=this.getEventGroups(i);s.length&&(e&&(s[s.length-1].open=e),this.eventGroups=[...o,...s]),this.refreshing=!1,this.scheduleRefresh()})).catch((()=>{this.refreshing=!1,this.scheduleRefresh()}))}if(t.has("fetching")&&this.fetching&&(this.nextBefore||(this.nextBefore=1e3*(new Date).getTime()-1e3),this.httpComplete=nl(this.empty,this.endpoint,this.ticket,this.nextBefore,this.nextAfter).then((t=>{t.events&&t.events.length>0&&(this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}})));let e=!1;const i=t.events?t.events.reverse():[];if(this.eventGroups.length>0){const t=this.eventGroups.splice(0,1)[0];e=t.open,i.push(...t.events)}const n=this.getEventGroups(i);n.length&&(e&&(n[n.length-1].open=e),this.eventGroups=[...n,...this.eventGroups]),t.next_before===this.nextBefore&&(this.complete=!0),this.nextBefore=t.next_before,this.nextAfter=t.next_after,this.fetching=!1,this.empty=!1}))),t.has("refreshing")&&!this.refreshing&&this.lastRefreshAdded>0){const t=this.getEventsPane();if(this.lastHeight>0){const e=t.scrollHeight-this.lastHeight;t.scrollHeight-t.scrollTop-e-t.clientHeight<500?this.scrollToBottom():this.showMessageAlert=!0}this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}if(t.has("fetching")&&!this.fetching&&void 0!==t.get("fetching")){const t=this.getEventsPane();if(this.lastHeight&&t.scrollHeight>this.lastHeight){const e=t.scrollTop+t.scrollHeight-this.lastHeight;t.scrollTop=e}this.lastHeight||this.scrollToBottom(),this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}t.has("endpoint")&&this.endpoint&&(this.fetching=!0,this.empty=!0)}refreshTickets(){if(this.ticket){let t=`/api/v2/tickets.json?contact=${this.uuid}`;this.ticket&&(t=`${t}&ticket=${this.ticket}`),se(t).then((t=>{this.tickets=t.reverse()}))}}getEventsPane(){return this.getDiv(".events")}scrollToBottom(t=!1){const e=this.getEventsPane();e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"}),this.showMessageAlert=!1,window.setTimeout((()=>{e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"})}),0)}refresh(){this.scheduleRefresh(500)}getEventGroups(t){const e=[];let i;for(const n of t){const t=rl(n,this.ticket);i&&i.type===t?i.events.push(n):(i&&e.push(i),i={open:!1,events:[n],type:t})}return i&&i.events.length>0&&e.push(i),e}scheduleRefresh(t=-1){if(this.endDate)return;let e=t;if(-1===t){const t=this.getLastEventTime();e=Math.max(Math.min(((new Date).getTime()-t)/2,1e4),500)}t>-1&&this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=window.setTimeout((()=>{this.refreshing?(this.scheduleRefresh(),this.refreshing=!1):this.refreshing=!0}),e)}reset(){this.endpoint=null,this.tickets=null,this.ticketEvents={},this.eventGroups=[],this.fetching=!1,this.complete=!1,this.nextBefore=null,this.nextAfter=null,this.lastHeight=0}handleEventGroupShow(t){const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!0,this.requestUpdate("eventGroups")}handleEventGroupHide(t){t.preventDefault(),t.stopPropagation();const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!1,this.requestUpdate("eventGroups")}handleScroll(){this.getEventsPane().scrollTop<=100&&this.eventGroups.length>0&&!this.fetching&&!this.complete&&(this.fetching=!0)}updateMostRecent(t){this.mostRecentEvent&&this.mostRecentEvent.type===t.type&&this.mostRecentEvent.created_on===t.created_on||(this.mostRecentEvent=t)}getLastEventTime(){const t=this.eventGroups[this.eventGroups.length-1];if(t){const e=t.events[t.events.length-1];return new Date(e.created_on).getTime()}return 0}renderEvent(t){switch(t.type){case sl.IVR_CREATED:case sl.MESSAGE_CREATED:case sl.MESSAGE_RECEIVED:case sl.BROADCAST_CREATED:return ll(t,this.agent);case sl.FLOW_ENTERED:case sl.FLOW_EXITED:return(t=>{let e="Interrupted",i=pt.flow_interrupted;return"I"!==t.status&&(t.type===sl.FLOW_ENTERED?(e="Started",i=pt.flow):(e="Completed",i=pt.flow)),D`
     <temba-icon name="${i}"></temba-icon>
     <div class="description">
       ${e}
@@ -4056,8 +4052,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         flex-grow: 1;
         background: var(--focused-tab-color, #fff);
         border-radius: var(--curvature);
-        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
-          3px 3px 2px 1px rgba(0, 0, 0, 0.05);
+        box-shadow: var(
+          --tabs-shadow,
+          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
+        );
         min-height: 0;
       }
 
@@ -5546,6 +5545,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .other-fields {
         flex-grow: 2;
         min-height: 0px;
+        margin-bottom: 0px;
       }
 
       temba-textinput {
@@ -5857,9 +5857,9 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
         border-radius: var(--curvature-widget);
         background: var(--color-widget-bg);
-        border: 1px solid var(--color-widget-border);
+        border: var(--compose-border, 1px solid var(--color-widget-border));
         transition: all ease-in-out var(--transition-speed);
-        box-shadow: var(--widget-box-shadow);
+        box-shadow: var(--compose-shadow, var(--widget-box-shadow));
         caret-color: var(--input-caret);
       }
 
@@ -5873,8 +5873,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         right: 0;
         background: rgba(210, 243, 184, 0.8);
         border-radius: var(--curvature-widget);
-        margin: -0.5em;
-        padding: 0.5em;
         transition: opacity ease-in-out var(--transition-speed);
         display: flex;
         align-items: center;
@@ -5897,8 +5895,13 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .chatbox {
         --color-widget-border: none;
-        --curvature-widget: var(--curvature) var(--curvature) 0px 0px;
+        --curvature-widget: var(
+          --compose-curvature,
+          var(--curvature) var(--curvature) 0px 0px
+        );
         --textarea-min-height: 4em;
+        --widget-box-shadow: none;
+        padding: var(--compose-padding, 0px);
       }
 
       .attachments {

package/dist/index.js

@@ -1703,34 +1703,26 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
             &nbsp;/&nbsp;${this.segments}${t?D`+`:null}
             <div></div>
           </div>`:null}</div> ${n}</div></div>`}}t([ct({type:String})],Xa.prototype,"text",void 0),t([ct({type:Number})],Xa.prototype,"count",void 0),t([ct({type:Number,attribute:!1})],Xa.prototype,"segments",void 0),t([ct({type:Object,attribute:!1})],Xa.prototype,"extended",void 0);class Qa extends lt{constructor(){super(...arguments),this.showLoading=!1}prepareData(t){return t}refresh(){this.store.makeRequest(this.url,{prepareData:this.prepareData,force:!0})}handleStoreUpdated(t){this.store.initialHttpComplete.then((()=>{if(t.detail.url===this.url){const e=this.data;this.data=t.detail.data,this.fireCustomEvent(ke.Refreshed,{data:t.detail.data,previous:e})}}))}updated(t){super.updated(t),t.has("url")&&(this.url?this.store.makeRequest(this.url,{prepareData:this.prepareData}):this.data=null)}connectedCallback(){super.connectedCallback(),this.store=document.querySelector("temba-store"),this.handleStoreUpdated=this.handleStoreUpdated.bind(this),this.prepareData=this.prepareData.bind(this),this.store&&this.store.addEventListener(ke.StoreUpdated,this.handleStoreUpdated)}disconnectedCallback(){super.disconnectedCallback(),this.store&&this.store.removeEventListener(ke.StoreUpdated,this.handleStoreUpdated)}render(){if(!this.store.ready&&this.showLoading)return D`<temba-loading></temba-loading>`}}t([ct({type:String})],Qa.prototype,"url",void 0),t([ct({type:Boolean})],Qa.prototype,"showLoading",void 0),t([ct({type:Object,attribute:!1})],Qa.prototype,"data",void 0);class tl extends Qa{constructor(){super(...arguments),this.endpoint="/api/v2/contacts.json?uuid="}prepareData(t){return t&&t.length>0?((t=t[0]).groups.forEach((t=>{t.is_dynamic=this.store.isDynamicGroup(t.uuid)})),t.groups.sort(((t,e)=>{if(!t.is_dynamic||!e.is_dynamic){if(t.is_dynamic)return-1;if(e.is_dynamic)return 1}return t.name.localeCompare(e.name)})),t):null}setContact(t){this.data=this.prepareData([t]),this.store.updateCache(`${this.endpoint}${this.contact}`,this.data)}updated(t){super.updated(t),t.has("contact")&&(this.contact?this.url=`${this.endpoint}${this.contact}`:this.url=null)}}t([ct({type:String})],tl.prototype,"contact",void 0),t([ct({type:Object,attribute:!1})],tl.prototype,"data",void 0),t([ct({type:String})],tl.prototype,"endpoint",void 0);class el extends tl{static get styles(){return r`
-      .left-pane {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
-        transition: box-shadow 600ms linear;
-      }
-
-      .left-pane.open {
-        z-index: 1000;
-      }
-
       :host {
         flex-grow: 1;
         display: flex;
         flex-direction: row;
         min-height: 0;
-        border-radius: var(--curvature);
+        --compose-shadow: none;
+        --compose-border: none;
+        --compose-padding: 3px;
+        --compose-curvature: none;
       }
 
       .chat-wrapper {
         display: flex;
         flex-grow: 1;
         flex-direction: column;
-        background: #e9e9e9;
-
         min-height: 0;
       }
 
       temba-contact-history {
-        border-bottom: 0px solid #f4f4f4;
+        border-bottom: 2px solid #f6f6f6;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
@@ -1738,11 +1730,8 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       }
 
       .chatbox {
-        padding: 0.8em;
         display: flex;
         flex-direction: column;
-        border-bottom-left-radius: var(--curvature);
-        border-bottom-right-radius: var(--curvature);
       }
 
       .chatbox.full {
@@ -1819,11 +1808,14 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       class="broadcast"
       name="${pt.broadcast}"
     ></temba-icon>`),t.recipient_count>1&&s.push(D`<div class="recipients">${t.recipient_count} contacts</div>`),s.push(D`<div class="separator">•</div>`)),t.optin&&s.push(D`<div class="optin">${t.optin.name}</div>
-        <div class="separator">•</div>`),s.push(D`<temba-date
+        <div class="separator">•</div>`),"Q"===t.status&&s.push(D`<div>Queued</div>`),s.push(D`<temba-date
       class="time"
       value="${t.created_on}"
       display="duration"
-    ></temba-date>`),D`<div style="display:flex;align-items:flex-start">
+    ></temba-date>`),D`<div
+    style="display:flex;align-items:flex-start"
+    class=${ee({queued:"Q"===t.status})}
+  >
     <div style="display:flex;flex-direction:column">
       <div
         class="${t.msg.text?"":"no-message"} attachments-${(t.msg.attachments||[]).length} ${ee({msg:!0,automated:!i&&!t.created_by})}"
@@ -1869,7 +1861,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       <div
         class="msg-summary"
-        style="flex-direction:row${i?"-reverse":""}"
+        style="align-items:center;flex-direction:row${i?"-reverse":""}"
       >
         <div style="flex-grow:1"></div>
         ${s}
@@ -2111,6 +2103,10 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       background: var(--color-automated) !important;
     }
 
+    .queued {
+      opacity: 0.3;
+    }
+
     .optin_requested {
       --icon-color: var(--color-primary-dark);
     }
@@ -2458,7 +2454,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .attachment img {
         cursor: pointer;
       }
-    `}firstUpdated(t){super.firstUpdated(t),this.handleClose=this.handleClose.bind(this)}updated(t){if(super.updated(t),t.has("mostRecentEvent")&&t.get("mostRecentEvent")&&this.mostRecentEvent&&this.fireCustomEvent(ke.Refreshed),t.has("endDate")&&this.refreshTimeout&&this.endDate&&window.clearTimeout(this.refreshTimeout),t.has("uuid"))if(null==this.uuid)this.reset();else{const t=`/contact/history/${this.uuid}/?_format=json`;if(this.endpoint!==t){if(this.reset(),this.endDate){const t=new Date(this.endDate);this.nextBefore=1e3*t.getTime()+1e3}this.endpoint=t,this.refreshTickets()}}if(t.has("ticket")&&(this.endpoint=null,this.requestUpdate("uuid")),t.has("refreshing")&&this.refreshing&&this.endpoint&&!this.endDate){const t=1e3*(this.getLastEventTime()-1);let e=!1;nl(!1,this.endpoint,this.ticket,null,t).then((t=>{t.events&&t.events.length>0&&this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}}));let i=t.events.reverse();i=i.filter((t=>{const e=!!this.eventGroups.find((e=>!!e.events.find((e=>e.created_on===t.created_on&&e.type===t.type))));return!e})),this.lastRefreshAdded=i.length;const n=[...this.eventGroups];if(this.eventGroups.length>0){const t=n.splice(n.length-1,1)[0];e=t.open,i.splice(0,0,...t.events)}const o=this.getEventGroups(i);o.length&&(e&&(o[o.length-1].open=e),this.eventGroups=[...n,...o]),this.refreshing=!1,this.scheduleRefresh()})).catch((()=>{this.refreshing=!1,this.scheduleRefresh()}))}if(t.has("fetching")&&this.fetching&&(this.nextBefore||(this.nextBefore=1e3*(new Date).getTime()-1e3),this.httpComplete=nl(this.empty,this.endpoint,this.ticket,this.nextBefore,this.nextAfter).then((t=>{t.events&&t.events.length>0&&(this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}})));let e=!1;const i=t.events?t.events.reverse():[];if(this.eventGroups.length>0){const t=this.eventGroups.splice(0,1)[0];e=t.open,i.push(...t.events)}const n=this.getEventGroups(i);n.length&&(e&&(n[n.length-1].open=e),this.eventGroups=[...n,...this.eventGroups]),t.next_before===this.nextBefore&&(this.complete=!0),this.nextBefore=t.next_before,this.nextAfter=t.next_after,this.fetching=!1,this.empty=!1}))),t.has("refreshing")&&!this.refreshing&&this.lastRefreshAdded>0){const t=this.getEventsPane();if(this.lastHeight>0){const e=t.scrollHeight-this.lastHeight;t.scrollHeight-t.scrollTop-e-t.clientHeight<500?this.scrollToBottom():this.showMessageAlert=!0}this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}if(t.has("fetching")&&!this.fetching&&void 0!==t.get("fetching")){const t=this.getEventsPane();if(this.lastHeight&&t.scrollHeight>this.lastHeight){const e=t.scrollTop+t.scrollHeight-this.lastHeight;t.scrollTop=e}this.lastHeight||this.scrollToBottom(),this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}t.has("endpoint")&&this.endpoint&&(this.fetching=!0,this.empty=!0)}refreshTickets(){if(this.ticket){let t=`/api/v2/tickets.json?contact=${this.uuid}`;this.ticket&&(t=`${t}&ticket=${this.ticket}`),se(t).then((t=>{this.tickets=t.reverse()}))}}getEventsPane(){return this.getDiv(".events")}scrollToBottom(t=!1){const e=this.getEventsPane();e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"}),this.showMessageAlert=!1,window.setTimeout((()=>{e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"})}),0)}refresh(){this.scheduleRefresh(500)}getEventGroups(t){const e=[];let i;for(const n of t){const t=rl(n,this.ticket);i&&i.type===t?i.events.push(n):(i&&e.push(i),i={open:!1,events:[n],type:t})}return i&&i.events.length>0&&e.push(i),e}scheduleRefresh(t=-1){if(this.endDate)return;let e=t;if(-1===t){const t=this.getLastEventTime();e=Math.max(Math.min(((new Date).getTime()-t)/2,1e4),500)}t>-1&&this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=window.setTimeout((()=>{this.refreshing?(this.scheduleRefresh(),this.refreshing=!1):this.refreshing=!0}),e)}reset(){this.endpoint=null,this.tickets=null,this.ticketEvents={},this.eventGroups=[],this.fetching=!1,this.complete=!1,this.nextBefore=null,this.nextAfter=null,this.lastHeight=0}handleEventGroupShow(t){const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!0,this.requestUpdate("eventGroups")}handleEventGroupHide(t){t.preventDefault(),t.stopPropagation();const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!1,this.requestUpdate("eventGroups")}handleScroll(){this.getEventsPane().scrollTop<=100&&this.eventGroups.length>0&&!this.fetching&&!this.complete&&(this.fetching=!0)}updateMostRecent(t){this.mostRecentEvent&&this.mostRecentEvent.type===t.type&&this.mostRecentEvent.created_on===t.created_on||(this.mostRecentEvent=t)}getLastEventTime(){const t=this.eventGroups[this.eventGroups.length-1];if(t){const e=t.events[t.events.length-1];return new Date(e.created_on).getTime()}return 0}renderEvent(t){switch(t.type){case sl.IVR_CREATED:case sl.MESSAGE_CREATED:case sl.MESSAGE_RECEIVED:case sl.BROADCAST_CREATED:return ll(t,this.agent);case sl.FLOW_ENTERED:case sl.FLOW_EXITED:return(t=>{let e="Interrupted",i=pt.flow_interrupted;return"I"!==t.status&&(t.type===sl.FLOW_ENTERED?(e="Started",i=pt.flow):(e="Completed",i=pt.flow)),D`
+    `}firstUpdated(t){super.firstUpdated(t),this.handleClose=this.handleClose.bind(this)}updated(t){if(super.updated(t),t.has("mostRecentEvent")&&t.get("mostRecentEvent")&&this.mostRecentEvent&&this.fireCustomEvent(ke.Refreshed),t.has("endDate")&&this.refreshTimeout&&this.endDate&&window.clearTimeout(this.refreshTimeout),t.has("uuid"))if(null==this.uuid)this.reset();else{const t=`/contact/history/${this.uuid}/?_format=json`;if(this.endpoint!==t){if(this.reset(),this.endDate){const t=new Date(this.endDate);this.nextBefore=1e3*t.getTime()+1e3}this.endpoint=t,this.refreshTickets()}}if(t.has("ticket")&&(this.endpoint=null,this.requestUpdate("uuid")),t.has("refreshing")&&this.refreshing&&this.endpoint&&!this.endDate){const t=1e3*(this.getLastEventTime()-1);let e=!1;nl(!1,this.endpoint,this.ticket,null,t).then((t=>{t.events&&t.events.length>0&&this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}}));const i=t.events.reverse();let n=0;this.eventGroups.forEach((t=>{const e=t.events.length;t.events=t.events.filter((t=>!i.find((e=>t.created_on==e.created_on&&t.type===e.type)))),n+=e-t.events.length})),this.lastRefreshAdded=i.length-n;const o=[...this.eventGroups];if(this.eventGroups.length>0){const t=o.splice(o.length-1,1)[0];e=t.open,i.splice(0,0,...t.events)}const s=this.getEventGroups(i);s.length&&(e&&(s[s.length-1].open=e),this.eventGroups=[...o,...s]),this.refreshing=!1,this.scheduleRefresh()})).catch((()=>{this.refreshing=!1,this.scheduleRefresh()}))}if(t.has("fetching")&&this.fetching&&(this.nextBefore||(this.nextBefore=1e3*(new Date).getTime()-1e3),this.httpComplete=nl(this.empty,this.endpoint,this.ticket,this.nextBefore,this.nextAfter).then((t=>{t.events&&t.events.length>0&&(this.updateMostRecent(t.events[0]),t.events.forEach((t=>{if(t.type===sl.TICKET_OPENED){const e=t;this.ticketEvents[e.ticket.uuid]=e}})));let e=!1;const i=t.events?t.events.reverse():[];if(this.eventGroups.length>0){const t=this.eventGroups.splice(0,1)[0];e=t.open,i.push(...t.events)}const n=this.getEventGroups(i);n.length&&(e&&(n[n.length-1].open=e),this.eventGroups=[...n,...this.eventGroups]),t.next_before===this.nextBefore&&(this.complete=!0),this.nextBefore=t.next_before,this.nextAfter=t.next_after,this.fetching=!1,this.empty=!1}))),t.has("refreshing")&&!this.refreshing&&this.lastRefreshAdded>0){const t=this.getEventsPane();if(this.lastHeight>0){const e=t.scrollHeight-this.lastHeight;t.scrollHeight-t.scrollTop-e-t.clientHeight<500?this.scrollToBottom():this.showMessageAlert=!0}this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}if(t.has("fetching")&&!this.fetching&&void 0!==t.get("fetching")){const t=this.getEventsPane();if(this.lastHeight&&t.scrollHeight>this.lastHeight){const e=t.scrollTop+t.scrollHeight-this.lastHeight;t.scrollTop=e}this.lastHeight||this.scrollToBottom(),this.eventGroups.length>0&&(this.lastHeight=t.scrollHeight)}t.has("endpoint")&&this.endpoint&&(this.fetching=!0,this.empty=!0)}refreshTickets(){if(this.ticket){let t=`/api/v2/tickets.json?contact=${this.uuid}`;this.ticket&&(t=`${t}&ticket=${this.ticket}`),se(t).then((t=>{this.tickets=t.reverse()}))}}getEventsPane(){return this.getDiv(".events")}scrollToBottom(t=!1){const e=this.getEventsPane();e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"}),this.showMessageAlert=!1,window.setTimeout((()=>{e.scrollTo({top:e.scrollHeight,behavior:t?"smooth":"auto"})}),0)}refresh(){this.scheduleRefresh(500)}getEventGroups(t){const e=[];let i;for(const n of t){const t=rl(n,this.ticket);i&&i.type===t?i.events.push(n):(i&&e.push(i),i={open:!1,events:[n],type:t})}return i&&i.events.length>0&&e.push(i),e}scheduleRefresh(t=-1){if(this.endDate)return;let e=t;if(-1===t){const t=this.getLastEventTime();e=Math.max(Math.min(((new Date).getTime()-t)/2,1e4),500)}t>-1&&this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=window.setTimeout((()=>{this.refreshing?(this.scheduleRefresh(),this.refreshing=!1):this.refreshing=!0}),e)}reset(){this.endpoint=null,this.tickets=null,this.ticketEvents={},this.eventGroups=[],this.fetching=!1,this.complete=!1,this.nextBefore=null,this.nextAfter=null,this.lastHeight=0}handleEventGroupShow(t){const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!0,this.requestUpdate("eventGroups")}handleEventGroupHide(t){t.preventDefault(),t.stopPropagation();const e=t.currentTarget,i=parseInt(e.getAttribute("data-group-index"));this.eventGroups[this.eventGroups.length-i-1].open=!1,this.requestUpdate("eventGroups")}handleScroll(){this.getEventsPane().scrollTop<=100&&this.eventGroups.length>0&&!this.fetching&&!this.complete&&(this.fetching=!0)}updateMostRecent(t){this.mostRecentEvent&&this.mostRecentEvent.type===t.type&&this.mostRecentEvent.created_on===t.created_on||(this.mostRecentEvent=t)}getLastEventTime(){const t=this.eventGroups[this.eventGroups.length-1];if(t){const e=t.events[t.events.length-1];return new Date(e.created_on).getTime()}return 0}renderEvent(t){switch(t.type){case sl.IVR_CREATED:case sl.MESSAGE_CREATED:case sl.MESSAGE_RECEIVED:case sl.BROADCAST_CREATED:return ll(t,this.agent);case sl.FLOW_ENTERED:case sl.FLOW_EXITED:return(t=>{let e="Interrupted",i=pt.flow_interrupted;return"I"!==t.status&&(t.type===sl.FLOW_ENTERED?(e="Started",i=pt.flow):(e="Completed",i=pt.flow)),D`
     <temba-icon name="${i}"></temba-icon>
     <div class="description">
       ${e}
@@ -4056,8 +4052,11 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         flex-grow: 1;
         background: var(--focused-tab-color, #fff);
         border-radius: var(--curvature);
-        box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
-          3px 3px 2px 1px rgba(0, 0, 0, 0.05);
+        box-shadow: var(
+          --tabs-shadow,
+          rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+          rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
+        );
         min-height: 0;
       }
 
@@ -5546,6 +5545,7 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
       .other-fields {
         flex-grow: 2;
         min-height: 0px;
+        margin-bottom: 0px;
       }
 
       temba-textinput {
@@ -5857,9 +5857,9 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
         border-radius: var(--curvature-widget);
         background: var(--color-widget-bg);
-        border: 1px solid var(--color-widget-border);
+        border: var(--compose-border, 1px solid var(--color-widget-border));
         transition: all ease-in-out var(--transition-speed);
-        box-shadow: var(--widget-box-shadow);
+        box-shadow: var(--compose-shadow, var(--widget-box-shadow));
         caret-color: var(--input-caret);
       }
 
@@ -5873,8 +5873,6 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
         right: 0;
         background: rgba(210, 243, 184, 0.8);
         border-radius: var(--curvature-widget);
-        margin: -0.5em;
-        padding: 0.5em;
         transition: opacity ease-in-out var(--transition-speed);
         display: flex;
         align-items: center;
@@ -5897,8 +5895,13 @@ function t(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPro
 
       .chatbox {
         --color-widget-border: none;
-        --curvature-widget: var(--curvature) var(--curvature) 0px 0px;
+        --curvature-widget: var(
+          --compose-curvature,
+          var(--curvature) var(--curvature) 0px 0px
+        );
         --textarea-min-height: 4em;
+        --widget-box-shadow: none;
+        padding: var(--compose-padding, 0px);
       }
 
       .attachments {

package/dist/sw.js

@@ -1,2 +1,2 @@
-if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const i=e||("document"in self?document.currentScript.src:"")||location.href;if(t[i])return;let r={};const d=e=>o(e,i),l={module:{uri:i},exports:r,require:d};t[i]=Promise.all(n.map((e=>l[e]||d(e)))).then((e=>(s(...e),r)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"43489c4a.js",revision:"171430f41d7f68048d6cedcfb7506d18"},{url:"templates/components-body.html",revision:"851ee610dba7b1d116c0f51cbd6e2002"},{url:"templates/components-head.html",revision:"65585c9dd111806bc869b440682290bd"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
+if(!self.define){let e,t={};const o=(o,n)=>(o=new URL(o+".js",n).href,t[o]||new Promise((t=>{if("document"in self){const e=document.createElement("script");e.src=o,e.onload=t,document.head.appendChild(e)}else e=o,importScripts(o),t()})).then((()=>{let e=t[o];if(!e)throw new Error(`Module ${o} didn’t register its module`);return e})));self.define=(n,s)=>{const c=e||("document"in self?document.currentScript.src:"")||location.href;if(t[c])return;let i={};const r=e=>o(e,c),l={module:{uri:c},exports:i,require:r};t[c]=Promise.all(n.map((e=>l[e]||r(e)))).then((e=>(s(...e),i)))}}define(["./workbox-919adfb7"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"8ce5c6c3.js",revision:"80bb9179688fa5e6862e16e935c7be36"},{url:"templates/components-body.html",revision:"28b9952ce7a4f910402c2c05b23a0247"},{url:"templates/components-head.html",revision:"87d5aed8663fc316f3a94cf15fc8fc9c"}],{}),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/index.html"))),e.registerRoute("polyfills/*.js",new e.CacheFirst,"GET")}));
 //# sourceMappingURL=sw.js.map

package/dist/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../tmp/ba923dbcddf2cd4f3968ec1f9fd7f74b/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"43489c4a.js\",\n    \"revision\": \"171430f41d7f68048d6cedcfb7506d18\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"851ee610dba7b1d116c0f51cbd6e2002\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"65585c9dd111806bc869b440682290bd\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}
+{"version":3,"file":"sw.js","sources":["../../tmp/3c114796298f3d7a9155b97b44ada345/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/workspaces/temba-components/node_modules/workbox-routing/registerRoute.mjs';\nimport {CacheFirst as workbox_strategies_CacheFirst} from '/workspaces/temba-components/node_modules/workbox-strategies/CacheFirst.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/workspaces/temba-components/node_modules/workbox-core/clientsClaim.mjs';\nimport {precacheAndRoute as workbox_precaching_precacheAndRoute} from '/workspaces/temba-components/node_modules/workbox-precaching/precacheAndRoute.mjs';\nimport {NavigationRoute as workbox_routing_NavigationRoute} from '/workspaces/temba-components/node_modules/workbox-routing/NavigationRoute.mjs';\nimport {createHandlerBoundToURL as workbox_precaching_createHandlerBoundToURL} from '/workspaces/temba-components/node_modules/workbox-precaching/createHandlerBoundToURL.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n  {\n    \"url\": \"8ce5c6c3.js\",\n    \"revision\": \"80bb9179688fa5e6862e16e935c7be36\"\n  },\n  {\n    \"url\": \"templates/components-body.html\",\n    \"revision\": \"28b9952ce7a4f910402c2c05b23a0247\"\n  },\n  {\n    \"url\": \"templates/components-head.html\",\n    \"revision\": \"87d5aed8663fc316f3a94cf15fc8fc9c\"\n  }\n], {});\n\nworkbox_routing_registerRoute(new workbox_routing_NavigationRoute(workbox_precaching_createHandlerBoundToURL(\"/index.html\")));\n\n\nworkbox_routing_registerRoute(\"polyfills/*.js\", new workbox_strategies_CacheFirst(), 'GET');\n\n\n\n\n"],"names":["self","skipWaiting","workbox_core_clientsClaim","workbox_precaching_precacheAndRoute","url","revision","workbox","registerRoute","workbox_routing_NavigationRoute","workbox_precaching_createHandlerBoundToURL","workbox_strategies_CacheFirst"],"mappings":"0nBAwBAA,KAAKC,cAELC,EAAAA,eAQAC,EAAAA,iBAAoC,CAClC,CACEC,IAAO,cACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,oCAEd,CACED,IAAO,iCACPC,SAAY,qCAEb,CAAE,GAEwBC,EAAAC,cAAC,IAAIC,EAAAA,gBAAgCC,EAAAA,wBAA2C,iBAGhFH,EAAAC,cAAC,iBAAkB,IAAIG,aAAiC"}

package/dist/templates/components-body.html

@@ -1 +1 @@
-<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/43489c4a.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.64.1"</script>
+<script type="module" src="{{STATIC_URL}}@nyaruka/temba-components/dist/8ce5c6c3.js"></script><script>window.TEMBA_COMPONENTS_VERSION="0.65.1"</script>

package/dist/templates/components-head.html

@@ -1 +1 @@
-<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/43489c4a.js" crossorigin="anonymous">
+<link rel="modulepreload" href="{{STATIC_URL}}@nyaruka/temba-components/dist/8ce5c6c3.js" crossorigin="anonymous">

package/out-tsc/src/compose/Compose.js

@@ -16,9 +16,9 @@ export class Compose extends FormElement {
 
         border-radius: var(--curvature-widget);
         background: var(--color-widget-bg);
-        border: 1px solid var(--color-widget-border);
+        border: var(--compose-border, 1px solid var(--color-widget-border));
         transition: all ease-in-out var(--transition-speed);
-        box-shadow: var(--widget-box-shadow);
+        box-shadow: var(--compose-shadow, var(--widget-box-shadow));
         caret-color: var(--input-caret);
       }
 
@@ -32,8 +32,6 @@ export class Compose extends FormElement {
         right: 0;
         background: rgba(210, 243, 184, 0.8);
         border-radius: var(--curvature-widget);
-        margin: -0.5em;
-        padding: 0.5em;
         transition: opacity ease-in-out var(--transition-speed);
         display: flex;
         align-items: center;
@@ -56,8 +54,13 @@ export class Compose extends FormElement {
 
       .chatbox {
         --color-widget-border: none;
-        --curvature-widget: var(--curvature) var(--curvature) 0px 0px;
+        --curvature-widget: var(
+          --compose-curvature,
+          var(--curvature) var(--curvature) 0px 0px
+        );
         --textarea-min-height: 4em;
+        --widget-box-shadow: none;
+        padding: var(--compose-padding, 0px);
       }
 
       .attachments {