@meetelise/chat 1.20.98 → 1.20.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.20.98",
+  "version": "1.20.99",
   "description": "",
   "main": "public/dist/index.js",
   "type": "module",

package/public/dist/index.js

@@ -3073,7 +3073,8 @@ otherwise there's some empty space at the bottom of the button, which interferes
   }
 
   #footer {
-    height: 70px;
+    min-height: 70px;
+    max-height: 200px;
     width: 100%;
     background: black;
 
@@ -3086,8 +3087,13 @@ otherwise there's some empty space at the bottom of the button, which interferes
     z-index: 100001;
   }
   #message-input {
-    height: 40px;
     width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    resize: none;
+
+    font-family: inherit;
     box-sizing: border-box;
     font-weight: 300;
     font-size: 14px;
@@ -3095,6 +3101,9 @@ otherwise there's some empty space at the bottom of the button, which interferes
     border: none;
     color: white;
     background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
     z-index: 1000000000000000000000000001;
   }
   #message-input:focus {
@@ -3200,7 +3209,7 @@ otherwise there's some empty space at the bottom of the button, which interferes
             </div>
           </div>
         </a></div> `}))}
-    </div>`:B``}};kr.styles=[Mr],Dr([de({attribute:!0})],kr.prototype,"message",void 0),Dr([de({attribute:!0})],kr.prototype,"myPubnub",void 0),Dr([de({attribute:!0})],kr.prototype,"onMount",void 0),Dr([ce()],kr.prototype,"loadingPreviews",void 0),Dr([ce()],kr.prototype,"parsedMessage",void 0),Dr([ce()],kr.prototype,"websitePreviewInfo",void 0),kr=Dr([ue("pubnub-message")],kr);var Ur=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let qr=class extends ae{constructor(){super(...arguments),this.brandColor=yi,this.onClickExit=()=>({}),this.onMount=()=>({}),this.messages=[],this.isMobile=!1,this.isLoadingMessages=!1,this.websitePreviewMapping={},this.sendMessage=async e=>{var t;this.messageInput.value="",await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e))},this.scrollToChatBottom=()=>{this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"smooth"})}}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.messages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener((e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading})),this.onMount()}async updated(){this.scrollToChatBottom()}render(){return this.buildingSlug&&this.building?B`
+    </div>`:B``}};kr.styles=[Mr],Dr([de({attribute:!0})],kr.prototype,"message",void 0),Dr([de({attribute:!0})],kr.prototype,"myPubnub",void 0),Dr([de({attribute:!0})],kr.prototype,"onMount",void 0),Dr([ce()],kr.prototype,"loadingPreviews",void 0),Dr([ce()],kr.prototype,"parsedMessage",void 0),Dr([ce()],kr.prototype,"websitePreviewInfo",void 0),kr=Dr([ue("pubnub-message")],kr);var Ur=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let qr=class extends ae{constructor(){super(...arguments),this.brandColor=yi,this.onClickExit=()=>({}),this.onMount=()=>({}),this.messages=[],this.isMobile=!1,this.isLoadingMessages=!1,this.websitePreviewMapping={},this.sendMessage=async e=>{var t;this.messageInput.value="",this.autoResizeMessageInput(),await(null===(t=this.myPubnub)||void 0===t?void 0:t.sendMessage(e))},this.scrollToChatBottom=()=>{this.messageBody.scrollTo({top:this.messageBody.scrollHeight-this.messageBody.clientHeight,behavior:"smooth"})},this.autoResizeMessageInput=()=>{this.messageInput.style.height="auto",this.messageInput.style.height=this.messageInput.scrollHeight+"px"}}firstUpdated(){var e,t;this.messages=(null===(e=this.myPubnub)||void 0===e?void 0:e.messages)||[],null===(t=this.myPubnub)||void 0===t||t.addChatListener((e=>{this.messages=e.messages,this.isLoadingMessages=e.isLoading})),this.onMount()}async updated(){this.scrollToChatBottom()}render(){return this.buildingSlug&&this.building?B`
       <div
         id="pubnub-chat-container"
         class=${ge({"pubnub-container__mobile":this.isMobile,"pubnub-container__desktop":!this.isMobile})}
@@ -3256,11 +3265,13 @@ otherwise there's some empty space at the bottom of the button, which interferes
           </ul>
         </div>
         <div id="footer">
-          <input
+          <textarea
             id="message-input"
             placeholder="Ask a question..."
-            @keydown=${e=>{"Enter"===e.key&&this.sendMessage(this.messageInput.value)}}
-          />
+            @keydown=${e=>{"Enter"===e.key&&(e.preventDefault(),this.sendMessage(this.messageInput.value))}}
+            @input=${()=>this.autoResizeMessageInput()}
+            rows="1"
+          ></textarea>
           <button
             id="send-message-bttn"
             @click=${()=>this.sendMessage(this.messageInput.value)}

package/src/WebComponent/pubnub-chat-styles.ts

@@ -168,7 +168,8 @@ export const pubnubChatStyles = css`
   }
 
   #footer {
-    height: 70px;
+    min-height: 70px;
+    max-height: 200px;
     width: 100%;
     background: black;
 
@@ -181,8 +182,13 @@ export const pubnubChatStyles = css`
     z-index: 100001;
   }
   #message-input {
-    height: 40px;
     width: 100%;
+    height: auto;
+    max-height: 100%;
+
+    resize: none;
+
+    font-family: inherit;
     box-sizing: border-box;
     font-weight: 300;
     font-size: 14px;
@@ -190,6 +196,9 @@ export const pubnubChatStyles = css`
     border: none;
     color: white;
     background: none;
+
+    padding-right: 6px; /* width of the scrollbar */
+    box-sizing: border-box;
     z-index: 1000000000000000000000000001;
   }
   #message-input:focus {

package/src/WebComponent/pubnub-chat.ts

@@ -36,7 +36,7 @@ export class PubnubChat extends LitElement {
   onMount: () => void = () => ({});
 
   @query("#message-input", true)
-  messageInput!: HTMLInputElement;
+  messageInput!: HTMLTextAreaElement;
 
   @query("#conversation-body", true)
   messageBody!: HTMLDivElement;
@@ -63,6 +63,7 @@ export class PubnubChat extends LitElement {
 
   sendMessage = async (message: string): Promise<void> => {
     this.messageInput.value = "";
+    this.autoResizeMessageInput();
     await this.myPubnub?.sendMessage(message);
   };
   firstUpdated(): void {
@@ -87,6 +88,11 @@ export class PubnubChat extends LitElement {
     this.scrollToChatBottom();
   }
 
+  autoResizeMessageInput = (): void => {
+    this.messageInput.style.height = "auto";
+    this.messageInput.style.height = this.messageInput.scrollHeight + "px";
+  };
+
   render(): TemplateResult {
     if (!this.buildingSlug || !this.building) {
       return html``; // error here
@@ -167,13 +173,18 @@ export class PubnubChat extends LitElement {
           </ul>
         </div>
         <div id="footer">
-          <input
+          <textarea
             id="message-input"
             placeholder="Ask a question..."
             @keydown=${(e: KeyboardEvent) => {
-              if (e.key === "Enter") this.sendMessage(this.messageInput.value);
+              if (e.key === "Enter") {
+                e.preventDefault();
+                this.sendMessage(this.messageInput.value);
+              }
             }}
-          />
+            @input=${() => this.autoResizeMessageInput()}
+            rows="1"
+          ></textarea>
           <button
             id="send-message-bttn"
             @click=${() => this.sendMessage(this.messageInput.value)}