@miso.ai/client-sdk-ui 1.10.3-beta.0 → 1.10.4-beta.0

package/dist/cjs/defaults/hybrid-search/controls.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wireAnswerBox = wireAnswerBox;
+var _answerBox = _interopRequireDefault(require("./answer-box.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function wireAnswerBox(client, element) {
+  if (!client) {
+    throw new Error('client is required');
+  }
+  if (!element) {
+    return;
+  }
+  new _answerBox.default(client, element);
+}

package/dist/cjs/defaults/hybrid-search/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  constants: true,
+  phrases: true,
+  templates: true
+};
+exports.templates = exports.phrases = exports.constants = void 0;
+var _constants = _interopRequireWildcard(require("./constants.js"));
+var _phrases = _interopRequireWildcard(require("./phrases.js"));
+var _templates = _interopRequireWildcard(require("./templates.js"));
+var _controls = require("./controls.js");
+Object.keys(_controls).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _controls[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _controls[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const constants = exports.constants = Object.freeze(_constants);
+const phrases = exports.phrases = Object.freeze(_phrases);
+const templates = exports.templates = Object.freeze(_templates);

package/dist/cjs/defaults/hybrid-search/phrases.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sources = exports.showMore = exports.showLess = exports.question = exports.keywords = exports.hits = void 0;
+/**
+ * The phrase displayed right before <miso-question>
+ */
+const question = exports.question = 'You asked...';
+
+/**
+ * The phrase displayed right before <miso-sources>
+ */
+const sources = exports.sources = 'Sources';
+
+/**
+ * The phrase to display <miso-keywords>
+ */
+const keywords = exports.keywords = 'You searched for “${value}”';
+
+/**
+ * The phrase to display <miso-hits>
+ */
+const hits = exports.hits = '${value} Results';
+const showMore = exports.showMore = 'Show more';
+const showLess = exports.showLess = 'Show less';

package/dist/cjs/defaults/hybrid-search/templates.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.helpers = void 0;
+exports.root = root;
+exports.sections = void 0;
+var _commons = require("@miso.ai/commons");
+var CONSTANTS = _interopRequireWildcard(require("./constants.js"));
+var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
+var _templates = require("../common/templates.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+class Sections extends _templates.Sections {
+  constructor() {
+    super({
+      helpers
+    });
+  }
+  answerBox(options) {
+    const {
+      element
+    } = this._helpers;
+    const {
+      classPrefix
+    } = options;
+    return element('div', {
+      classes: [`${classPrefix}__answer-box`]
+    }, [element('div', {
+      classes: [`${classPrefix}__answer-box-inner`]
+    }, this.answerGroup(options)), this.answerBoxToggle(options)]);
+  }
+  answerBoxToggle(options) {
+    const {
+      element
+    } = this._helpers;
+    const {
+      classPrefix
+    } = options;
+    return element('div', {
+      classes: [`${classPrefix}__answer-box-toggle-container`]
+    }, [element('div', {
+      classes: [`${classPrefix}__answer-box-toggle`],
+      'data-role': 'answer-box-toggle'
+    })]);
+  }
+  searchResultsGroup(options) {
+    const {
+      container
+    } = this._helpers;
+    return container(options, {
+      name: 'search-results',
+      visibleWhen: 'ready'
+    }, [this.searchResultsInfoGroup(options), this.searchResultsFilters(options), '<miso-products></miso-products>']);
+  }
+  searchResultsInfoGroup(options) {
+    const {
+      element
+    } = this._helpers;
+    const {
+      classPrefix
+    } = options;
+    return element('div', {
+      classes: [`${classPrefix}__search-results-info`]
+    }, [this.keywords(options), this.hits(options)]);
+  }
+  searchResultsFilters(options) {
+    const {
+      element
+    } = this._helpers;
+    const {
+      classPrefix
+    } = options;
+    return element('div', {
+      classes: [`${classPrefix}__search-results-filters`]
+    }, ['<miso-facets></miso-facets>']);
+  }
+  keywords(options) {
+    const {
+      phrase
+    } = this._helpers;
+    return phrase(options, {
+      name: 'keywords',
+      tag: 'div',
+      inline: true
+    }).replaceAll('${value}', '<miso-keywords></miso-keywords>');
+  }
+  hits(options) {
+    const {
+      phrase
+    } = this._helpers;
+    return phrase(options, {
+      name: 'hits',
+      tag: 'div',
+      inline: true
+    }).replaceAll('${value}', '<miso-hits></miso-hits>');
+  }
+}
+const helpers = exports.helpers = (0, _commons.externalize)(new _templates.Helpers(Object.assign({}, CONSTANTS, {
+  DEFAULT_PHRASES
+})));
+const sections = exports.sections = (0, _commons.externalize)(new Sections({
+  helpers
+}));
+function root() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    normalizeOptions,
+    section,
+    container
+  } = helpers;
+  options = normalizeOptions(options);
+  const {
+    answerBox
+  } = sections;
+  return [section(options, {
+    name: 'question'
+  }, [container(options, {
+    name: 'query'
+  }, '<miso-query></miso-query>')]), section(options, {
+    name: 'answer'
+  }, [answerBox(options)]), section(options, {
+    name: 'search-results'
+  }, sections.searchResultsGroup(options))].join('');
+}
+;

package/dist/cjs/defaults/index.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ask = void 0;
+exports.hybridSearch = exports.ask = void 0;
 var _ask = _interopRequireWildcard(require("./ask/index.js"));
+var _hybridSearch = _interopRequireWildcard(require("./hybrid-search/index.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const ask = exports.ask = Object.freeze(_ask);
+const ask = exports.ask = Object.freeze(_ask);
+const hybridSearch = exports.hybridSearch = Object.freeze(_hybridSearch);

package/dist/cjs/element/container/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "MisoExploreElement", {
     return _misoExplore.default;
   }
 });
+Object.defineProperty(exports, "MisoHybridSearchElement", {
+  enumerable: true,
+  get: function () {
+    return _misoHybridSearch.default;
+  }
+});
 Object.defineProperty(exports, "MisoRecommendationElement", {
   enumerable: true,
   get: function () {
@@ -29,6 +35,7 @@ Object.defineProperty(exports, "MisoSearchElement", {
 });
 var _misoAsk = _interopRequireDefault(require("./miso-ask.js"));
 var _misoExplore = _interopRequireDefault(require("./miso-explore.js"));
+var _misoHybridSearch = _interopRequireDefault(require("./miso-hybrid-search.js"));
 var _misoSearch = _interopRequireDefault(require("./miso-search.js"));
 var _misoRecommendation = _interopRequireDefault(require("./miso-recommendation.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/container/miso-hybrid-search.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoContainer = _interopRequireDefault(require("./miso-container.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TAG_NAME = 'miso-hybrid-search';
+class MisoHybridSearchElement extends _misoContainer.default {
+  static get observedAttributes() {
+    return _misoContainer.default.observedAttributes;
+  }
+  static get tagName() {
+    return TAG_NAME;
+  }
+  _getWorkflow(client) {
+    return client.ui.hybridSearch;
+  }
+}
+exports.default = MisoHybridSearchElement;

package/dist/cjs/element/role/index.js

@@ -21,12 +21,30 @@ Object.defineProperty(exports, "MisoErrorElement", {
     return _misoError.default;
   }
 });
+Object.defineProperty(exports, "MisoFacetsElement", {
+  enumerable: true,
+  get: function () {
+    return _misoFacets.default;
+  }
+});
 Object.defineProperty(exports, "MisoFeedbackElement", {
   enumerable: true,
   get: function () {
     return _misoFeedback.default;
   }
 });
+Object.defineProperty(exports, "MisoHitsElement", {
+  enumerable: true,
+  get: function () {
+    return _misoHits.default;
+  }
+});
+Object.defineProperty(exports, "MisoKeywordsElement", {
+  enumerable: true,
+  get: function () {
+    return _misoKeywords.default;
+  }
+});
 Object.defineProperty(exports, "MisoProductsElement", {
   enumerable: true,
   get: function () {
@@ -93,5 +111,8 @@ var _misoSources = _interopRequireDefault(require("./miso-sources.js"));
 var _misoRelatedResources = _interopRequireDefault(require("./miso-related-resources.js"));
 var _misoRelatedQuestions = _interopRequireDefault(require("./miso-related-questions.js"));
 var _misoAffiliation = _interopRequireDefault(require("./miso-affiliation.js"));
+var _misoKeywords = _interopRequireDefault(require("./miso-keywords.js"));
+var _misoHits = _interopRequireDefault(require("./miso-hits.js"));
+var _misoFacets = _interopRequireDefault(require("./miso-facets.js"));
 var _misoError = _interopRequireDefault(require("./miso-error.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/element/role/miso-facets.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoFacetsElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.FACETS
+    });
+  }
+  static get tagName() {
+    return 'miso-facets';
+  }
+}
+exports.default = MisoFacetsElement;

package/dist/cjs/element/role/miso-hits.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoHitsElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.HITS
+    });
+  }
+  static get tagName() {
+    return 'miso-hits';
+  }
+}
+exports.default = MisoHitsElement;

package/dist/cjs/element/role/miso-keywords.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _misoComponent = _interopRequireDefault(require("./miso-component.js"));
+var _constants = require("../../constants.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class MisoKeywordsElement extends _misoComponent.default {
+  constructor() {
+    super({
+      role: _constants.ROLE.KEYWORDS
+    });
+  }
+  static get tagName() {
+    return 'miso-keywords';
+  }
+}
+exports.default = MisoKeywordsElement;

package/dist/cjs/layout/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "ErrorLayout", {
     return _error.default;
   }
 });
+Object.defineProperty(exports, "FacetsLayout", {
+  enumerable: true,
+  get: function () {
+    return _facets.default;
+  }
+});
 Object.defineProperty(exports, "FeedbackLayout", {
   enumerable: true,
   get: function () {
@@ -101,4 +107,5 @@ var _feedback = _interopRequireDefault(require("./radio/feedback.js"));
 var _text = _interopRequireDefault(require("./text/text.js"));
 var _index = _interopRequireDefault(require("./text/typewriter/index.js"));
 var _affiliation = _interopRequireDefault(require("./affiliation/affiliation.js"));
+var _facets = _interopRequireDefault(require("./input/facets.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/layout/input/facets.js

@@ -0,0 +1,294 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commons = require("@miso.ai/commons");
+var _constants = require("../../constants.js");
+var _template = _interopRequireDefault(require("../template.js"));
+var _bindings = _interopRequireDefault(require("../../util/bindings.js"));
+const _excluded = ["className", "templates"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+const TYPE = 'facets';
+const DEFAULT_CLASSNAME = 'miso-facets';
+const DEDAULT_FACET_CLASSNAME = 'miso-facet';
+const CUSTOM_ATTRIBUTES_PREFIX = 'custom_attributes.';
+function root(layout, state) {
+  const {
+    className,
+    role,
+    templates
+  } = layout;
+  const roleAttr = role ? `data-role="${role}"` : '';
+  return `<div class="${className}" ${roleAttr}>${templates.facets(layout, state)}</div>`;
+}
+function facets(layout, state) {
+  const {
+    templates
+  } = layout;
+  const {
+    facet_fields = {}
+  } = state.value || {};
+  return Object.keys(facet_fields).map(field => templates.facet(layout, {
+    field,
+    entries: facet_fields[field]
+  }, state));
+}
+function facet(layout, facet, state) {
+  const {
+    facetClassName = DEDAULT_FACET_CLASSNAME,
+    templates
+  } = layout;
+  const {
+    field
+  } = facet;
+  return `<div class="${facetClassName}" data-role="facet" data-field="${(0, _commons.escapeHtml)(field)}">${templates.header(layout, facet, state)}${templates.options(layout, facet, state)}</div>`;
+}
+function header(layout, facet, state) {
+  const {
+    facetClassName = DEDAULT_FACET_CLASSNAME,
+    templates
+  } = layout;
+  return `<div class="${facetClassName}__header">${templates.title(layout, facet, state)}</div>`;
+}
+function title(layout, _ref) {
+  let {
+    field
+  } = _ref;
+  if (field.startsWith(CUSTOM_ATTRIBUTES_PREFIX)) {
+    field = field.substring(CUSTOM_ATTRIBUTES_PREFIX.length);
+  }
+  // TODO: to words
+  return (0, _commons.escapeHtml)(field);
+}
+function options(layout, _ref2, state) {
+  let {
+    field,
+    entries
+  } = _ref2;
+  const {
+    facetClassName = DEDAULT_FACET_CLASSNAME,
+    templates
+  } = layout;
+  return `<ul class="${facetClassName}__options" data-role="options">${entries.map(_ref3 => {
+    let [value, count] = _ref3;
+    return templates.option(layout, {
+      field,
+      value,
+      count
+    }, state);
+  }).join('')}</ul>`;
+}
+function option(layout, entry, state) {
+  const {
+    facetClassName = DEDAULT_FACET_CLASSNAME,
+    templates
+  } = layout;
+  return `
+<li class="${facetClassName}__option" data-role="option" tabindex="0">
+  <span class="${facetClassName}__value">${templates.value(layout, entry, state)}</span>
+  <span class="${facetClassName}__count">${templates.count(layout, entry, state)}</span>
+</li>`;
+}
+function value(layout, _ref4, state) {
+  let {
+    value
+  } = _ref4;
+  return (0, _commons.escapeHtml)(value);
+}
+function count(layout, _ref5, state) {
+  let {
+    count
+  } = _ref5;
+  return layout.templates.helpers.formatNumber(count);
+}
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  facets,
+  facet,
+  header,
+  title,
+  options,
+  option,
+  value,
+  count
+});
+function getItemKey(field, value) {
+  return `${field}:::${value}`;
+}
+function getSelectedValues(facets) {
+  const selections = {};
+  for (const field in facets) {
+    selections[field] = new Set(facets[field]);
+  }
+  return selections;
+}
+class FacetsLayout extends _template.default {
+  static get category() {
+    return _constants.LAYOUT_CATEGORY.FILTERS;
+  }
+  static get type() {
+    return TYPE;
+  }
+  static get defaultTemplates() {
+    return DEFAULT_TEMPLATES;
+  }
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+  constructor() {
+    let _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let {
+        className = DEFAULT_CLASSNAME,
+        templates
+      } = _ref6,
+      options = _objectWithoutPropertiesLoose(_ref6, _excluded);
+    super(Object.assign({
+      className,
+      templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
+    }, options));
+    this._bindings = new _bindings.default();
+  }
+  initialize(view) {
+    const {
+      proxyElement,
+      hub,
+      filters
+    } = view;
+    this._unsubscribes = [...this._unsubscribes, proxyElement.on('click', e => this._handleClick(e)), filters.on('update', e => this._updateSelections(e)), filters.on('reset', () => this._syncSelections())];
+  }
+  _render(element, data, controls) {
+    super._render(element, data, controls);
+    this._syncSelections();
+  }
+  _afterRender(element, state) {
+    this._syncBindings(element, state);
+  }
+  _unrender() {
+    this._clearBindings();
+  }
+  _syncSelections() {
+    const selectedValues = getSelectedValues(this._view.filters.states.facets);
+    for (const {
+      value: {
+        field,
+        value
+      },
+      element
+    } of this._bindings.entries) {
+      this._setSelected(element, selectedValues[field] && selectedValues[field].has(value));
+    }
+  }
+  _updateSelections(_ref7) {
+    let {
+      updates
+    } = _ref7;
+    const selectedValues = getSelectedValues(updates.facets);
+    for (const {
+      value: {
+        field,
+        value
+      },
+      element
+    } of this._bindings.entries) {
+      if (!selectedValues[field]) {
+        continue;
+      }
+      this._setSelected(element, selectedValues[field].has(value));
+    }
+  }
+  _setSelected(element, selected) {
+    if (!element) {
+      return;
+    }
+    if (selected) {
+      element.classList.add('selected');
+    } else {
+      element.classList.remove('selected');
+    }
+  }
+  _syncBindings(element, state) {
+    if (!element || !state.value) {
+      return;
+    }
+    const items = this._getItems(state);
+    const keys = [];
+    const values = [];
+    const elements = [];
+    for (const facetElement of this._getFacetElements(element)) {
+      const field = facetElement.getAttribute('data-field');
+      const _values = items[field];
+      if (!_values) {
+        continue;
+      }
+      const itemElements = this._getItemElements(facetElement);
+      for (let i = 0; i < itemElements.length; i++) {
+        const itemElement = itemElements[i];
+        const value = _values[i];
+        if (!value) {
+          break;
+        }
+        keys.push(getItemKey(field, value));
+        values.push({
+          field,
+          value
+        });
+        elements.push(itemElement);
+      }
+    }
+    this._bindings.update(keys, values, elements);
+  }
+  _clearBindings() {
+    this._bindings.clear();
+  }
+  _getItems() {
+    let {
+      value
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const {
+      facet_fields = {}
+    } = value || {};
+    const items = {};
+    for (const field in facet_fields) {
+      // the key needs to be matched against data-field attribute
+      items[(0, _commons.escapeHtml)(field)] = facet_fields[field].map(_ref8 => {
+        let [value] = _ref8;
+        return value;
+      });
+    }
+    return items;
+  }
+  _getFacetElements(element) {
+    return Array.from(element.querySelectorAll(`[data-role="facet"]`));
+  }
+  _getFacetElement(element, field) {
+    return element.querySelector(`[data-role="facet"][data-field="${field}"]`);
+  }
+  _getItemElements(element) {
+    return Array.from(element.querySelectorAll(`[data-role="option"]`));
+  }
+  _handleClick(event) {
+    const element = event.target.closest(`[data-role="option"]`);
+    if (!element) {
+      return;
+    }
+    const binding = this._bindings.get(element);
+    const option = binding && binding.value;
+    if (!option) {
+      return;
+    }
+    const {
+      field,
+      value
+    } = option;
+    this._view.filters.facets.toggle(field, value);
+    this._view.filters.apply(); // TODO: support autoApply = false
+  }
+  destroy() {
+    this._bindings.clear();
+    super.destroy();
+  }
+}
+exports.default = FacetsLayout;