@meetelise/chat 1.20.98 → 1.20.100

package/src/MyPubnub.ts

@@ -23,11 +23,17 @@ interface TokenResponse {
   };
 }
 
+enum MessageType {
+  noReply = "no-reply",
+  text = "text",
+}
+
 export interface ChatMessage {
   channel: string;
   message: {
     text: string;
     customType: string;
+    messageType?: MessageType;
   };
   publisher: string;
   subscription: string;
@@ -61,16 +67,19 @@ class MyPubnub {
   messages: ChatMessage[] = [];
   listenerParams: ListenerParameters = {
     message: (messageEvent: MessageEvent) => {
-      this.messages = [
-        ...this.messages,
-        {
-          channel: messageEvent.channel,
-          message: messageEvent.message,
-          publisher: messageEvent.publisher,
-          subscription: messageEvent.subscription,
-          timetoken: +messageEvent.timetoken,
-        },
-      ];
+      // if the messageEvent is a no-reply, we ignore it and stop loading
+      if (messageEvent.message.messageType !== MessageType.noReply) {
+        this.messages = [
+          ...this.messages,
+          {
+            channel: messageEvent.channel,
+            message: messageEvent.message,
+            publisher: messageEvent.publisher,
+            subscription: messageEvent.subscription,
+            timetoken: +messageEvent.timetoken,
+          },
+        ];
+      }
       const isWaitingForEliseResponse = messageEvent.publisher !== "eliseai";
       this.chatListener?.({
         messages: this.messages,
@@ -271,7 +280,9 @@ class MyPubnub {
             });
           }
         });
-        this.messages = parsedCurrentChannelMessages;
+        this.messages = parsedCurrentChannelMessages.filter(
+          (m) => m.message.messageType !== MessageType.noReply
+        );
         this.chatListener?.({ messages: this.messages, isLoading: false });
       }
     } catch (error) {

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)}