@telia-ace/widget-conversation-flamingo 1.1.70-rc.16 → 1.1.70-rc.18

package/conversation.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import { Ref } from 'lit-html/directives/ref.js';
 import { ConversationPlatform } from './conversation-platform';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { ConversationEntry } from './models/conversation-entry';
 declare const WidgetElement: (new (...args: any[]) => import("@telia-ace/widget-core-flamingo").WidgetComponentType) & typeof LitElement;
 export declare class Conversation extends WidgetElement {
@@ -29,6 +29,7 @@ export declare class Conversation extends WidgetElement {
     private conversationState$;
     private stateMachine;
     private provider$;
+    userTyping$: Subject<string>;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     _actionHandler(_e: CustomEvent<{

package/index.js

@@ -305,6 +305,7 @@
     @media screen and (max-width: 800px) {
       :host(.floating) {
         inset: 0 0 95px 0;
+        height: 100vh;
       }
     }
     @media screen and (min-width: 801px) {
@@ -325,6 +326,10 @@
     :host(.floating) .widget-container {
       box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
       border-radius: 0.7rem;
+
+      @media screen and (max-width: 800px) {
+        border-radius: 0;
+      }
     }
 
     * {
@@ -363,6 +368,7 @@
     :host(.hidden) {
       opacity: 0;
       animation: slideDown 0.3s linear;
+      pointer-events: none;
     }
   `;_a([w({attribute:!1}),xa({context:Sa})],cn.prototype,"application",2);var Ca=Object.defineProperty,Aa=Object.getOwnPropertyDescriptor,hn=(s,e,t,n)=>{for(var i=n>1?void 0:n?Aa(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&&Ca(e,t,i),i};class ze extends k{constructor(){super(),this.status="deactivated",this.addEventListener("environment-created",this.onEnvironmentCreated)}async connectedCallback(){super.connectedCallback(),await this.getGlobalEnvironment()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("environment-created",this.onEnvironmentCreated)}async onEnvironmentCreated(e){this.widget=e.detail.widget,await this.activate(),this.requestUpdate()}async activate(){this.widget&&(await this.widget.activate(),this.status="activated")}async getGlobalEnvironment(){const e=globalThis.widgets;e&&(this.widget=e.applications.find(t=>t.name===this.name),await this.activate())}render(){if(!this.widget||this.status!=="activated")return g;if(this.widget.renderStrategy===ln.Trigger){const e=new re;return e.application=this.widget,e}return this.widget.render()}}ze.styles=[A`
       :host {
@@ -767,7 +773,7 @@ Please report this to https://github.com/markedjs/marked.`,e){const i="<p>An err
         width: 80%;
         max-width: 700px;
       }
-    `];Tl([w({attribute:!0})],xn.prototype,"imageUrl",2);var Ll=Object.defineProperty,Ol=Object.getOwnPropertyDescriptor,G=(s,e,t,n)=>{for(var i=n>1?void 0:n?Ol(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&&Ll(e,t,i),i};customElements.get("conversation-entry")||customElements.define("conversation-entry",un);customElements.get("ace-conversation-feed")||customElements.define("ace-conversation-feed",mt);customElements.get("conversation-group")||customElements.define("conversation-group",pn);customElements.get("ace-typing-state")||customElements.define("ace-typing-state",pi);customElements.get("message-type-html")||customElements.define("message-type-html",dn);customElements.get("message-type-markdown")||customElements.define("message-type-markdown",bt);customElements.get("ace-lightbox")||customElements.define("ace-lightbox",xn);const Si=ci(k);class O extends Si{constructor(){super(...arguments),this.message="",this.disabledInput=!1,this.disabledSubmit=!1,this.chatOverlayActive=!1,this.textAreaLength=0,this.conversationContentRef=B(),this.conversationFeedRef=B(),this.formRef=B(),this.inputRef=B(),this.scrollRef=B(),this.chatScrollHeight=0,this.chatCurrentScrollPosition=0,this.toast=new Ea(this),this.messageMaxLength=1e3,this.skipToLatestMessageLabel="Skip to latest message",this.platform=null,this.entries=[],this.typing=!1,this.conversationState$=new M("waiting"),this.stateMachine=new La(this.conversationState$,this),this.provider$=this.stateMachine.session().pipe(pe(e=>e?e==null?void 0:e.provider$:It(null)))}async connectedCallback(){super.connectedCallback(),this.messageMaxLength=this.properties.messageMaxLength??this.messageMaxLength,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=dr([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}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;if(e.preventDefault(),this.message.length<=0){(n=this.formRef.value)==null||n.classList.add("shake"),setTimeout(()=>{var i;(i=this.formRef.value)==null||i.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.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?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))}})}_inputHandler(e){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}_keyDownHandler(e){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||Pe}render(){var t;const e=this.application.texts;return this.conversationState$.value==="waiting"&&((t=this.application)!=null&&t.storage)&&this.platform&&(this.stateMachine.setStorage(this.application.storage),this.conversationState$.next("init")),m` <div
+    `];Tl([w({attribute:!0})],xn.prototype,"imageUrl",2);var Ll=Object.defineProperty,Ol=Object.getOwnPropertyDescriptor,G=(s,e,t,n)=>{for(var i=n>1?void 0:n?Ol(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&&Ll(e,t,i),i};customElements.get("conversation-entry")||customElements.define("conversation-entry",un);customElements.get("ace-conversation-feed")||customElements.define("ace-conversation-feed",mt);customElements.get("conversation-group")||customElements.define("conversation-group",pn);customElements.get("ace-typing-state")||customElements.define("ace-typing-state",pi);customElements.get("message-type-html")||customElements.define("message-type-html",dn);customElements.get("message-type-markdown")||customElements.define("message-type-markdown",bt);customElements.get("ace-lightbox")||customElements.define("ace-lightbox",xn);const Si=ci(k);class O extends Si{constructor(){super(...arguments),this.message="",this.disabledInput=!1,this.disabledSubmit=!1,this.chatOverlayActive=!1,this.textAreaLength=0,this.conversationContentRef=B(),this.conversationFeedRef=B(),this.formRef=B(),this.inputRef=B(),this.scrollRef=B(),this.chatScrollHeight=0,this.chatCurrentScrollPosition=0,this.toast=new Ea(this),this.messageMaxLength=1e3,this.skipToLatestMessageLabel="Skip to latest message",this.platform=null,this.entries=[],this.typing=!1,this.conversationState$=new M("waiting"),this.stateMachine=new La(this.conversationState$,this),this.provider$=this.stateMachine.session().pipe(pe(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.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=dr([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}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;if(e.preventDefault(),this.message.length<=0){(n=this.formRef.value)==null||n.classList.add("shake"),setTimeout(()=>{var i;(i=this.formRef.value)==null||i.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.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?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))}})}_inputHandler(e){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}_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||Pe}render(){var t;const e=this.application.texts;return this.conversationState$.value==="waiting"&&((t=this.application)!=null&&t.storage)&&this.platform&&(this.stateMachine.setStorage(this.application.storage),this.conversationState$.next("init")),m` <div
       @action=${this._actionHandler}
       class=${Te({conversation:!0,disabled:this.disabledInput,"conversation--has-toast":this.toast.hasMessage(),"conversation--input-has-text":this.message.length>0&&!this.disabledSubmit,"overlay-mode":this.chatOverlayActive})}
     >

package/index.mjs

@@ -3641,6 +3641,7 @@ ln.styles = A`
     @media screen and (max-width: 800px) {
       :host(.floating) {
         inset: 0 0 95px 0;
+        height: 100vh;
       }
     }
     @media screen and (min-width: 801px) {
@@ -3661,6 +3662,10 @@ ln.styles = A`
     :host(.floating) .widget-container {
       box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
       border-radius: 0.7rem;
+
+      @media screen and (max-width: 800px) {
+        border-radius: 0;
+      }
     }
 
     * {
@@ -3699,6 +3704,7 @@ ln.styles = A`
     :host(.hidden) {
       opacity: 0;
       animation: slideDown 0.3s linear;
+      pointer-events: none;
     }
   `;
 wa([
@@ -6105,7 +6111,7 @@ class R extends ki {
   constructor() {
     super(...arguments), this.message = "", this.disabledInput = !1, this.disabledSubmit = !1, this.chatOverlayActive = !1, this.textAreaLength = 0, this.conversationContentRef = B(), this.conversationFeedRef = B(), this.formRef = B(), this.inputRef = B(), this.scrollRef = B(), this.chatScrollHeight = 0, this.chatCurrentScrollPosition = 0, this.toast = new Ca(this), this.messageMaxLength = 1e3, this.skipToLatestMessageLabel = "Skip to latest message", this.platform = null, this.entries = [], this.typing = !1, this.conversationState$ = new M("waiting"), this.stateMachine = new Ea(this.conversationState$, this), this.provider$ = this.stateMachine.session().pipe(
       pe((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.skipToLatestMessageLabel = this.properties.skipToLatestMessageLabel ?? this.skipToLatestMessageLabel;
@@ -6226,7 +6232,7 @@ class R extends ki {
     ), e.target.style.height = e.target.scrollHeight + "px", this.textAreaLength = e.target.value.length;
   }
   _keyDownHandler(e) {
-    e.key === "Enter" && !e.shiftKey && !this.disabledSubmit && (this._onSendMessage(e), e.preventDefault());
+    this.userTyping$.next(e.key), e.key === "Enter" && !e.shiftKey && !this.disabledSubmit && (this._onSendMessage(e), e.preventDefault());
   }
   skipToLatestMessage() {
     var n, i;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-conversation-flamingo",
-  "version": "1.1.70-rc.16",
+  "version": "1.1.70-rc.18",
   "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.70-rc.16",
+    "@telia-ace/widget-core-flamingo": "1.1.70-rc.18",
     "lit-html": "^3.0.2",
     "rxjs": "^7.8.1",
     "marked": "^12.0.2"