@meetelise/chat 1.30.0 → 1.30.2

package/src/WebComponent/me-select.ts

@@ -0,0 +1,322 @@
+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 = {
+  label: string;
+  value: string;
+};
+
+@customElement("me-select")
+export class MESelect extends LitElement {
+  @property({ attribute: false })
+  options: MeSelectOption[] = [];
+
+  @property({ type: String })
+  placeholder?: string = "Select";
+
+  @property({ type: String })
+  value?: string;
+
+  @state()
+  private activeOption: MeSelectOption | null = null;
+
+  @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;
+    }
+    this.isOpen = !this.isOpen;
+  };
+
+  setSelectedOption = (option: MeSelectOption, closeSelect = true): void => {
+    if (this.value !== option.value) {
+      this.value = option.value;
+    } else {
+      this.value = undefined;
+    }
+
+    if (closeSelect) {
+      this.isOpen = !this.isOpen;
+      this.activeOption = null;
+    }
+
+    if (!this.value) {
+      this.meSelect.style.color = "rgba(32, 32, 32, 0.5)";
+    } else {
+      this.meSelect.style.color = "rgba(32, 32, 32, 1)";
+    }
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  };
+
+  handleKeydown = (
+    keyOrKeys: string | string[],
+    callback: () => void
+  ): ((event: KeyboardEvent) => void) => {
+    return (e: KeyboardEvent) => {
+      if (typeof keyOrKeys === "string" && e.key === keyOrKeys) {
+        callback();
+      } else if (typeof keyOrKeys === "object" && keyOrKeys.includes(e.key)) {
+        callback();
+      }
+    };
+  };
+
+  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`?
+    // https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+    // TODO: "If your component adds an event listener to anything except itself or its templated DOM
+    // – for example, to Window, Document, or some element in the main DOM – you should add the
+    // listener in connectedCallback and remove it in disconnectedCallback." (https://lit.dev/docs/components/events/)
+    document.addEventListener("click", (event: MouseEvent) => {
+      if (!event.composedPath().includes(this.meSelect)) {
+        this.isOpen = false;
+      }
+    });
+  }
+
+  static styles = [
+    css`
+      :host {
+        --light-grey: #e3e3e3;
+        --active-option-color: #f5f7f9;
+        --light-border: 1px solid $light-border-color;
+      }
+
+      #selectText {
+        background-color: transparent;
+        border: none;
+        outline: none;
+        font-size: 14px;
+        line-height: 14px;
+        font-family: "Helvetica Neue", Arial;
+        width: 100%;
+        padding: 0;
+        height: 14px;
+        display: flex;
+        align-items: center;
+      }
+
+      ul {
+        padding-left: 0;
+        margin-bottom: 0;
+        max-height: 140px;
+        overflow-y: scroll;
+        position: absolute;
+        min-height: 40px;
+        min-width: 144px;
+        max-width: 400px;
+        width: max-content;
+        background-color: white;
+        z-index: 20;
+        margin-top: 4px;
+        border: var(--light-border);
+        box-sizing: border-box;
+        box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.15);
+        border-radius: 10px;
+
+        font-size: 14px;
+        line-height: 14px;
+        font-family: "Helvetica Neue", Arial;
+      }
+
+      #outer-select-container {
+        position: relative;
+      }
+
+      #select {
+        width: -webkit-fill-available;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: rgba(32, 32, 32, 0.5);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 30px;
+      }
+
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 8px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: rgba(0, 0, 0, 0.4);
+        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+      }
+
+      .option {
+        list-style: none;
+        padding: 10px;
+      }
+
+      .option:first-child {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+      }
+
+      .option:last-child {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+      }
+
+      /* TODO: why two diff ones? copied from EWA but don't understand */
+      .option:active {
+        background-color: var(--light-grey);
+      }
+
+      .option.active {
+        background-color: var(--active-option-color);
+      }
+    `,
+    InputStyles,
+  ];
+
+  firstUpdated = (): void => {
+    if (this.value && this.meSelect) {
+      this.meSelect.style.color = "rgba(32, 32, 32, 1)";
+    }
+  };
+  render(): TemplateResult {
+    return html`
+      <div id="outer-select-container">
+        <div
+          id="select"
+          class=${classMap({
+            ["webchat-input"]: true,
+            ["webchat-font__desktop"]: !isMobile(),
+            ["webchat-font__mobile"]: isMobile(),
+          })}
+          tabindex="0"
+          @click=${() => (this.isOpen = !this.isOpen)}
+          @keydown="${(e: KeyboardEvent) => {
+            switch (e.key) {
+              case "Enter":
+              case " ":
+                e.preventDefault();
+                if (this.isOpen && this.activeOption) {
+                  this.setSelectedOption(this.activeOption);
+                } else {
+                  this.toggleSelect();
+                }
+                break;
+              case "Escape":
+                e.preventDefault();
+                this.isOpen = false;
+                break;
+              case "Tab":
+                if (this.isOpen) {
+                  e.preventDefault();
+                }
+                break;
+              case "ArrowUp":
+                e.preventDefault();
+                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.activeOptionIndex == null) {
+                    this.activeOptionIndex = 0;
+                  } else if (this.activeOptionIndex < this.options.length - 1) {
+                    this.activeOptionIndex++;
+                  }
+                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.adjustScrollToActiveOption();
+                }
+                break;
+            }
+          }}"
+        >
+          ${this.options.find((o) => o.value === this.value)?.label
+            ? html` <span id="selectText"
+                >${this.options.find((o) => o.value === this.value)?.label ??
+                this.placeholder}</span
+              >`
+            : html` <input
+                readonly
+                placeholder="${this.placeholder}"
+                .value="${this.options.find((o) => o.value === this.value)
+                  ?.label ||
+                this.value ||
+                ""}"
+                id="selectText"
+              />`}
+
+          <svg
+            width="10"
+            height="6"
+            viewBox="0 0 10 6"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0.189941 1.25439L1.35369 0.0906372L4.84494 3.58189L8.33619 0.0906372L9.49994 1.25439L4.84494 5.90939L0.189941 1.25439Z"
+              fill="#83818E"
+            />
+          </svg>
+        </div>
+        ${this.isOpen
+          ? html`<ul>
+              ${this.options.map(
+                (option) =>
+                  html`<li
+                    @click="${() => this.setSelectedOption(option)}"
+                    @keydown="${this.handleKeydown(["Enter", " "], () =>
+                      this.setSelectedOption(option)
+                    )}"
+                    @mousemove="${() => {
+                      this.activeOption = option;
+                    }}"
+                    @mouseleave="${() => {
+                      this.activeOption = null;
+                    }}"
+                    class="option ${classMap({
+                      active: this.activeOption === option,
+                    })}"
+                    tabindex="0"
+                  >
+                    ${option.label}
+                  </li>`
+              )}
+            </ul>`
+          : ""}
+      </div>
+    `;
+  }
+}

package/src/WebComponent/mega-loader.ts

@@ -0,0 +1,36 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("mega-loader")
+export class MegaLoader extends LitElement {
+  static styles = css`
+    .spinner {
+      border: 4px solid rgba(0, 0, 0, 0.2);
+      border-top: 4px solid var(--primary-color, #c057ff);
+      border-radius: 50%;
+      width: var(--mega-loader-size, 64px);
+      height: var(--mega-loader-size, 64px);
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+
+  @property({ type: Number })
+  size = 64;
+
+  updated(): void {
+    this.style.setProperty("--mega-loader-size", `${this.size}px`);
+  }
+
+  render(): TemplateResult {
+    return html`<div class="spinner"></div>`;
+  }
+}

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,204 @@
+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;
+  }
+  .message-text-large {
+    word-break: break-word;
+    margin: 0;
+    padding: 4px 8px;
+    line-height: 130%;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    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;
+  }
+`;