@meetelise/chat 1.21.0 → 1.21.2

package/src/WebComponent/me-select.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { property, state, query, customElement } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { isMobile } from "../utils";
 import { InputStyles } from "./actions/InputStyles";
 
 type MeSelectOption = {
@@ -25,9 +26,16 @@ export class MESelect extends LitElement {
   @state()
   private isOpen?: boolean = false;
 
+  @state()
+  private activeOptionIndex: number | null = null;
+
   @query("#select", true)
   meSelect!: HTMLDivElement;
 
+  focus = (): void => {
+    this.meSelect.focus();
+  };
+
   toggleSelect = (): void => {
     if (this.isOpen) {
       this.activeOption = null;
@@ -68,6 +76,16 @@ export class MESelect extends LitElement {
     };
   };
 
+  private adjustScrollToActiveOption(): void {
+    if (this.activeOptionIndex != null) {
+      const optionElements = this.renderRoot.querySelectorAll(".option");
+      const activeOptionElement = optionElements[this.activeOptionIndex];
+      if (activeOptionElement) {
+        activeOptionElement.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }
+
   constructor() {
     super();
     // TODO: the current thing works, but want to investigate more. why doesn't it work with `this`?
@@ -93,7 +111,7 @@ export class MESelect extends LitElement {
       ul {
         padding-left: 0;
         margin-bottom: 0;
-        max-height: 200px;
+        max-height: 140px;
         overflow-y: scroll;
         position: absolute;
         min-height: 40px;
@@ -110,16 +128,23 @@ export class MESelect extends LitElement {
 
         font-size: 14px;
         line-height: 14px;
-        font-family: "Poppins";
+        font-family: "Helvetica Neue", Arial;
+      }
+
+      #outer-select-container {
+        position: relative;
       }
 
       #select {
         width: -webkit-fill-available;
-        height: 49px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         color: rgba(32, 32, 32, 0.5);
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       ::-webkit-scrollbar {
@@ -167,10 +192,14 @@ export class MESelect extends LitElement {
   };
   render(): TemplateResult {
     return html`
-      <div>
+      <div id="outer-select-container">
         <div
           id="select"
-          class="webchat-input"
+          class=${classMap({
+            ["webchat-input"]: true,
+            ["webchat-font__desktop"]: !isMobile(),
+            ["webchat-font__mobile"]: isMobile(),
+          })}
           tabindex="0"
           @click=${() => (this.isOpen = !this.isOpen)}
           @keydown="${(e: KeyboardEvent) => {
@@ -195,28 +224,26 @@ export class MESelect extends LitElement {
                 break;
               case "ArrowUp":
                 e.preventDefault();
-                if (this.isOpen && this.activeOption) {
-                  if (this.options.indexOf(this.activeOption) > 0) {
-                    this.activeOption =
-                      this.options[this.options.indexOf(this.activeOption) - 1];
-                  } else {
-                    this.activeOption = null;
-                  }
+                if (this.isOpen && this.activeOptionIndex != null) {
+                  this.activeOptionIndex = Math.max(
+                    0,
+                    this.activeOptionIndex - 1
+                  );
+                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.adjustScrollToActiveOption();
                 }
                 break;
+
               case "ArrowDown":
                 e.preventDefault();
                 if (this.isOpen) {
-                  if (!this.activeOption) {
-                    this.activeOption = this.options[0];
-                  } else if (
-                    this.activeOption &&
-                    this.options.indexOf(this.activeOption) <
-                      this.options.length - 1
-                  ) {
-                    this.activeOption =
-                      this.options[this.options.indexOf(this.activeOption) + 1];
+                  if (this.activeOptionIndex == null) {
+                    this.activeOptionIndex = 0;
+                  } else if (this.activeOptionIndex < this.options.length - 1) {
+                    this.activeOptionIndex++;
                   }
+                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.adjustScrollToActiveOption();
                 }
                 break;
             }

package/src/WebComponent/mini-loader.ts

@@ -0,0 +1,28 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+@customElement("mini-loader")
+export class MiniLoader extends LitElement {
+  static styles = css`
+    .spinner {
+      border: 2px solid rgba(0, 0, 0, 0.2);
+      border-top: 2px solid #c057ff;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      animation: spin 0.4s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+
+  render(): TemplateResult {
+    return html`<div class="spinner"></div>`;
+  }
+}

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

@@ -0,0 +1,192 @@
+import { css } from "lit";
+
+export const pubnubChatStyles = css`
+  #header-text {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;
+  }
+  #header-subtext {
+    font-size: 12px;
+    font-weight: light;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #737373;
+  }
+  #exit-chat-bttn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+  }
+  #conversation-body {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+  }
+
+  #message-thread-list {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0px 16px;
+    gap: 12px;
+    list-style: none;
+  }
+  .lead-message {
+    background: black;
+    border-radius: 8px 8px 0px 8px;
+
+    align-self: flex-end;
+    color: white;
+
+    box-shadow: 0px 18.048254013061523px 75.2010498046875px 0px #d9d9d91a;
+    box-shadow: 0px 1.7331933975219727px 2.599790096282959px 0px #0000000a;
+  }
+  .message-container {
+    display: flex;
+    padding: 6px;
+    width: fit-content;
+    max-width: calc(100% - 60px);
+    box-sizing: border-box;
+  }
+  .ai-message {
+    background: white;
+    border-radius: 10px 10px 10px 0px;
+    color: black;
+    box-shadow: 0px 18.048254013061523px 75.2010498046875px 0px #d9d9d91a;
+    box-shadow: 0px 1.7331933975219727px 2.599790096282959px 0px #0000000a;
+  }
+
+  .with-box-shadow {
+    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.05);
+  }
+  .message-text {
+    word-break: break-word;
+    margin: 0;
+    padding: 6px 12px;
+    line-height: 130%;
+
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 17px;
+    letter-spacing: 0em;
+    text-align: left;
+  }
+  .displayed-message-image {
+    max-width: 100%;
+    max-height: 300px;
+    width: auto;
+    height: auto;
+  }
+  .displayed-message-image-error {
+    display: none;
+  }
+  .redirect-link {
+    color: inherit;
+  }
+
+  #loading-message {
+    padding: 12px;
+  }
+  .loading-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    margin: 5px;
+    animation: pulse 4s linear infinite;
+  }
+
+  .dot-1 {
+    background-color: #7d7d7d;
+    animation-delay: 0s;
+  }
+
+  .dot-2 {
+    background-color: #7d7d7d;
+    animation-delay: 1s;
+  }
+
+  .dot-3 {
+    background-color: #7d7d7d;
+    animation-delay: 2s;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+    50% {
+      background-color: #c7c7c7;
+      transform: scale(2);
+    }
+    100% {
+      background-color: #7d7d7d;
+      transform: scale(1);
+    }
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  .legal-confirmation-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    font-size: 14px;
+    line-height: 22px;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    background: #f5f5f5;
+    overflow-y: scroll;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 6px solid black;
+
+    padding: 12px;
+    box-sizing: border-box;
+  }
+
+  .legal-confirmation-inner-container {
+    margin: 0 16px;
+  }
+
+  .privacy-policy-link {
+    color: blue;
+  }
+
+  .agreeButton {
+    background: #000;
+    border-radius: 20px;
+    color: #fff;
+    padding: 8px 16px;
+    border: none;
+    cursor: pointer;
+    width: fit-content;
+  }
+
+  .confirmation-with-checkbox {
+    display: flex;
+    align: center;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .checkbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  .checkbox:hover {
+    opacity: 0.5;
+  }
+`;