@telia-ace/widget-conversation-flamingo 1.1.76-rc.41 → 1.1.76-rc.43

package/conversation.d.ts

@@ -11,6 +11,7 @@ export declare class Conversation extends WidgetElement {
     disabledSubmit: boolean;
     chatOverlayActive: boolean;
     textAreaLength: number;
+    private isMuted;
     conversationContentRef: Ref<HTMLDivElement>;
     conversationFeedRef: Ref<HTMLDivElement>;
     formRef: Ref<HTMLFormElement>;
@@ -54,6 +55,7 @@ export declare class Conversation extends WidgetElement {
     _keyDownHandler(e: KeyboardEvent): void;
     skipToLatestMessage(): void;
     handover(providerKey: string, providerOptions: Record<string, any>): Observable<void>;
+    firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default Conversation;

package/index.js

@@ -868,7 +868,7 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
         width: 80%;
         max-width: 700px;
       }
-    `];Ml([w({attribute:!0})],wn.prototype,"imageUrl",2);var zl=Object.defineProperty,Ul=Object.getOwnPropertyDescriptor,V=(s,e,t,n)=>{for(var i=n>1?void 0:n?Ul(e,t):e,r=s.length-1,o;r>=0;r--)(o=s[r])&&(i=(n?o(e,t,i):o(i))||i);return n&&i&&zl(e,t,i),i};customElements.get("conversation-entry")||customElements.define("conversation-entry",pn);customElements.get("ace-conversation-feed")||customElements.define("ace-conversation-feed",mt);customElements.get("conversation-group")||customElements.define("conversation-group",dn);customElements.get("ace-typing-state")||customElements.define("ace-typing-state",gi);customElements.get("message-type-html")||customElements.define("message-type-html",fn);customElements.get("message-type-markdown")||customElements.define("message-type-markdown",bt);customElements.get("ace-lightbox")||customElements.define("ace-lightbox",wn);const Ei=pi(k);class O extends Ei{constructor(){super(...arguments),this.message="",this.disabledInput=!1,this.disabledSubmit=!1,this.chatOverlayActive=!1,this.textAreaLength=0,this.conversationContentRef=M(),this.conversationFeedRef=M(),this.formRef=M(),this.inputRef=M(),this.scrollRef=M(),this.counterRef=M(),this.chatScrollHeight=0,this.chatCurrentScrollPosition=0,this.toast=new Ia(this),this.messageMaxLength=1e3,this.messageMaxLengthLabel="Maximum character limit reached",this.skipToLatestMessageLabel="Skip to latest message",this.platform=null,this.entries=[],this.typing=!1,this.conversationState$=new U("waiting"),this.stateMachine=new za(this.conversationState$,this),this.provider$=this.stateMachine.session().pipe(de(e=>e?e==null?void 0:e.provider$:It(null))),this.userTyping$=new _}async connectedCallback(){super.connectedCallback(),this.messageMaxLength=this.properties.messageMaxLength??this.messageMaxLength,this.messageMaxLengthLabel=this.properties.messageMaxLengthLabel??this.messageMaxLengthLabel,this.skipToLatestMessageLabel=this.properties.skipToLatestMessageLabel??this.skipToLatestMessageLabel;const e=await this.application.container.get("conversation");this.platform=e||null;const t=this.application.trigger;t&&t.widgetActive$.pipe(zt(t.componentIsDestroyed$)).subscribe(n=>{const i=this.conversationContentRef.value;i&&(n?i.scrollTop=this.chatCurrentScrollPosition:this.chatCurrentScrollPosition=i.scrollTop)}),this.stateSubscription=mr([this.stateMachine.entries(),this.stateMachine.isTyping()]).subscribe(([n,i])=>{this.entries=n,this.typing=i}),this.userSubmitSubscription=Ke(this,"user-submit").pipe(Ut(this.provider$)).subscribe(([n,i])=>{i&&i.onUserSubmit(n.detail)}),this._addHeaderOptions(),this.provider$.pipe(Ut(this.provider$)).subscribe(([n,i])=>{i&&i.showChatOverlay$.pipe().subscribe(r=>{this.chatOverlayActive=r})})}disconnectedCallback(){var e,t;super.disconnectedCallback(),(e=this.userSubmitSubscription)==null||e.unsubscribe(),(t=this.stateSubscription)==null||t.unsubscribe()}_actionHandler(e){}isTypingState(){var t,n;const e=(n=(t=this.conversationFeedRef.value)==null?void 0:t.shadowRoot)==null?void 0:n.querySelector(".conversation-feed");if(e){const i=e.lastElementChild;if(i&&i.tagName.toLowerCase()==="ace-typing-state")return!0}return!1}isAtBottom(){const e=this.conversationContentRef.value;return e?e.scrollHeight-e.scrollTop-e.clientHeight<1:!1}scrollToBottom(){var e,t;(!this.isTypingState()||this.isAtBottom())&&(setTimeout(()=>{var n;return(n=this.scrollRef.value)==null?void 0:n.scrollIntoView({behavior:"smooth"})},300),this.chatScrollHeight=(e=this.scrollRef.value)==null?void 0:e.scrollHeight,this.chatCurrentScrollPosition=(t=this.scrollRef.value)==null?void 0:t.scrollTop)}onSessionUpdated(){this.scrollToBottom()}disableInput(){this.disabledInput=!0,this.message=""}enableInput(){this.disabledInput=!1}disableSubmit(){this.disabledSubmit=!0}enableSubmit(){this.disabledSubmit=!1}clearMessages(){var i,r;const e=(i=this.shadowRoot)==null?void 0:i.querySelector("ace-conversation-feed"),t=(r=e==null?void 0:e.shadowRoot)==null?void 0:r.querySelector(".conversation-feed"),n=t==null?void 0:t.querySelectorAll(".conversation-entry");n==null||n.forEach(o=>o.remove())}setToastMessage(e){this.toast.message=e}async _onSendMessage(e){var n,i;if(e.preventDefault(),this.message.length<=0||this.message.length>this.messageMaxLength){(n=this.formRef.value)==null||n.classList.add("shake"),setTimeout(()=>{var r;(r=this.formRef.value)==null||r.classList.remove("shake")},500);return}this.message=this.message.slice(0,this.messageMaxLength);const t=new CustomEvent("user-submit",{detail:{text:this.message}});this.dispatchEvent(t),this.message="",this.textAreaLength=0,(i=this.counterRef.value)==null||i.classList.remove("max-char-count-reached"),this.inputRef.value.style.height=this.style.getPropertyValue("--textarea-default-height")}_addHeaderOptions(){const e=this.application.getComponent("widget-header");if(!e)return;const t=this.application.texts,n=t.getOrFallback("conversation.mute","Mute"),i=t.getOrFallback("conversation.unmute","Unmute"),r=!!this.application.storage.get("muteAudioNotifications"),o=e.addOption({label:r?i:n,icon:r?Hn.svg:Bn.svg,closeOnClick:!1,datatestid:"options-mute-button",onClick:()=>{!!this.application.storage.get("muteAudioNotifications")?(this.application.unmute(),o.updateLabel(n),o.updateIcon(Bn.svg)):(this.application.mute(),o.updateLabel(i),o.updateIcon(Hn.svg))}})}_inputHandler(e){var t,n;this.message=e.target.value,e.target.style.height=this.style.getPropertyValue("--textarea-default-height"),e.target.style.height=e.target.scrollHeight+"px",this.textAreaLength=e.target.value.length,e.target.value.length>this.messageMaxLength?(t=this.counterRef.value)==null||t.classList.add("max-char-count-reached"):(n=this.counterRef.value)==null||n.classList.remove("max-char-count-reached")}_keyDownHandler(e){this.userTyping$.next(e.key),e.key==="Enter"&&!e.shiftKey&&!this.disabledSubmit&&(this._onSendMessage(e),e.preventDefault())}skipToLatestMessage(){var n,i;const e=(n=this.conversationFeedRef)==null?void 0:n.value,t=(i=e==null?void 0:e.shadowRoot)==null?void 0:i.querySelectorAll(".conversation-entry");t.length&&Array.from(t).pop().focus()}handover(e,t){this.enableInput(),this.setToastMessage(null);const n=new CustomEvent("handover",{detail:{providerKey:e,providerOptions:t}});return this.dispatchEvent(n),n.detail.complete||Re}render(){var i,r,o;const e=this.application.texts;this.conversationState$.value==="waiting"&&((i=this.application)!=null&&i.storage)&&this.platform&&(this.stateMachine.setStorage(this.application.storage),this.conversationState$.next("init"));const t=this.application.settings.components.conversation;return((o=(r=t==null?void 0:t.properties)==null?void 0:r.chat)==null?void 0:o.isThirdPartyWidget)&&(this.renderRoot.host.style.width="100%"),m` <div
+    `];Ml([w({attribute:!0})],wn.prototype,"imageUrl",2);var zl=Object.defineProperty,Ul=Object.getOwnPropertyDescriptor,V=(s,e,t,n)=>{for(var i=n>1?void 0:n?Ul(e,t):e,r=s.length-1,o;r>=0;r--)(o=s[r])&&(i=(n?o(e,t,i):o(i))||i);return n&&i&&zl(e,t,i),i};customElements.get("conversation-entry")||customElements.define("conversation-entry",pn);customElements.get("ace-conversation-feed")||customElements.define("ace-conversation-feed",mt);customElements.get("conversation-group")||customElements.define("conversation-group",dn);customElements.get("ace-typing-state")||customElements.define("ace-typing-state",gi);customElements.get("message-type-html")||customElements.define("message-type-html",fn);customElements.get("message-type-markdown")||customElements.define("message-type-markdown",bt);customElements.get("ace-lightbox")||customElements.define("ace-lightbox",wn);const Ei=pi(k);class O extends Ei{constructor(){super(...arguments),this.message="",this.disabledInput=!1,this.disabledSubmit=!1,this.chatOverlayActive=!1,this.textAreaLength=0,this.isMuted=!1,this.conversationContentRef=M(),this.conversationFeedRef=M(),this.formRef=M(),this.inputRef=M(),this.scrollRef=M(),this.counterRef=M(),this.chatScrollHeight=0,this.chatCurrentScrollPosition=0,this.toast=new Ia(this),this.messageMaxLength=1e3,this.messageMaxLengthLabel="Maximum character limit reached",this.skipToLatestMessageLabel="Skip to latest message",this.platform=null,this.entries=[],this.typing=!1,this.conversationState$=new U("waiting"),this.stateMachine=new za(this.conversationState$,this),this.provider$=this.stateMachine.session().pipe(de(e=>e?e==null?void 0:e.provider$:It(null))),this.userTyping$=new _}async connectedCallback(){super.connectedCallback(),this.messageMaxLength=this.properties.messageMaxLength??this.messageMaxLength,this.messageMaxLengthLabel=this.properties.messageMaxLengthLabel??this.messageMaxLengthLabel,this.skipToLatestMessageLabel=this.properties.skipToLatestMessageLabel??this.skipToLatestMessageLabel;const e=await this.application.container.get("conversation");this.platform=e||null;const t=this.application.trigger;t&&t.widgetActive$.pipe(zt(t.componentIsDestroyed$)).subscribe(n=>{const i=this.conversationContentRef.value;i&&(n?i.scrollTop=this.chatCurrentScrollPosition:this.chatCurrentScrollPosition=i.scrollTop)}),this.stateSubscription=mr([this.stateMachine.entries(),this.stateMachine.isTyping()]).subscribe(([n,i])=>{this.entries=n,this.typing=i}),this.userSubmitSubscription=Ke(this,"user-submit").pipe(Ut(this.provider$)).subscribe(([n,i])=>{i&&i.onUserSubmit(n.detail)}),this._addHeaderOptions(),this.provider$.pipe(Ut(this.provider$)).subscribe(([n,i])=>{i&&i.showChatOverlay$.pipe().subscribe(r=>{this.chatOverlayActive=r})})}disconnectedCallback(){var e,t;super.disconnectedCallback(),(e=this.userSubmitSubscription)==null||e.unsubscribe(),(t=this.stateSubscription)==null||t.unsubscribe()}_actionHandler(e){}isTypingState(){var t,n;const e=(n=(t=this.conversationFeedRef.value)==null?void 0:t.shadowRoot)==null?void 0:n.querySelector(".conversation-feed");if(e){const i=e.lastElementChild;if(i&&i.tagName.toLowerCase()==="ace-typing-state")return!0}return!1}isAtBottom(){const e=this.conversationContentRef.value;return e?e.scrollHeight-e.scrollTop-e.clientHeight<1:!1}scrollToBottom(){var e,t;(!this.isTypingState()||this.isAtBottom())&&(setTimeout(()=>{var n;return(n=this.scrollRef.value)==null?void 0:n.scrollIntoView({behavior:"smooth"})},300),this.chatScrollHeight=(e=this.scrollRef.value)==null?void 0:e.scrollHeight,this.chatCurrentScrollPosition=(t=this.scrollRef.value)==null?void 0:t.scrollTop)}onSessionUpdated(){this.scrollToBottom()}disableInput(){this.disabledInput=!0,this.message=""}enableInput(){this.disabledInput=!1}disableSubmit(){this.disabledSubmit=!0}enableSubmit(){this.disabledSubmit=!1}clearMessages(){var i,r;const e=(i=this.shadowRoot)==null?void 0:i.querySelector("ace-conversation-feed"),t=(r=e==null?void 0:e.shadowRoot)==null?void 0:r.querySelector(".conversation-feed"),n=t==null?void 0:t.querySelectorAll(".conversation-entry");n==null||n.forEach(o=>o.remove())}setToastMessage(e){this.toast.message=e}async _onSendMessage(e){var n,i;if(e.preventDefault(),this.message.length<=0||this.message.length>this.messageMaxLength){(n=this.formRef.value)==null||n.classList.add("shake"),setTimeout(()=>{var r;(r=this.formRef.value)==null||r.classList.remove("shake")},500);return}this.message=this.message.slice(0,this.messageMaxLength);const t=new CustomEvent("user-submit",{detail:{text:this.message}});this.dispatchEvent(t),this.message="",this.textAreaLength=0,(i=this.counterRef.value)==null||i.classList.remove("max-char-count-reached"),this.inputRef.value.style.height=this.style.getPropertyValue("--textarea-default-height")}_addHeaderOptions(){const e=this.application.getComponent("widget-header");if(!e)return;const t=this.application.texts,n=t.getOrFallback("conversation.mute","Mute"),i=t.getOrFallback("conversation.unmute","Unmute"),r=e.addOption({label:this.isMuted?i:n,icon:this.isMuted?Hn.svg:Bn.svg,closeOnClick:!1,datatestid:"options-mute-button",onClick:()=>{this.isMuted?(this.isMuted=!1,this.application.unmute(),r.updateLabel(n),r.updateIcon(Bn.svg)):(this.isMuted=!0,this.application.mute(),r.updateLabel(i),r.updateIcon(Hn.svg))}})}_inputHandler(e){var t,n;this.message=e.target.value,e.target.style.height=this.style.getPropertyValue("--textarea-default-height"),e.target.style.height=e.target.scrollHeight+"px",this.textAreaLength=e.target.value.length,e.target.value.length>this.messageMaxLength?(t=this.counterRef.value)==null||t.classList.add("max-char-count-reached"):(n=this.counterRef.value)==null||n.classList.remove("max-char-count-reached")}_keyDownHandler(e){this.userTyping$.next(e.key),e.key==="Enter"&&!e.shiftKey&&!this.disabledSubmit&&(this._onSendMessage(e),e.preventDefault())}skipToLatestMessage(){var n,i;const e=(n=this.conversationFeedRef)==null?void 0:n.value,t=(i=e==null?void 0:e.shadowRoot)==null?void 0:i.querySelectorAll(".conversation-entry");t.length&&Array.from(t).pop().focus()}handover(e,t){this.enableInput(),this.setToastMessage(null);const n=new CustomEvent("handover",{detail:{providerKey:e,providerOptions:t}});return this.dispatchEvent(n),n.detail.complete||Re}firstUpdated(){this.isMuted=this.application.storage.get("muteAudioNotifications")??!1}render(){var i,r,o;const e=this.application.texts;this.conversationState$.value==="waiting"&&((i=this.application)!=null&&i.storage)&&this.platform&&(this.stateMachine.setStorage(this.application.storage),this.conversationState$.next("init"));const t=this.application.settings.components.conversation;return((o=(r=t==null?void 0:t.properties)==null?void 0:r.chat)==null?void 0:o.isThirdPartyWidget)&&(this.renderRoot.host.style.width="100%"),m` <div
       @action=${this._actionHandler}
       class=${be({conversation:!0,disabled:this.disabledInput,"conversation--has-toast":this.toast.hasMessage(),"conversation--input-has-valid-text":this.message.length>0&&this.message.length<=this.messageMaxLength&&!this.disabledSubmit,"overlay-mode":this.chatOverlayActive})}
     >

package/index.mjs

@@ -6330,7 +6330,7 @@ customElements.get("ace-lightbox") || customElements.define("ace-lightbox", xn);
 const Si = ci(k);
 class R extends Si {
   constructor() {
-    super(...arguments), this.message = "", this.disabledInput = !1, this.disabledSubmit = !1, this.chatOverlayActive = !1, this.textAreaLength = 0, this.conversationContentRef = M(), this.conversationFeedRef = M(), this.formRef = M(), this.inputRef = M(), this.scrollRef = M(), this.counterRef = M(), this.chatScrollHeight = 0, this.chatCurrentScrollPosition = 0, this.toast = new Oa(this), this.messageMaxLength = 1e3, this.messageMaxLengthLabel = "Maximum character limit reached", this.skipToLatestMessageLabel = "Skip to latest message", this.platform = null, this.entries = [], this.typing = !1, this.conversationState$ = new U("waiting"), this.stateMachine = new Ra(this.conversationState$, this), this.provider$ = this.stateMachine.session().pipe(
+    super(...arguments), this.message = "", this.disabledInput = !1, this.disabledSubmit = !1, this.chatOverlayActive = !1, this.textAreaLength = 0, this.isMuted = !1, this.conversationContentRef = M(), this.conversationFeedRef = M(), this.formRef = M(), this.inputRef = M(), this.scrollRef = M(), this.counterRef = M(), this.chatScrollHeight = 0, this.chatCurrentScrollPosition = 0, this.toast = new Oa(this), this.messageMaxLength = 1e3, this.messageMaxLengthLabel = "Maximum character limit reached", this.skipToLatestMessageLabel = "Skip to latest message", this.platform = null, this.entries = [], this.typing = !1, this.conversationState$ = new U("waiting"), this.stateMachine = new Ra(this.conversationState$, this), this.provider$ = this.stateMachine.session().pipe(
       de((e) => e ? e == null ? void 0 : e.provider$ : It(null))
     ), this.userTyping$ = new _();
   }
@@ -6437,13 +6437,13 @@ class R extends Si {
     const e = this.application.getComponent("widget-header");
     if (!e)
       return;
-    const t = this.application.texts, n = t.getOrFallback("conversation.mute", "Mute"), i = t.getOrFallback("conversation.unmute", "Unmute"), r = !!this.application.storage.get("muteAudioNotifications"), o = e.addOption({
-      label: r ? i : n,
-      icon: r ? Dn.svg : Hn.svg,
+    const t = this.application.texts, n = t.getOrFallback("conversation.mute", "Mute"), i = t.getOrFallback("conversation.unmute", "Unmute"), r = e.addOption({
+      label: this.isMuted ? i : n,
+      icon: this.isMuted ? Dn.svg : Hn.svg,
       closeOnClick: !1,
       datatestid: "options-mute-button",
       onClick: () => {
-        !!this.application.storage.get("muteAudioNotifications") ? (this.application.unmute(), o.updateLabel(n), o.updateIcon(Hn.svg)) : (this.application.mute(), o.updateLabel(i), o.updateIcon(Dn.svg));
+        this.isMuted ? (this.isMuted = !1, this.application.unmute(), r.updateLabel(n), r.updateIcon(Hn.svg)) : (this.isMuted = !0, this.application.mute(), r.updateLabel(i), r.updateIcon(Dn.svg));
       }
     });
   }
@@ -6475,6 +6475,9 @@ class R extends Si {
     });
     return this.dispatchEvent(n), n.detail.complete || Re;
   }
+  firstUpdated() {
+    this.isMuted = this.application.storage.get("muteAudioNotifications") ?? !1;
+  }
   render() {
     var i, r, o;
     const e = this.application.texts;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-conversation-flamingo",
-  "version": "1.1.76-rc.41",
+  "version": "1.1.76-rc.43",
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
@@ -9,7 +9,7 @@
     "@lit-labs/motion": "^1.0.4",
     "@teliads/icons": "^8.4.0",
     "@teliads/components": "^22.1.1",
-    "@telia-ace/widget-core-flamingo": "1.1.76-rc.41",
+    "@telia-ace/widget-core-flamingo": "1.1.76-rc.43",
     "lit-html": "^3.0.2",
     "rxjs": "^7.8.1",
     "marked": "^12.0.2"