import { r as registerInstance, h, H as Host, g as getElement, F as Fragment } from './index-439360eb.js';
import { K as KlevuInit } from './klevu-init-c4ef62f2.js';
import { s as startMoi } from './moi-9afd6314.js';
import './isBrowser-38d37bdf.js';

const klevuProductQueryCss = ":host{display:block}.content{padding:var(--klevu-spacing-04);box-sizing:border-box;display:flex;flex-direction:column;height:100%}klevu-chat-layout{height:500px}@media (max-width: 520px){klevu-chat-layout{height:100%}}klevu-chat-messages{padding-right:var(--klevu-spacing-04);height:100%}.header{display:flex;align-items:center;justify-content:space-between}.header klevu-icon{cursor:pointer}div[part=\"product-query-header\"]{width:100%}div[part=\"product-query-footer\"] .inputs{display:flex;gap:var(--klevu-spacing-04)}div[part=\"product-query-footer\"] .sendmessage{display:flex;gap:var(--klevu-spacing-04);padding-top:var(--klevu-spacing-04)}div[part=\"product-query-footer\"] .sendmessage klevu-textfield{width:100%}.pqa_feedback{text-align:center}.pqa_feedback>*{padding-bottom:var(--klevu-spacing-04)}.pqa_feedback klevu-icon{font-size:24px;padding:var(--klevu-spacing-04);cursor:pointer;border-radius:50%}.pqa_feedback klevu-icon:hover{background-color:var(--klevu-color-neutral-2)}.pqa_feedback klevu-icon:nth-child(1){color:var(--klevu-color-accent-1)}.pqa_feedback klevu-icon:nth-child(2){color:var(--klevu-color-accent-3)}klevu-typography.fineprint{display:block;--klevu-body-xs-size:10px;padding-bottom:var(--klevu-spacing-04);margin-bottom:var(--klevu-spacing-04);border-bottom:1px solid var(--klevu-color-neutral-4)}.loading-sorry{display:block;--klevu-body-xs-size:10px}";

var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
  if (kind === "m")
    throw new TypeError("Private method is not writable");
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a setter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot write private member to an object whose class did not declare it");
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _KlevuProductQuery_instances, _KlevuProductQuery_popup, _KlevuProductQuery_layoutElement, _KlevuProductQuery_contentDiv, _KlevuProductQuery_checkIsPQAEnabled, _KlevuProductQuery_sendMessage, _KlevuProductQuery_register, _KlevuProductQuery_pqafeedback, _KlevuProductQuery_closeModal, _KlevuProductQuery_start, _KlevuProductQuery_onAction, _KlevuProductQuery_onFeedback, _KlevuProductQuery_renderChat, _KlevuProductQuery_renderFeedback;
const KlevuProductQuery = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    _KlevuProductQuery_instances.add(this);
    _KlevuProductQuery_popup.set(this, void 0);
    _KlevuProductQuery_layoutElement.set(this, void 0);
    _KlevuProductQuery_contentDiv.set(this, void 0);
    this.url = "";
    this.productId = undefined;
    this.pqaWidgetId = undefined;
    this.textFieldVariant = "pill";
    this.textFieldPlaceholder = "Ask a questions";
    this.popupTitle = "Ask a Question";
    this.buttonText = "Ask a Question";
    this.finePrint = "I'm an AI model. Sometimes, I may make mistakes. Please verify answers on the product page.";
    this.askButtonText = undefined;
    this.useBackground = undefined;
    this.popupAnchor = "bottom-start";
    this.popupOffset = undefined;
    this.settings = undefined;
    this.text = "";
    this.name = "";
    this.email = "";
    this.registered = true // change to false when registering works
    ;
    this.showFeedback = false;
    this.showLoading = false;
    this.showLoadingSorry = false;
    this.feedbacks = [];
    this.showMessageFeedbackFor = undefined;
    this.isEnabled = false;
    this.messages = [];
  }
  async connectedCallback() {
    var _a, _b;
    await KlevuInit.ready();
    if ((_a = window.klevu_page_meta) === null || _a === void 0 ? void 0 : _a.itemId) {
      this.productId = window.klevu_page_meta.itemId;
    }
    if (!this.productId && this.url == "") {
      const canonical = document.querySelector("link[rel='canonical']");
      this.url = (_b = canonical === null || canonical === void 0 ? void 0 : canonical.href) !== null && _b !== void 0 ? _b : window.location.href;
    }
    await __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_checkIsPQAEnabled).call(this);
  }
  onMessage() {
    var _a;
    if (!this.session) {
      return;
    }
    this.messages = this.session.messages;
    this.feedbacks = this.session.feedbacks;
    (_a = __classPrivateFieldGet(this, _KlevuProductQuery_layoutElement, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom();
  }
  async onMessageFeedback(e) {
    var _a, _b, _c;
    await ((_a = this.session) === null || _a === void 0 ? void 0 : _a.addFeedback(e.detail.feedback.id, e.detail.feedback.thumbs, e.detail.reason));
    this.feedbacks = ((_b = this.session) === null || _b === void 0 ? void 0 : _b.feedbacks) || [];
    this.messages = ((_c = this.session) === null || _c === void 0 ? void 0 : _c.messages) || [];
  }
  render() {
    if (!this.isEnabled) {
      return null;
    }
    return (h(Host, null, h("klevu-popup", { ref: (el) => (__classPrivateFieldSet(this, _KlevuProductQuery_popup, el, "f")), exportparts: "popup-content, popup-origin", onKlevuPopupClose: __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_closeModal).bind(this), onKlevuPopupOpen: () => {
        __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_start).call(this);
      }, anchor: this.popupAnchor, offset: this.popupOffset, elevation: 3, useBackground: this.useBackground, popupWidth: 520 }, h("div", { slot: "origin" }, h("klevu-button", { part: "klevu-query-open-button" }, this.buttonText)), h("div", { class: "content", slot: "content", ref: (el) => (__classPrivateFieldSet(this, _KlevuProductQuery_contentDiv, el, "f")) }, this.showFeedback ? __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_renderFeedback).call(this) : __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_renderChat).call(this)))));
  }
  get el() { return getElement(this); }
};
_KlevuProductQuery_popup = new WeakMap(), _KlevuProductQuery_layoutElement = new WeakMap(), _KlevuProductQuery_contentDiv = new WeakMap(), _KlevuProductQuery_instances = new WeakSet(), _KlevuProductQuery_checkIsPQAEnabled = async function _KlevuProductQuery_checkIsPQAEnabled() {
  var _a;
  const config = await ((_a = this.el.closest("klevu-init")) === null || _a === void 0 ? void 0 : _a.getConfig());
  if (!this.pqaWidgetId) {
    this.isEnabled = true;
    return;
  }
  const res = await window.fetch(`${config.moiApiUrl}chat/status?pqaWidgetId=${this.pqaWidgetId}`);
  const statusJSON = await res.json();
  this.isEnabled = statusJSON.status === "UNKNOWN" || statusJSON.status === "ENABLED";
}, _KlevuProductQuery_sendMessage = async function _KlevuProductQuery_sendMessage() {
  var _a, _b;
  const message = this.text.trim();
  if (message == "") {
    return;
  }
  this.text = "";
  (_a = __classPrivateFieldGet(this, _KlevuProductQuery_layoutElement, "f")) === null || _a === void 0 ? void 0 : _a.scrollMainToBottom();
  this.showLoading = true;
  const timeout = setTimeout(() => {
    this.showLoadingSorry = true;
  }, 4000);
  await ((_b = this.session) === null || _b === void 0 ? void 0 : _b.query({
    message: message,
    klevuSettings: this.settings,
  }));
  clearTimeout(timeout);
  this.showLoadingSorry = false;
  this.showLoading = false;
}, _KlevuProductQuery_register = function _KlevuProductQuery_register() {
  var _a, _b;
  (_a = this.session) === null || _a === void 0 ? void 0 : _a.messages.push({
    message: {
      id: "register",
      type: "text",
      value: `${this.name}, (${this.email})`,
      note: null,
    },
  });
  this.registered = true;
  (_b = __classPrivateFieldGet(this, _KlevuProductQuery_layoutElement, "f")) === null || _b === void 0 ? void 0 : _b.scrollMainToBottom();
}, _KlevuProductQuery_pqafeedback = function _KlevuProductQuery_pqafeedback(dir) {
  var _a;
  (_a = __classPrivateFieldGet(this, _KlevuProductQuery_popup, "f")) === null || _a === void 0 ? void 0 : _a.closeModal();
}, _KlevuProductQuery_closeModal = function _KlevuProductQuery_closeModal(e) {
  /*
  if (!this.showFeedback) {
    this.showFeedback = true
    e.preventDefault()
    return
  }
  */
}, _KlevuProductQuery_start = async function _KlevuProductQuery_start() {
  var _a, _b, _c;
  this.showFeedback = false;
  (_a = __classPrivateFieldGet(this, _KlevuProductQuery_popup, "f")) === null || _a === void 0 ? void 0 : _a.openModal();
  let config = await ((_b = this.el.closest("klevu-init")) === null || _b === void 0 ? void 0 : _b.getConfig());
  const useConfig = config.apiKey && config.apiKey !== "";
  this.session = await startMoi({
    onMessage: this.onMessage.bind(this),
    // Do nothing on redirect as we have our own system
    onRedirect: () => { },
    url: this.url === "" ? undefined : this.url,
    productId: this.productId,
    mode: "PQA",
    onAction: __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_onAction).bind(this),
    pqaWidgetId: this.pqaWidgetId,
    settings: {
      configOverride: useConfig ? config : undefined,
    },
  });
  this.messages = this.session.messages;
  this.feedbacks = this.session.feedbacks;
  await ((_c = __classPrivateFieldGet(this, _KlevuProductQuery_layoutElement, "f")) === null || _c === void 0 ? void 0 : _c.scrollMainToBottom("instant"));
  // add this when registering works
  //this.registered = this.messages.length > 1
}, _KlevuProductQuery_onAction = function _KlevuProductQuery_onAction(action) {
  if (action.type !== "askFeedbackReason") {
    return;
  }
  this.showMessageFeedbackFor = action.context.messageId;
}, _KlevuProductQuery_onFeedback = async function _KlevuProductQuery_onFeedback(e) {
  var _a, _b;
  await ((_a = this.session) === null || _a === void 0 ? void 0 : _a.addFeedback(e.detail.message.id, e.detail.feedback));
  this.feedbacks = ((_b = this.session) === null || _b === void 0 ? void 0 : _b.feedbacks) || [];
}, _KlevuProductQuery_renderChat = function _KlevuProductQuery_renderChat() {
  return (h(Fragment, null, h("klevu-chat-layout", { ref: (el) => (__classPrivateFieldSet(this, _KlevuProductQuery_layoutElement, el, "f")), elementForHeightCalculation: __classPrivateFieldGet(this, _KlevuProductQuery_contentDiv, "f") }, h("div", { part: "product-query-header", slot: "header" }, h("div", { class: "header" }, h("klevu-typography", { variant: "body-m-bold" }, this.popupTitle), h("klevu-icon", { name: "close", onClick: () => { var _a; return (_a = __classPrivateFieldGet(this, _KlevuProductQuery_popup, "f")) === null || _a === void 0 ? void 0 : _a.closeModal(); } })), h("klevu-typography", { variant: "body-xs", class: "fineprint" }, this.finePrint)), h("klevu-chat-messages", { messages: this.messages, feedbacks: this.feedbacks, enableMessageFeedback: true, onKlevuMessageFeedback: __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_onFeedback).bind(this), showFeedbackFor: this.showMessageFeedbackFor }, h("div", { slot: "after-messages" }, this.showLoading ? h("klevu-loading-indicator", null) : null, this.showLoadingSorry ? (h("klevu-typography", { class: "loading-sorry", variant: "body-xs" }, "I take a few extra seconds when answering the first question sometimes if I need to scan whole page.")) : null)), h("div", { part: "product-query-footer", slot: "footer" }, !this.registered ? (h(Fragment, null, h("div", { class: "inputs" }, h("klevu-textfield", { value: this.name, variant: "pill", placeholder: "Name", onKlevuTextEnterPressed: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_register).call(this), onKlevuTextChanged: (e) => (this.name = e.detail) }), h("klevu-textfield", { value: this.email, variant: "pill", placeholder: "Email", onKlevuTextEnterPressed: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_register).call(this), onKlevuTextChanged: (e) => {
      this.email = e.detail;
    } }), h("klevu-button", { icon: "send", onClick: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_register).call(this) })), h("klevu-typography", { variant: "body-xs" }, "We are compliant with data protection regulations. Visit our privacy policy to learn how we collect, keep, and process your private information in accordance with these laws."))) : (h("div", { class: "sendmessage" }, h("klevu-textfield", { value: this.text, variant: this.textFieldVariant, placeholder: this.textFieldPlaceholder, onKlevuTextEnterPressed: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_sendMessage).call(this), onKlevuTextChanged: (e) => (this.text = e.detail) }), this.askButtonText ? (h("klevu-button", { onClick: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_sendMessage).call(this) }, this.askButtonText)) : (h("klevu-button", { icon: "chevron_right", onClick: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_sendMessage).call(this) }))))))));
}, _KlevuProductQuery_renderFeedback = function _KlevuProductQuery_renderFeedback() {
  return (h("div", { class: "pqa_feedback", part: "product-query-feedback" }, h("klevu-typography", { variant: "body-l-bold" }, "Rate your experience"), h("klevu-typography", { variant: "body-m" }, "How was your experience using this Q&A tool?"), h("div", null, h("klevu-icon", { onClick: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_pqafeedback).call(this, "up"), name: "thumb_up" }), h("klevu-icon", { onClick: () => __classPrivateFieldGet(this, _KlevuProductQuery_instances, "m", _KlevuProductQuery_pqafeedback).call(this, "down"), name: "thumb_down" }))));
};
KlevuProductQuery.style = klevuProductQueryCss;

export { KlevuProductQuery as klevu_product_query };

//# sourceMappingURL=klevu-product-query.entry.js.map