@meetelise/chat 1.25.1 → 1.25.2

package/src/WebComponent/me-select.ts

@@ -1,322 +0,0 @@
-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/mini-loader.ts

@@ -1,28 +0,0 @@
-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

@@ -1,204 +0,0 @@
-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;
-  }
-`;